@sendbird/uikit-react 3.6.6 → 3.6.7-rc-0

package/cjs/ui/ImageRenderer.js

@@ -1,11 +1,17 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var numberToPx = (value => {
+  return typeof value === 'number' ? `${value}px` : value;
+});
+
 /*
   ImageRenderer displays image with url or source
   it checks if the source exist with img tag first
@@ -13,6 +19,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   and those properties switch img tag to real purposing element
 */
 
+function getBorderRadiusForImageRenderer() {
+  let circle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let borderRadius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return circle ? '50%' : numberToPx(borderRadius);
+}
 const ImageRenderer = _ref => {
   let {
     className = '',
@@ -24,11 +35,14 @@ const ImageRenderer = _ref => {
     fixedSize = false,
     placeHolder = null,
     defaultComponent = null,
+    borderRadius = null,
     onLoad = () => {/* noop */},
     onError = () => {/* noop */}
   } = _ref;
   const [showDefaultComponent, setShowDefaultComponent] = React.useState(false);
   const [showPlaceHolder, setShowPlaceHolder] = React.useState(true);
+  const parsedWidth = numberToPx(width);
+  const parsedHeight = numberToPx(height);
   const DefaultComponent = React.useMemo(() => {
     return typeof defaultComponent === 'function' ? defaultComponent() : defaultComponent;
   }, [defaultComponent]);
@@ -36,9 +50,9 @@ const ImageRenderer = _ref => {
     return placeHolder && typeof placeHolder === 'function' ? placeHolder({
       style: {
         width: '100%',
-        minWidth: width,
-        maxWidth: fixedSize ? width : '400px',
-        height,
+        minWidth: parsedWidth,
+        maxWidth: fixedSize ? parsedWidth : '400px',
+        height: parsedHeight,
         position: 'absolute',
         display: 'flex',
         justifyContent: 'center',
@@ -67,26 +81,27 @@ const ImageRenderer = _ref => {
     className: [...(Array.isArray(className) ? className : [className]), 'sendbird-image-renderer'].join(' '),
     style: {
       width: '100%',
-      minWidth: width,
-      maxWidth: fixedSize ? width : '400px',
-      height
+      minWidth: parsedWidth,
+      maxWidth: fixedSize ? parsedWidth : '400px',
+      height: parsedHeight
     }
   }, showPlaceHolder && PlaceHolder, showDefaultComponent ? DefaultComponent : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-image-renderer__image",
     style: {
       width: '100%',
-      minWidth: width,
-      maxWidth: fixedSize ? width : '400px',
-      height,
+      minWidth: parsedWidth,
+      maxWidth: fixedSize ? parsedWidth : '400px',
+      height: parsedHeight,
       position: 'absolute',
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
       backgroundSize: 'cover',
       backgroundImage: `url(${url})`,
-      borderRadius: circle ? '50%' : null
+      borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius)
     }
   }), HiddenImageLoader);
 };
 
-module.exports = ImageRenderer;
+exports["default"] = ImageRenderer;
+exports.getBorderRadiusForImageRenderer = getBorderRadiusForImageRenderer;
 //# sourceMappingURL=ImageRenderer.js.map

package/cjs/ui/ImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.js","sources":["../../../src/ui/ImageRenderer/index.tsx"],"sourcesContent":["import React, { useState, useMemo, ReactElement } from 'react';\n\nimport './index.scss';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\nexport interface ImageRendererProps {\n  className?: string | Array<string>;\n  url: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  circle?: boolean;\n  fixedSize?: boolean;\n  placeHolder?: ((props: { style: { [key: string]: string | number } }) => ReactElement) | ReactElement;\n  defaultComponent?: (() => ReactElement) | ReactElement;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\nconst ImageRenderer = ({\n  className = '',\n  url,\n  alt = '',\n  width = null,\n  height = null,\n  circle = false,\n  fixedSize = false,\n  placeHolder = null,\n  defaultComponent = null,\n  onLoad = () => { /* noop */ },\n  onError = () => { /* noop */ },\n}: ImageRendererProps): ReactElement => {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n\n  const DefaultComponent = useMemo(() => {\n    return typeof defaultComponent === 'function'\n      ? defaultComponent()\n      : defaultComponent;\n  }, [defaultComponent]);\n\n  const PlaceHolder = useMemo(() => {\n    return (placeHolder && typeof placeHolder === 'function')\n      ? placeHolder({\n        style: {\n          width: '100%',\n          minWidth: width,\n          maxWidth: fixedSize ? width : '400px',\n          height,\n          position: 'absolute',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      })\n      : null;\n  }, [placeHolder]);\n\n  const HiddenImageLoader = useMemo(() => {\n    setShowDefaultComponent(false);\n    // reset the state when url is changed\n    return (\n      <img\n        className=\"sendbird-image-renderer__hidden-image-loader\"\n        src={url}\n        alt={alt}\n        onLoad={() => {\n          setShowPlaceHolder(false);\n          onLoad();\n        }}\n        onError={() => {\n          setShowDefaultComponent(true);\n          onError();\n        }}\n      />\n    );\n  }, [url]);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: width,\n        maxWidth: fixedSize ? width : '400px',\n        height,\n      }}\n    >\n      {showPlaceHolder && PlaceHolder}\n      {\n        showDefaultComponent\n          ? DefaultComponent\n          : (\n            <div\n              className=\"sendbird-image-renderer__image\"\n              style={{\n                width: '100%',\n                minWidth: width,\n                maxWidth: fixedSize ? width : '400px',\n                height,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: circle ? '50%' : null,\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n    </div>\n  );\n};\n\nexport default ImageRenderer;\n"],"names":["ImageRenderer","_ref","className","url","alt","width","height","circle","fixedSize","placeHolder","defaultComponent","onLoad","onError","showDefaultComponent","setShowDefaultComponent","useState","showPlaceHolder","setShowPlaceHolder","DefaultComponent","useMemo","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","createElement","src","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","borderRadius"],"mappings":"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"}
+{"version":3,"file":"ImageRenderer.js","sources":["../../../src/utils/numberToPx.ts","../../../src/ui/ImageRenderer/index.tsx"],"sourcesContent":["export default (value: string | number): string => {\n  return typeof value === 'number' ? `${value}px` : value;\n};\n","import React, { useState, useMemo, ReactElement } from 'react';\n\nimport './index.scss';\nimport numberToPx from '../../utils/numberToPx';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\nexport function getBorderRadiusForImageRenderer(\n  circle = false,\n  borderRadius: string | number = null,\n): string {\n  return circle ? '50%' : numberToPx(borderRadius);\n}\n\nexport interface ImageRendererProps {\n  className?: string | Array<string>;\n  url: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  circle?: boolean;\n  fixedSize?: boolean;\n  placeHolder?: ((props: { style: { [key: string]: string | number } }) => ReactElement) | ReactElement;\n  defaultComponent?: (() => ReactElement) | ReactElement;\n  borderRadius?: string | number;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\nconst ImageRenderer = ({\n  className = '',\n  url,\n  alt = '',\n  width = null,\n  height = null,\n  circle = false,\n  fixedSize = false,\n  placeHolder = null,\n  defaultComponent = null,\n  borderRadius = null,\n  onLoad = () => { /* noop */ },\n  onError = () => { /* noop */ },\n}: ImageRendererProps): ReactElement => {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n\n  const parsedWidth = numberToPx(width);\n  const parsedHeight = numberToPx(height);\n\n  const DefaultComponent = useMemo(() => {\n    return typeof defaultComponent === 'function'\n      ? defaultComponent()\n      : defaultComponent;\n  }, [defaultComponent]);\n\n  const PlaceHolder = useMemo(() => {\n    return (placeHolder && typeof placeHolder === 'function')\n      ? placeHolder({\n        style: {\n          width: '100%',\n          minWidth: parsedWidth,\n          maxWidth: fixedSize ? parsedWidth : '400px',\n          height: parsedHeight,\n          position: 'absolute',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      })\n      : null;\n  }, [placeHolder]);\n\n  const HiddenImageLoader = useMemo(() => {\n    setShowDefaultComponent(false);\n    // reset the state when url is changed\n    return (\n      <img\n        className=\"sendbird-image-renderer__hidden-image-loader\"\n        src={url}\n        alt={alt}\n        onLoad={() => {\n          setShowPlaceHolder(false);\n          onLoad();\n        }}\n        onError={() => {\n          setShowDefaultComponent(true);\n          onError();\n        }}\n      />\n    );\n  }, [url]);\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: parsedWidth,\n        maxWidth: fixedSize ? parsedWidth : '400px',\n        height: parsedHeight,\n      }}\n    >\n      {showPlaceHolder && PlaceHolder}\n      {\n        showDefaultComponent\n          ? DefaultComponent\n          : (\n            <div\n              className=\"sendbird-image-renderer__image\"\n              style={{\n                width: '100%',\n                minWidth: parsedWidth,\n                maxWidth: fixedSize ? parsedWidth : '400px',\n                height: parsedHeight,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n    </div>\n  );\n};\n\nexport default ImageRenderer;\n"],"names":["value","getBorderRadiusForImageRenderer","circle","arguments","length","undefined","borderRadius","numberToPx","ImageRenderer","_ref","className","url","alt","width","height","fixedSize","placeHolder","defaultComponent","onLoad","onError","showDefaultComponent","setShowDefaultComponent","useState","showPlaceHolder","setShowPlaceHolder","parsedWidth","parsedHeight","DefaultComponent","useMemo","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","createElement","src","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage"],"mappings":"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"}

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../index-44985c08.js');
+var ui_Label = require('../index-3eaca310.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
+require('../stringSet-c3a71383.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Label.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('prop-types');
-var ui_Label = require('../index-44985c08.js');
-require('../stringSet-39e8b84e.js');
+var ui_Label = require('../index-3eaca310.js');
+require('../stringSet-c3a71383.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var ui_Label = require('../index-44985c08.js');
-require('../stringSet-39e8b84e.js');
+var ui_Label = require('../index-3eaca310.js');
+require('../stringSet-c3a71383.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MentionLabel.js

@@ -2,23 +2,23 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-44985c08.js');
+var ui_Label = require('../index-3eaca310.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-54dc5376.js');
-require('../index-ea4739fe.js');
+require('../uuid-d26cf806.js');
+require('../index-e1240d10.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
-require('../LocalizationContext-76831b0e.js');
-require('../index-c00c028b.js');
-require('../UserProfileContext-5fd27232.js');
+require('../stringSet-c3a71383.js');
+require('../LocalizationContext-0b79a552.js');
+require('../index-212106b0.js');
+require('../UserProfileContext-3dab87ec.js');
 require('../sendbirdSelectors.js');
-require('../topics-e1897e48.js');
-require('../utils-b653226e.js');
+require('../topics-92cc2ee6.js');
+require('../utils-29477573.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');

package/cjs/ui/MentionUserLabel.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var consts = require('../consts-c16c955d.js');
+var consts = require('../consts-4db00575.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MessageContent.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-2c208df7.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-0b87b048.js');
 var React = require('react');
-var index$1 = require('../index-b1b515a7.js');
+var index$1 = require('../index-124b9dcf.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-3aeb8bf9.js');
+var ui_MessageStatus = require('../index-2ac63760.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-44985c08.js');
+var ui_Label = require('../index-3eaca310.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -18,58 +18,58 @@ var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../index-ea4739fe.js');
-var UserProfileContext = require('../UserProfileContext-5fd27232.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
+var index = require('../index-e1240d10.js');
+var UserProfileContext = require('../UserProfileContext-3dab87ec.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-5432edbf.js');
-var index$2 = require('../index-6a9e8bcb.js');
-var MediaQueryContext = require('../MediaQueryContext-792b58f7.js');
+var useLongPress = require('../useLongPress-c8839caf.js');
+var index$2 = require('../index-69714a70.js');
+var MediaQueryContext = require('../MediaQueryContext-cd3c2c1f.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-0f73f007.js');
+var _const = require('../const-662e0a3d.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-var utils = require('../utils-b653226e.js');
-require('../index-c00c028b.js');
+var utils = require('../utils-29477573.js');
+require('../index-212106b0.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-54dc5376.js');
+require('../uuid-d26cf806.js');
 require('../sendbirdSelectors.js');
-require('../topics-e1897e48.js');
+require('../topics-92cc2ee6.js');
 require('./Button.js');
-require('../stringSet-39e8b84e.js');
+require('../stringSet-c3a71383.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-f3743012.js');
-require('../index-060711f6.js');
+require('../index-1ee0e4e4.js');
+require('../index-80804302.js');
 require('./IconButton.js');
-require('../types-be32f153.js');
+require('../types-2d9f4043.js');
 require('./ReactionButton.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./ReactionBadge.js');
 require('./BottomSheet.js');
-require('../index-71863abf.js');
+require('../index-caaa2927.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../tokenize-3176b8f2.js');
-require('../index-03a83f97.js');
-require('../index.module-bee98cc5.js');
+require('../tokenize-3d258c39.js');
+require('../index-ced384fa.js');
+require('../index.module-ed2ba1e3.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-5a40550e.js');
+require('../consts-0501e01f.js');
 require('./TextButton.js');
-require('../color-2a756176.js');
-require('../consts-c1c7f3b9.js');
+require('../color-9b5c1b44.js');
+require('../consts-122f358d.js');
 require('../withSendbird.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-6977efce.js');
-require('../consts-0a4f487c.js');
+require('../index-ab616622.js');
+require('../consts-661b767d.js');
 require('../VoiceRecorder/context.js');
 require('./Modal.js');
 require('./PlaybackTime.js');

package/cjs/ui/MessageInput.js

@@ -1,25 +1,25 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-2c208df7.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-0b87b048.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var _const$1 = require('../const-2d057dc1.js');
-var _const = require('../const-0f73f007.js');
+var _const$1 = require('../const-229638db.js');
+var _const = require('../const-662e0a3d.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
 var DOMPurify = require('dompurify');
-var consts = require('../consts-c16c955d.js');
+var consts = require('../consts-4db00575.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-44985c08.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
+var ui_Label = require('../index-3eaca310.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index = require('../index-ea4739fe.js');
-var consts$2 = require('../consts-5a40550e.js');
-var consts$1 = require('../consts-c1c7f3b9.js');
-var tokenize = require('../tokenize-3176b8f2.js');
-var index_module = require('../index.module-bee98cc5.js');
-require('../stringSet-39e8b84e.js');
-require('../index-c00c028b.js');
+var index = require('../index-e1240d10.js');
+var consts$2 = require('../consts-0501e01f.js');
+var consts$1 = require('../consts-122f358d.js');
+var tokenize = require('../tokenize-3d258c39.js');
+var index_module = require('../index.module-ed2ba1e3.js');
+require('../stringSet-c3a71383.js');
+require('../index-212106b0.js');
 require('../withSendbird.js');
 require('../utils/message/getOutgoingMessageState.js');
 

package/cjs/ui/MessageItemMenu.js

@@ -4,18 +4,18 @@ var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var index = require('../index-ea4739fe.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
-var types = require('../types-be32f153.js');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
+var index = require('../index-e1240d10.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
+var types = require('../types-2d9f4043.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-54dc5376.js');
-require('../index-44985c08.js');
+require('../uuid-d26cf806.js');
+require('../index-3eaca310.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
+require('../stringSet-c3a71383.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-c00c028b.js');
+require('../index-212106b0.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MessageItemReactionMenu.js

@@ -6,18 +6,18 @@ var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var index = require('../index-ea4739fe.js');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
+var index = require('../index-e1240d10.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-54dc5376.js');
-require('../index-44985c08.js');
+require('../uuid-d26cf806.js');
+require('../index-3eaca310.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
+require('../stringSet-c3a71383.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../useLongPress-5432edbf.js');
-require('../MediaQueryContext-792b58f7.js');
-require('../utils-b653226e.js');
+require('../useLongPress-c8839caf.js');
+require('../MediaQueryContext-cd3c2c1f.js');
+require('../utils-29477573.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -87,7 +87,7 @@ function MessageItemReactionMenu(_ref) {
             toggleReaction(message, emoji.key, isReacted);
           },
           dataSbId: `ui_emoji_reactions_menu_${emoji.key}`
-        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
           url: emoji.url,
           width: "28px",
           height: "28px",

package/cjs/ui/MessageItemReactionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItemReactionMenu.js","sources":["../../../src/ui/MessageItemReactionMenu/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ImageRenderer from '../ImageRenderer';\nimport ReactionButton from '../ReactionButton';\nimport { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';\nimport { SpaceFromTriggerType } from '../../types';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage | FileMessage;\n  userId: string;\n  spaceFromTrigger?: SpaceFromTriggerType;\n  emojiContainer?: EmojiContainer;\n  toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;\n  setSupposedHover?: (bool: boolean) => void;\n}\n\nexport default function MessageItemReactionMenu({\n  className,\n  message,\n  userId,\n  spaceFromTrigger = { x: 0, y: 0 },\n  emojiContainer,\n  toggleReaction,\n  setSupposedHover,\n}: Props): ReactElement {\n  const triggerRef = useRef(null);\n  const containerRef = useRef(null);\n\n  if (isPendingMessage(message) || isFailedMessage(message)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={getClassName([className, 'sendbird-message-item-reaction-menu'])}\n      ref={containerRef}\n    >\n      <ContextMenu\n        menuTrigger={(toggleDropdown: () => void): ReactElement => (\n          <IconButton\n            className=\"sendbird-message-item-reaction-menu__trigger\"\n            ref={triggerRef}\n            width=\"32px\"\n            height=\"32px\"\n            onClick={(): void => {\n              toggleDropdown();\n              setSupposedHover(true);\n            }}\n            onBlur={(): void => {\n              setSupposedHover(false);\n            }}\n          >\n            <Icon\n              className=\"sendbird-message-item-reaction-menu__trigger__icon\"\n              type={IconTypes.EMOJI_MORE}\n              fillColor={IconColors.CONTENT_INVERSE}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        )}\n        menuItems={(close: () => void): ReactElement => {\n          const closeDropdown = (): void => {\n            close();\n            setSupposedHover(false);\n          };\n          return (\n            <EmojiListItems\n              parentRef={triggerRef}\n              parentContainRef={containerRef}\n              closeDropdown={closeDropdown}\n              spaceFromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions\n                  ?.filter((reaction: Reaction) => reaction.key === emoji.key)[0]?.userIds\n                  ?.some((reactorId: string) => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={() => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                    }}\n                    dataSbId={`ui_emoji_reactions_menu_${emoji.key}`}\n                  >\n                    <ImageRenderer\n                      url={emoji.url}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style) => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          );\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["MessageItemReactionMenu","_ref","className","message","userId","spaceFromTrigger","x","y","emojiContainer","toggleReaction","setSupposedHover","triggerRef","useRef","containerRef","isPendingMessage","isFailedMessage","React","createElement","getClassName","ref","ContextMenu","menuTrigger","toggleDropdown","IconButton","width","height","onClick","onBlur","Icon","type","IconTypes","EMOJI_MORE","fillColor","IconColors","CONTENT_INVERSE","menuItems","close","closeDropdown","EmojiListItems","parentRef","parentContainRef","getEmojiListAll","map","emoji","_message$reactions","_message$reactions$fi","_message$reactions$fi2","isReacted","reactions","filter","reaction","key","userIds","some","reactorId","ReactionButton","selected","dataSbId","ImageRenderer","url","placeHolder","style","QUESTION","ON_BACKGROUND_3"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBe,SAASA,uBAAuBA,CAAAC,IAAA,EAQvB;EAAA,IARwB;IAC9CC,SAAS;IACTC,OAAO;IACPC,MAAM;AACNC,IAAAA,gBAAgB,GAAG;AAAEC,MAAAA,CAAC,EAAE,CAAC;AAAEC,MAAAA,CAAC,EAAE,CAAA;KAAG;IACjCC,cAAc;IACdC,cAAc;AACdC,IAAAA,gBAAAA;AACK,GAAC,GAAAT,IAAA,CAAA;AACN,EAAA,MAAMU,UAAU,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AAC/B,EAAA,MAAMC,YAAY,GAAGD,YAAM,CAAC,IAAI,CAAC,CAAA;EAEjC,IAAIE,sBAAgB,CAACX,OAAO,CAAC,IAAIY,qBAAe,CAACZ,OAAO,CAAC,EAAE;AACzD,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,oBACEa,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEf,SAAS,EAAEgB,kBAAY,CAAC,CAAChB,SAAS,EAAE,qCAAqC,CAAC,CAAE;AAC5EiB,IAAAA,GAAG,EAAEN,YAAAA;AAAa,GAAA,eAElBG,yBAAA,CAAAC,aAAA,CAACG,yBAAW,EAAA;AACVC,IAAAA,WAAW,EAAGC,cAA0B,iBACtCN,yBAAA,CAAAC,aAAA,CAACM,aAAU,EAAA;AACTrB,MAAAA,SAAS,EAAC,8CAA8C;AACxDiB,MAAAA,GAAG,EAAER,UAAW;AAChBa,MAAAA,KAAK,EAAC,MAAM;AACZC,MAAAA,MAAM,EAAC,MAAM;MACbC,OAAO,EAAEA,MAAY;AACnBJ,QAAAA,cAAc,EAAE,CAAA;QAChBZ,gBAAgB,CAAC,IAAI,CAAC,CAAA;OACtB;MACFiB,MAAM,EAAEA,MAAY;QAClBjB,gBAAgB,CAAC,KAAK,CAAC,CAAA;AACzB,OAAA;AAAE,KAAA,eAEFM,yBAAA,CAAAC,aAAA,CAACW,kBAAI,EAAA;AACH1B,MAAAA,SAAS,EAAC,oDAAoD;MAC9D2B,IAAI,EAAEC,iBAAS,CAACC,UAAW;MAC3BC,SAAS,EAAEC,kBAAU,CAACC,eAAgB;AACtCV,MAAAA,KAAK,EAAC,MAAM;AACZC,MAAAA,MAAM,EAAC,MAAA;AAAM,KAAA,CACb,CAEJ;IACFU,SAAS,EAAGC,KAAiB,IAAmB;MAC9C,MAAMC,aAAa,GAAGA,MAAY;AAChCD,QAAAA,KAAK,EAAE,CAAA;QACP1B,gBAAgB,CAAC,KAAK,CAAC,CAAA;OACxB,CAAA;AACD,MAAA,oBACEM,yBAAA,CAAAC,aAAA,CAACqB,6BAAc,EAAA;AACbC,QAAAA,SAAS,EAAE5B,UAAW;AACtB6B,QAAAA,gBAAgB,EAAE3B,YAAa;AAC/BwB,QAAAA,aAAa,EAAEA,aAAc;AAC7BhC,QAAAA,gBAAgB,EAAEA,gBAAAA;OAEjBoC,EAAAA,qBAAe,CAACjC,cAAc,CAAC,CAACkC,GAAG,CAAEC,KAAY,IAAmB;AAAA,QAAA,IAAAC,kBAAA,EAAAC,qBAAA,EAAAC,sBAAA,CAAA;QACnE,MAAMC,SAAkB,GAAG5C,OAAO,KAAPA,IAAAA,IAAAA,OAAO,wBAAAyC,kBAAA,GAAPzC,OAAO,CAAE6C,SAAS,MAAA,IAAA,IAAAJ,kBAAA,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,qBAAA,GAAlBD,kBAAA,CACvBK,MAAM,CAAEC,QAAkB,IAAKA,QAAQ,CAACC,GAAG,KAAKR,KAAK,CAACQ,GAAG,CAAC,CAAC,CAAC,CAAC,cAAAN,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAC,sBAAA,GADtCD,qBAAA,CACwCO,OAAO,MAAAN,IAAAA,IAAAA,sBAAA,KAD/CA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,sBAAA,CAEvBO,IAAI,CAAEC,SAAiB,IAAKA,SAAS,KAAKlD,MAAM,CAAC,CAAA;AACrD,QAAA,oBACEY,yBAAA,CAAAC,aAAA,CAACsC,iBAAc,EAAA;UACbJ,GAAG,EAAER,KAAK,CAACQ,GAAI;AACf3B,UAAAA,KAAK,EAAC,MAAM;AACZC,UAAAA,MAAM,EAAC,MAAM;AACb+B,UAAAA,QAAQ,EAAET,SAAU;UACpBrB,OAAO,EAAEA,MAAM;AACbW,YAAAA,aAAa,EAAE,CAAA;YACf5B,cAAc,CAACN,OAAO,EAAEwC,KAAK,CAACQ,GAAG,EAAEJ,SAAS,CAAC,CAAA;WAC7C;AACFU,UAAAA,QAAQ,EAAG,CAAA,wBAAA,EAA0Bd,KAAK,CAACQ,GAAI,CAAA,CAAA;AAAE,SAAA,eAEjDnC,yBAAA,CAAAC,aAAA,CAACyC,gBAAa,EAAA;UACZC,GAAG,EAAEhB,KAAK,CAACgB,GAAI;AACfnC,UAAAA,KAAK,EAAC,MAAM;AACZC,UAAAA,MAAM,EAAC,MAAM;AACbmC,UAAAA,WAAW,EAAGC,KAAK,iBACjB7C,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAK4C,YAAAA,KAAK,EAAEA,KAAAA;AAAM,WAAA,eAChB7C,yBAAA,CAAAC,aAAA,CAACW,kBAAI,EAAA;YACHC,IAAI,EAAEC,iBAAS,CAACgC,QAAS;YACzB9B,SAAS,EAAEC,kBAAU,CAAC8B,eAAgB;AACtCvC,YAAAA,KAAK,EAAC,MAAM;AACZC,YAAAA,MAAM,EAAC,MAAA;WACP,CAAA,CAAA;AAEJ,SAAA,CACF,CACa,CAAA;AAErB,OAAC,CAAC,CACa,CAAA;AAErB,KAAA;AAAE,GAAA,CACF,CACE,CAAA;AAEV;;;;"}
+{"version":3,"file":"MessageItemReactionMenu.js","sources":["../../../src/ui/MessageItemReactionMenu/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport IconButton from '../IconButton';\nimport ImageRenderer from '../ImageRenderer';\nimport ReactionButton from '../ReactionButton';\nimport { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';\nimport { SpaceFromTriggerType } from '../../types';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage | FileMessage;\n  userId: string;\n  spaceFromTrigger?: SpaceFromTriggerType;\n  emojiContainer?: EmojiContainer;\n  toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;\n  setSupposedHover?: (bool: boolean) => void;\n}\n\nexport default function MessageItemReactionMenu({\n  className,\n  message,\n  userId,\n  spaceFromTrigger = { x: 0, y: 0 },\n  emojiContainer,\n  toggleReaction,\n  setSupposedHover,\n}: Props): ReactElement {\n  const triggerRef = useRef(null);\n  const containerRef = useRef(null);\n\n  if (isPendingMessage(message) || isFailedMessage(message)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={getClassName([className, 'sendbird-message-item-reaction-menu'])}\n      ref={containerRef}\n    >\n      <ContextMenu\n        menuTrigger={(toggleDropdown: () => void): ReactElement => (\n          <IconButton\n            className=\"sendbird-message-item-reaction-menu__trigger\"\n            ref={triggerRef}\n            width=\"32px\"\n            height=\"32px\"\n            onClick={(): void => {\n              toggleDropdown();\n              setSupposedHover(true);\n            }}\n            onBlur={(): void => {\n              setSupposedHover(false);\n            }}\n          >\n            <Icon\n              className=\"sendbird-message-item-reaction-menu__trigger__icon\"\n              type={IconTypes.EMOJI_MORE}\n              fillColor={IconColors.CONTENT_INVERSE}\n              width=\"24px\"\n              height=\"24px\"\n            />\n          </IconButton>\n        )}\n        menuItems={(close: () => void): ReactElement => {\n          const closeDropdown = (): void => {\n            close();\n            setSupposedHover(false);\n          };\n          return (\n            <EmojiListItems\n              parentRef={triggerRef}\n              parentContainRef={containerRef}\n              closeDropdown={closeDropdown}\n              spaceFromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions\n                  ?.filter((reaction: Reaction) => reaction.key === emoji.key)[0]?.userIds\n                  ?.some((reactorId: string) => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={() => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                    }}\n                    dataSbId={`ui_emoji_reactions_menu_${emoji.key}`}\n                  >\n                    <ImageRenderer\n                      url={emoji.url}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style) => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          );\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["MessageItemReactionMenu","_ref","className","message","userId","spaceFromTrigger","x","y","emojiContainer","toggleReaction","setSupposedHover","triggerRef","useRef","containerRef","isPendingMessage","isFailedMessage","React","createElement","getClassName","ref","ContextMenu","menuTrigger","toggleDropdown","IconButton","width","height","onClick","onBlur","Icon","type","IconTypes","EMOJI_MORE","fillColor","IconColors","CONTENT_INVERSE","menuItems","close","closeDropdown","EmojiListItems","parentRef","parentContainRef","getEmojiListAll","map","emoji","_message$reactions","_message$reactions$fi","_message$reactions$fi2","isReacted","reactions","filter","reaction","key","userIds","some","reactorId","ReactionButton","selected","dataSbId","ImageRenderer","url","placeHolder","style","QUESTION","ON_BACKGROUND_3"],"mappings":"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"}

package/cjs/ui/MessageSearchFileItem.js

@@ -3,18 +3,18 @@
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-44985c08.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
-var index$1 = require('../index-b1b515a7.js');
-var index = require('../index-f3743012.js');
-var index$2 = require('../index-ea4739fe.js');
+var ui_Label = require('../index-3eaca310.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
+var index$1 = require('../index-124b9dcf.js');
+var index = require('../index-1ee0e4e4.js');
+var index$2 = require('../index-e1240d10.js');
 require('./ImageRenderer.js');
-require('../uuid-54dc5376.js');
+require('../uuid-d26cf806.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
-require('../index-c00c028b.js');
-require('../index-060711f6.js');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
+require('../stringSet-c3a71383.js');
+require('../index-212106b0.js');
+require('../index-80804302.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/MessageSearchItem.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('../index-b1b515a7.js');
-var index = require('../index-f3743012.js');
+var index$1 = require('../index-124b9dcf.js');
+var index = require('../index-1ee0e4e4.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-44985c08.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
-require('../index-c00c028b.js');
-require('../index-060711f6.js');
+var ui_Label = require('../index-3eaca310.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
+require('../index-212106b0.js');
+require('../index-80804302.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-54dc5376.js');
-require('../stringSet-39e8b84e.js');
+require('../uuid-d26cf806.js');
+require('../stringSet-c3a71383.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MessageStatus.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
-require('../index-b1b515a7.js');
+require('../index-124b9dcf.js');
 require('./Icon.js');
-require('../index-44985c08.js');
+require('../index-3eaca310.js');
 require('./Loader.js');
-require('../index-ea4739fe.js');
+require('../index-e1240d10.js');
 require('../utils/message/getOutgoingMessageState.js');
-var ui_MessageStatus = require('../index-3aeb8bf9.js');
-require('../LocalizationContext-76831b0e.js');
-require('../index-c00c028b.js');
+var ui_MessageStatus = require('../index-2ac63760.js');
+require('../LocalizationContext-0b79a552.js');
+require('../index-212106b0.js');
 require('prop-types');
-require('../stringSet-39e8b84e.js');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
-require('../index-f3743012.js');
-require('../index-060711f6.js');
+require('../stringSet-c3a71383.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
+require('../index-1ee0e4e4.js');
+require('../index-80804302.js');
 
 
 

package/cjs/ui/Modal.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var index = require('../index-71863abf.js');
-var LocalizationContext = require('../LocalizationContext-76831b0e.js');
+var index = require('../index-caaa2927.js');
+var LocalizationContext = require('../LocalizationContext-0b79a552.js');
 var ui_Button = require('./Button.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../index-44985c08.js');
-var MediaQueryContext = require('../MediaQueryContext-792b58f7.js');
-require('../stringSet-39e8b84e.js');
-require('../index-c00c028b.js');
+var ui_Label = require('../index-3eaca310.js');
+var MediaQueryContext = require('../MediaQueryContext-cd3c2c1f.js');
+require('../stringSet-c3a71383.js');
+require('../index-212106b0.js');
 require('prop-types');
-require('../_rollupPluginBabelHelpers-2c208df7.js');
+require('../_rollupPluginBabelHelpers-0b87b048.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }