@sendbird/uikit-react 3.4.8 → 3.5.0-mobile-web-0

package/cjs/ui/ReactionBadge.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-44186883.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
+require('../stringSet-d1cee26a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/ReactionButton.js

@@ -1,6 +1,10 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-919a4db3.js');
 var React = require('react');
+var useLongPress = require('../useLongPress-4c2e9a3b.js');
+var utils = require('../utils-3dacb9bc.js');
+require('../MediaQueryContext-de7c63bc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,24 +19,24 @@ const ReactionButton = /*#__PURE__*/React__default["default"].forwardRef((props,
     onClick,
     children
   } = props;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  const onClickHandler = useLongPress.useLongPress({
+    onLongPress: utils.noop,
+    onClick
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: [...(Array.isArray(className) ? className : [className]), `sendbird-reaction-button${selected ? '--selected' : ''}`].join(' '),
     ref: ref,
     role: "button",
     style: {
       width,
       height
-    },
-    onClick: e => onClick(e),
-    onKeyDown: e => onClick(e),
-    onTouchEnd: e => {
-      onClick(e);
-      // to stop longpress
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    },
+    }
+  }, onClickHandler, {
     tabIndex: 0
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-reaction-button__inner"
   }, children));
 });

package/cjs/ui/ReactionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.js","sources":["../../../src/ui/ReactionButton/index.tsx"],"sourcesContent":["import React, {\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  RefObject,\n  TouchEvent,\n} from 'react';\n\nimport './index.scss';\n\nexport interface ReactionButtonProps {\n  children: ReactElement;\n  className?: string | Array<string>;\n  width?: string | number;\n  height?: string | number;\n  selected?: boolean;\n  onClick?: (\n    e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>\n  ) => void;\n}\nconst ReactionButton = React.forwardRef((props: ReactionButtonProps, ref: RefObject<HTMLDivElement>): ReactElement => {\n  const {\n    className,\n    width,\n    height,\n    selected,\n    onClick,\n    children,\n  } = props;\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        `sendbird-reaction-button${selected ? '--selected' : ''}`,\n      ].join(' ')}\n      ref={ref}\n      role=\"button\"\n      style={{ width, height }}\n      onClick={(e) => onClick(e)}\n      onKeyDown={(e) => onClick(e)}\n      onTouchEnd={(e) => {\n        onClick(e);\n        // to stop longpress\n        e.stopPropagation();\n        e.nativeEvent.stopImmediatePropagation();\n      }}\n      tabIndex={0}\n    >\n      <div className=\"sendbird-reaction-button__inner\">\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport default ReactionButton;\n"],"names":["ReactionButton","React","forwardRef","props","ref","className","width","height","selected","onClick","children","createElement","Array","isArray","join","role","style","e","onKeyDown","onTouchEnd","stopPropagation","nativeEvent","stopImmediatePropagation","tabIndex"],"mappings":";;;;;;;;AAoBMA,MAAAA,cAAc,gBAAGC,yBAAK,CAACC,UAAU,CAAC,CAACC,KAA0B,EAAEC,GAA8B,KAAmB;EACpH,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACPC,IAAAA,QAAAA;AACF,GAAC,GAAGP,KAAK,CAAA;EAET,oBACEF,yBAAA,CAAAU,aAAA,CAAA,KAAA,EAAA;AACEN,IAAAA,SAAS,EAAE,CACT,IAAIO,KAAK,CAACC,OAAO,CAACR,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACtD,CAAA,wBAAA,EAA0BG,QAAQ,GAAG,YAAY,GAAG,EAAG,CAAA,CAAC,CAC1D,CAACM,IAAI,CAAC,GAAG,CAAE;AACZV,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,KAAK,EAAE;MAAEV,KAAK;AAAEC,MAAAA,MAAAA;KAAS;AACzBE,IAAAA,OAAO,EAAGQ,CAAC,IAAKR,OAAO,CAACQ,CAAC,CAAE;AAC3BC,IAAAA,SAAS,EAAGD,CAAC,IAAKR,OAAO,CAACQ,CAAC,CAAE;IAC7BE,UAAU,EAAGF,CAAC,IAAK;MACjBR,OAAO,CAACQ,CAAC,CAAC,CAAA;AACV;MACAA,CAAC,CAACG,eAAe,EAAE,CAAA;AACnBH,MAAAA,CAAC,CAACI,WAAW,CAACC,wBAAwB,EAAE,CAAA;KACxC;AACFC,IAAAA,QAAQ,EAAE,CAAA;GAEVtB,eAAAA,yBAAA,CAAAU,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAC,iCAAA;GACZK,EAAAA,QAAQ,CACL,CACF,CAAA;AAEV,CAAC;;;;"}
+{"version":3,"file":"ReactionButton.js","sources":["../../../src/ui/ReactionButton/index.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  TouchEvent,\n} from 'react';\n\nimport './index.scss';\nimport useLongPress from '../../hooks/useLongPress';\nimport { noop } from '../../utils/utils';\n\nexport interface ReactionButtonProps {\n  children: ReactElement;\n  className?: string | Array<string>;\n  width?: string | number;\n  height?: string | number;\n  selected?: boolean;\n  onClick?: (\n    e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>\n  ) => void;\n}\n\nconst ReactionButton = React.forwardRef((props: ReactionButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    width,\n    height,\n    selected,\n    onClick,\n    children,\n  } = props;\n\n  const onClickHandler = useLongPress({\n    onLongPress: noop,\n    onClick,\n  }, {\n    shouldPreventDefault: true,\n    shouldStopPropagation: true,\n  });\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        `sendbird-reaction-button${selected ? '--selected' : ''}`,\n      ].join(' ')}\n      ref={ref}\n      role=\"button\"\n      style={{ width, height }}\n      {...onClickHandler}\n      tabIndex={0}\n    >\n      <div className=\"sendbird-reaction-button__inner\">\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport default ReactionButton;\n"],"names":["ReactionButton","React","forwardRef","props","ref","className","width","height","selected","onClick","children","onClickHandler","useLongPress","onLongPress","noop","shouldPreventDefault","shouldStopPropagation","createElement","_extends","Array","isArray","join","role","style","tabIndex"],"mappings":";;;;;;;;;;;;AAuBMA,MAAAA,cAAc,gBAAGC,yBAAK,CAACC,UAAU,CAAC,CAACC,KAA0B,EAAEC,GAAiC,KAAK;EACzG,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,OAAO;AACPC,IAAAA,QAAAA;AACF,GAAC,GAAGP,KAAK,CAAA;EAET,MAAMQ,cAAc,GAAGC,yBAAY,CAAC;AAClCC,IAAAA,WAAW,EAAEC,UAAI;AACjBL,IAAAA,OAAAA;AACF,GAAC,EAAE;AACDM,IAAAA,oBAAoB,EAAE,IAAI;AAC1BC,IAAAA,qBAAqB,EAAE,IAAA;AACzB,GAAC,CAAC,CAAA;AAEF,EAAA,oBACEf,yBAAA,CAAAgB,aAAA,CAAA,KAAA,EAAAC,kCAAA,CAAA;AACEb,IAAAA,SAAS,EAAE,CACT,IAAIc,KAAK,CAACC,OAAO,CAACf,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACtD,CAAA,wBAAA,EAA0BG,QAAQ,GAAG,YAAY,GAAG,EAAG,CAAA,CAAC,CAC1D,CAACa,IAAI,CAAC,GAAG,CAAE;AACZjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,KAAK,EAAE;MAAEjB,KAAK;AAAEC,MAAAA,MAAAA;AAAO,KAAA;AAAE,GAAA,EACrBI,cAAc,EAAA;AAClBa,IAAAA,QAAQ,EAAE,CAAA;GAEVvB,CAAAA,eAAAA,yBAAA,CAAAgB,aAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,SAAS,EAAC,iCAAA;GACZK,EAAAA,QAAQ,CACL,CACF,CAAA;AAEV,CAAC;;;;"}

package/cjs/ui/SortByRow.js

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

package/cjs/ui/TextButton.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var color = require('../color-83cbca20.js');
+var color = require('../color-48ff06b2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/TextMessageItemBody.js

@@ -1,29 +1,29 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-22bdf04e.js');
-var index = require('../index-265937df.js');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
-var tokenize = require('../tokenize-1441f448.js');
-var index$1 = require('../index-61c3208b.js');
-var consts = require('../consts-aaf1208c.js');
+var ui_Label = require('../index-44186883.js');
+var index = require('../index-bca3d144.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+var tokenize = require('../tokenize-d3bb1637.js');
+var index$1 = require('../index-f4682499.js');
+var consts = require('../consts-2580246d.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+require('../stringSet-d1cee26a.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-47e4bdbc.js');
-require('../index.module-3e7701ca.js');
+require('../index-5e6194f8.js');
+require('../index.module-10ef9afc.js');
 require('../Message/context.js');
 require('./MentionLabel.js');
 require('./ContextMenu.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-c854e2a9.js');
+require('../uuid-d86ea01f.js');
 require('./UserProfile.js');
-require('../UserProfileContext-83eaf6e8.js');
+require('../UserProfileContext-1bcc48a2.js');
 require('../sendbirdSelectors.js');
-require('../topics-0df2f6f9.js');
-require('../utils-a1fead2f.js');
+require('../topics-00c67dd6.js');
+require('../utils-3dacb9bc.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');

package/cjs/ui/ThreadReplies.js

@@ -3,13 +3,13 @@
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-22bdf04e.js');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
-var uuid = require('../uuid-c854e2a9.js');
+var ui_Label = require('../index-44186883.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+var uuid = require('../uuid-d86ea01f.js');
 require('./ImageRenderer.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../index-47e4bdbc.js');
+require('../stringSet-d1cee26a.js');
+require('../index-5e6194f8.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/ThumbnailMessageItemBody.js

@@ -1,26 +1,29 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-919a4db3.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var index = require('../index-265937df.js');
+var index = require('../index-bca3d144.js');
+var utils = require('../utils-3dacb9bc.js');
+var useLongPress = require('../useLongPress-4c2e9a3b.js');
 require('prop-types');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
 require('../utils/message/getOutgoingMessageState.js');
+require('../MediaQueryContext-de7c63bc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ThumbnailMessageItemBody(_ref) {
-  var _thumbnails$, _message$reactions;
+  var _thumbnails$, _message$reactions$le, _message$reactions;
   let {
-    className,
+    className = '',
     message,
     isByMe = false,
     mouseHover = false,
     isReactionEnabled = false,
-    showFileViewer,
+    showFileViewer = utils.noop,
     style = {}
   } = _ref;
   const {
@@ -28,14 +31,17 @@ function ThumbnailMessageItemBody(_ref) {
   } = message;
   const thumbnailUrl = thumbnails.length > 0 ? (_thumbnails$ = thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
   const [imageRendered, setImageRendered] = React.useState(false);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 ? 'reactions' : '']),
+  const onClickHandler = useLongPress.useLongPress({
+    onLongPress: utils.noop,
     onClick: () => {
       if (index.isSentMessage(message)) {
-        showFileViewer(true);
+        showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+    className: index.getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) > 0 ? 'reactions' : ''])
+  }, onClickHandler), /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
     className: "sendbird-thumbnail-message-item-body__thumbnail",
     url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url),
     alt: message === null || message === void 0 ? void 0 : message.type,

package/cjs/ui/ThumbnailMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailMessageItemBody.js","sources":["../../../src/ui/ThumbnailMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useState } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ImageRenderer from '../ImageRenderer';\nimport { getClassName, isGifMessage, isSentMessage, isVideoMessage } from '../../utils';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  showFileViewer?: (bool: boolean) => void;\n  style?: Record<string, any>;\n}\n\nexport default function ThumbnailMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  showFileViewer,\n  style = {},\n}: Props): ReactElement {\n  const { thumbnails = [] } = message;\n  const thumbnailUrl: string = thumbnails.length > 0 ? thumbnails[0]?.url : '';\n  const [imageRendered, setImageRendered] = useState(false);\n  return (\n    <div\n      className={getClassName([\n        className,\n        'sendbird-thumbnail-message-item-body',\n        isByMe ? 'outgoing' : 'incoming',\n        mouseHover ? 'mouse-hover' : '',\n        (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n      ])}\n      onClick={() => {\n        if (isSentMessage(message)) {\n          showFileViewer(true);\n        }\n      }}\n    >\n      <ImageRenderer\n        className=\"sendbird-thumbnail-message-item-body__thumbnail\"\n        url={thumbnailUrl || message?.url}\n        alt={message?.type}\n        width={style?.width || '360px'}\n        height={style?.height || '270px'}\n        onLoad={() => { setImageRendered(true); }}\n        placeHolder={(style_: Record<string, any>) => (\n          <div\n            className=\"sendbird-thumbnail-message-item-body__placeholder\"\n            style={style_}\n          >\n            <div className=\"sendbird-thumbnail-message-item-body__placeholder__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO}\n                fillColor={IconColors.ON_BACKGROUND_2}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )}\n      />\n      {\n        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (\n          <video className=\"sendbird-thumbnail-message-item-body__video\">\n            <source src={message?.url} type={message?.type} />\n          </video>\n        )\n      }\n      <div className=\"sendbird-thumbnail-message-item-body__image-cover\" />\n      {\n        (isVideoMessage(message) || isGifMessage(message)) && (\n          <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper\">\n            <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF}\n                fillColor={IconColors.GRAY}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThumbnailMessageItemBody","_ref","_thumbnails$","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","showFileViewer","style","thumbnails","thumbnailUrl","length","url","imageRendered","setImageRendered","useState","React","createElement","getClassName","reactions","onClick","isSentMessage","ImageRenderer","alt","type","width","height","onLoad","placeHolder","style_","Icon","isVideoMessage","IconTypes","PLAY","PHOTO","fillColor","IconColors","ON_BACKGROUND_2","src","isGifMessage","GIF","GRAY"],"mappings":"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"}
+{"version":3,"file":"ThumbnailMessageItemBody.js","sources":["../../../src/ui/ThumbnailMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useState } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ImageRenderer from '../ImageRenderer';\nimport { getClassName, isGifMessage, isSentMessage, isVideoMessage } from '../../utils';\nimport { noop } from '../../utils/utils';\nimport useLongPress from '../../hooks/useLongPress';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  showFileViewer?: (bool: boolean) => void;\n  style?: Record<string, any>;\n}\n\nexport default function ThumbnailMessageItemBody({\n  className = '',\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  showFileViewer = noop,\n  style = {},\n}: Props): ReactElement {\n  const { thumbnails = [] } = message;\n  const thumbnailUrl: string = thumbnails.length > 0 ? thumbnails[0]?.url : '';\n  const [imageRendered, setImageRendered] = useState(false);\n\n  const onClickHandler = useLongPress({\n    onLongPress: noop,\n    onClick: () => {\n      if (isSentMessage(message)) {\n        showFileViewer?.(true);\n      }\n    },\n  });\n\n  return (\n    <div\n      className={getClassName([\n        className,\n        'sendbird-thumbnail-message-item-body',\n        isByMe ? 'outgoing' : 'incoming',\n        mouseHover ? 'mouse-hover' : '',\n        (isReactionEnabled && (message.reactions?.length ?? 0) > 0) ? 'reactions' : '',\n      ])}\n      {...onClickHandler}\n    >\n      <ImageRenderer\n        className=\"sendbird-thumbnail-message-item-body__thumbnail\"\n        url={thumbnailUrl || message?.url}\n        alt={message?.type}\n        width={style?.width || '360px'}\n        height={style?.height || '270px'}\n        onLoad={() => { setImageRendered(true); }}\n        placeHolder={(style_: Record<string, any>) => (\n          <div\n            className=\"sendbird-thumbnail-message-item-body__placeholder\"\n            style={style_}\n          >\n            <div className=\"sendbird-thumbnail-message-item-body__placeholder__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO}\n                fillColor={IconColors.ON_BACKGROUND_2}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )}\n      />\n      {\n        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (\n          <video className=\"sendbird-thumbnail-message-item-body__video\">\n            <source src={message?.url} type={message?.type} />\n          </video>\n        )\n      }\n      <div className=\"sendbird-thumbnail-message-item-body__image-cover\" />\n      {\n        (isVideoMessage(message) || isGifMessage(message)) && (\n          <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper\">\n            <div className=\"sendbird-thumbnail-message-item-body__icon-wrapper__icon\">\n              <Icon\n                type={isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF}\n                fillColor={IconColors.GRAY}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThumbnailMessageItemBody","_ref","_thumbnails$","_message$reactions$le","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","showFileViewer","noop","style","thumbnails","thumbnailUrl","length","url","imageRendered","setImageRendered","useState","onClickHandler","useLongPress","onLongPress","onClick","isSentMessage","React","createElement","_extends","getClassName","reactions","ImageRenderer","alt","type","width","height","onLoad","placeHolder","style_","Icon","isVideoMessage","IconTypes","PLAY","PHOTO","fillColor","IconColors","ON_BACKGROUND_2","src","isGifMessage","GIF","GRAY"],"mappings":"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"}

package/cjs/ui/Toggle.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-919a4db3.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 

package/cjs/ui/Tooltip.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-44186883.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
+require('../stringSet-d1cee26a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/UnknownMessageItemBody.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-22bdf04e.js');
-var index = require('../index-265937df.js');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
+var ui_Label = require('../index-44186883.js');
+var index = require('../index-bca3d144.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+require('../stringSet-d1cee26a.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-47e4bdbc.js');
+require('../index-5e6194f8.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/UserListItem.js

@@ -1,30 +1,30 @@
 'use strict';
 
 var React = require('react');
-var UserProfileContext = require('../UserProfileContext-83eaf6e8.js');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
+var UserProfileContext = require('../UserProfileContext-1bcc48a2.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_MutedAvatarOverlay = require('./MutedAvatarOverlay.js');
 var ui_Checkbox = require('./Checkbox.js');
 var ui_UserProfile = require('./UserProfile.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-44186883.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../index-47e4bdbc.js');
+require('../stringSet-d1cee26a.js');
+require('../index-5e6194f8.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('../uuid-c854e2a9.js');
+require('../uuid-d86ea01f.js');
 require('../sendbirdSelectors.js');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
-require('../topics-0df2f6f9.js');
-require('../utils-a1fead2f.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
+require('../topics-00c67dd6.js');
+require('../utils-3dacb9bc.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-265937df.js');
+require('../index-bca3d144.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +42,8 @@ function UserListItem(_ref) {
     disableMessaging,
     currentUser,
     action,
-    onChange
+    onChange,
+    avatarSize = '40px'
   } = _ref;
   const uniqueKey = user.userId;
   const actionRef = React__default["default"].useRef(null);
@@ -66,8 +67,8 @@ function UserListItem(_ref) {
       className: "sendbird-user-list-item__avatar",
       ref: avatarRef,
       src: user.profileUrl,
-      width: "40px",
-      height: "40px",
+      width: avatarSize,
+      height: avatarSize,
       onClick: () => {
         if (!disableUserProfile) {
           toggleDropdown();

package/cjs/ui/UserListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserListItem.js","sources":["../../../src/ui/UserListItem/index.tsx"],"sourcesContent":["import React, { ChangeEvent, MutableRefObject, ReactElement, useContext } from 'react';\nimport { User } from '@sendbird/chat';\nimport { Member } from '@sendbird/chat/groupChannel';\nimport './index.scss';\n\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Avatar from '../Avatar/index';\nimport MutedAvatarOverlay from '../Avatar/MutedAvatarOverlay';\nimport Checkbox from '../Checkbox';\nimport UserProfile from '../UserProfile';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface UserListItemProps {\n  user: User;\n  className?: string;\n  checked?: boolean;\n  checkBox?: boolean;\n  isOperator?: boolean;\n  disabled?: boolean;\n  disableMessaging?: boolean;\n  currentUser?: string;\n  action?({ actionRef, parentRef }: {\n    actionRef: MutableRefObject<any>,\n    parentRef?: MutableRefObject<any>,\n  }): ReactElement;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport default function UserListItem({\n  user,\n  className,\n  checked,\n  checkBox,\n  isOperator,\n  disabled,\n  disableMessaging,\n  currentUser,\n  action,\n  onChange,\n}: UserListItemProps): ReactElement {\n  const uniqueKey = user.userId;\n  const actionRef = React.useRef(null);\n  const parentRef = React.useRef(null);\n  const avatarRef = React.useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-user-list-item',\n      ].join(' ')}\n      ref={parentRef}\n    >\n      {\n        (user as Member)?.isMuted && (\n          <MutedAvatarOverlay height={40} width={40} />\n        )\n      }\n      <ContextMenu\n        menuTrigger={(toggleDropdown) => (\n          <Avatar\n            className=\"sendbird-user-list-item__avatar\"\n            ref={avatarRef}\n            src={user.profileUrl}\n            width=\"40px\"\n            height=\"40px\"\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\n              }\n            }}\n          />\n        )}\n        menuItems={(closeDropdown) => (\n          <MenuItems\n            openLeft\n            parentRef={avatarRef}\n            // for catching location(x, y) of MenuItems\n            parentContainRef={avatarRef}\n            // for toggling more options(menus & reactions)\n            closeDropdown={closeDropdown}\n            style={{ paddingTop: '0px', paddingBottom: '0px' }}\n          >\n            {\n              renderUserProfile\n                ? renderUserProfile({\n                  user,\n                  currentUserId: currentUser,\n                  close: closeDropdown,\n                })\n                : (\n                  <UserProfile\n                    disableMessaging={disableMessaging}\n                    user={user}\n                    currentUserId={currentUser}\n                    onSuccess={closeDropdown}\n                  />\n                )\n            }\n          </MenuItems>\n        )}\n      />\n      <Label\n        className=\"sendbird-user-list-item__title\"\n        type={LabelTypography.SUBTITLE_1}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {user.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === user.userId) && (\n            ' (You)'\n          )\n        }\n      </Label>\n      { // if there is now nickname, display userId\n        !user.nickname && (\n          <Label\n            className=\"sendbird-user-list-item__subtitle\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {user.userId}\n          </Label>\n        )\n      }\n      {\n        checkBox && (\n          <label\n            className=\"sendbird-user-list-item__checkbox\"\n            htmlFor={uniqueKey}\n          >\n            <Checkbox\n              id={uniqueKey}\n              checked={checked}\n              disabled={disabled}\n              onChange={(event) => onChange(event)}\n            />\n          </label>\n        )\n      }\n      {\n        isOperator && (\n          <Label\n            className={[\n              'sendbird-user-list-item__operator',\n              checkBox ? 'checkbox' : '',\n            ].join(' ')}\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            Operator\n          </Label>\n        )\n      }\n      {\n        action && (\n          <div\n            className=\"sendbird-user-list-item__action\"\n            ref={actionRef}\n          >\n            {action({ actionRef, parentRef })}\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["UserListItem","_ref","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","disableUserProfile","renderUserProfile","useContext","UserProfileContext","stringSet","LocalizationContext","createElement","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","onClick","menuItems","closeDropdown","MenuItems","openLeft","parentContainRef","style","paddingTop","paddingBottom","currentUserId","close","UserProfile","onSuccess","Label","type","LabelTypography","SUBTITLE_1","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","htmlFor","Checkbox","id","event","SUBTITLE_2"],"mappings":"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"}
+{"version":3,"file":"UserListItem.js","sources":["../../../src/ui/UserListItem/index.tsx"],"sourcesContent":["import React, { ChangeEvent, MutableRefObject, ReactElement, useContext } from 'react';\nimport { User } from '@sendbird/chat';\nimport { Member } from '@sendbird/chat/groupChannel';\nimport './index.scss';\n\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Avatar from '../Avatar/index';\nimport MutedAvatarOverlay from '../Avatar/MutedAvatarOverlay';\nimport Checkbox from '../Checkbox';\nimport UserProfile from '../UserProfile';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface UserListItemProps {\n  user: User;\n  className?: string;\n  checked?: boolean;\n  checkBox?: boolean;\n  isOperator?: boolean;\n  disabled?: boolean;\n  disableMessaging?: boolean;\n  currentUser?: string;\n  action?({ actionRef, parentRef }: {\n    actionRef: MutableRefObject<any>,\n    parentRef?: MutableRefObject<any>,\n  }): ReactElement;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n  avatarSize?: string;\n}\n\nexport default function UserListItem({\n  user,\n  className,\n  checked,\n  checkBox,\n  isOperator,\n  disabled,\n  disableMessaging,\n  currentUser,\n  action,\n  onChange,\n  avatarSize = '40px',\n}: UserListItemProps): ReactElement {\n  const uniqueKey = user.userId;\n  const actionRef = React.useRef(null);\n  const parentRef = React.useRef(null);\n  const avatarRef = React.useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-user-list-item',\n      ].join(' ')}\n      ref={parentRef}\n    >\n      {\n        (user as Member)?.isMuted && (\n          <MutedAvatarOverlay height={40} width={40} />\n        )\n      }\n      <ContextMenu\n        menuTrigger={(toggleDropdown) => (\n          <Avatar\n            className=\"sendbird-user-list-item__avatar\"\n            ref={avatarRef}\n            src={user.profileUrl}\n            width={avatarSize}\n            height={avatarSize}\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\n              }\n            }}\n          />\n        )}\n        menuItems={(closeDropdown) => (\n          <MenuItems\n            openLeft\n            parentRef={avatarRef}\n            // for catching location(x, y) of MenuItems\n            parentContainRef={avatarRef}\n            // for toggling more options(menus & reactions)\n            closeDropdown={closeDropdown}\n            style={{ paddingTop: '0px', paddingBottom: '0px' }}\n          >\n            {\n              renderUserProfile\n                ? renderUserProfile({\n                  user,\n                  currentUserId: currentUser,\n                  close: closeDropdown,\n                })\n                : (\n                  <UserProfile\n                    disableMessaging={disableMessaging}\n                    user={user}\n                    currentUserId={currentUser}\n                    onSuccess={closeDropdown}\n                  />\n                )\n            }\n          </MenuItems>\n        )}\n      />\n      <Label\n        className=\"sendbird-user-list-item__title\"\n        type={LabelTypography.SUBTITLE_1}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {user.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === user.userId) && (\n            ' (You)'\n          )\n        }\n      </Label>\n      { // if there is now nickname, display userId\n        !user.nickname && (\n          <Label\n            className=\"sendbird-user-list-item__subtitle\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {user.userId}\n          </Label>\n        )\n      }\n      {\n        checkBox && (\n          <label\n            className=\"sendbird-user-list-item__checkbox\"\n            htmlFor={uniqueKey}\n          >\n            <Checkbox\n              id={uniqueKey}\n              checked={checked}\n              disabled={disabled}\n              onChange={(event) => onChange(event)}\n            />\n          </label>\n        )\n      }\n      {\n        isOperator && (\n          <Label\n            className={[\n              'sendbird-user-list-item__operator',\n              checkBox ? 'checkbox' : '',\n            ].join(' ')}\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            Operator\n          </Label>\n        )\n      }\n      {\n        action && (\n          <div\n            className=\"sendbird-user-list-item__action\"\n            ref={actionRef}\n          >\n            {action({ actionRef, parentRef })}\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["UserListItem","_ref","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","avatarSize","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","disableUserProfile","renderUserProfile","useContext","UserProfileContext","stringSet","LocalizationContext","createElement","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","onClick","menuItems","closeDropdown","MenuItems","openLeft","parentContainRef","style","paddingTop","paddingBottom","currentUserId","close","UserProfile","onSuccess","Label","type","LabelTypography","SUBTITLE_1","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","htmlFor","Checkbox","id","event","SUBTITLE_2"],"mappings":"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"}

package/cjs/ui/UserProfile.js

@@ -1,22 +1,22 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../LocalizationContext-4fa55e6b.js');
-var UserProfileContext = require('../UserProfileContext-83eaf6e8.js');
+var LocalizationContext = require('../LocalizationContext-461a0816.js');
+var UserProfileContext = require('../UserProfileContext-1bcc48a2.js');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-44186883.js');
 var ui_Button = require('./Button.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../stringSet-c24927d9.js');
-require('../index-47e4bdbc.js');
+require('../stringSet-d1cee26a.js');
+require('../index-5e6194f8.js');
 require('prop-types');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
-require('../topics-0df2f6f9.js');
-require('../utils-a1fead2f.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
+require('../topics-00c67dd6.js');
+require('../utils-3dacb9bc.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
-require('../uuid-c854e2a9.js');
+require('../uuid-d86ea01f.js');
 require('../withSendbird.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/VoiceMessageItemBody.js

@@ -8,15 +8,15 @@ var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
 var ui_PlaybackTime = require('./PlaybackTime.js');
 var ui_Loader = require('./Loader.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-22bdf04e.js');
-var VoicePlayer_context = require('../index-09f8f2a4.js');
-require('../consts-0db2bedc.js');
+var ui_Label = require('../index-44186883.js');
+var VoicePlayer_context = require('../index-6a46ed00.js');
+require('../consts-6f02fcc4.js');
 require('../VoiceRecorder/context.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
+require('../stringSet-d1cee26a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/VoiceMessgeInput.js

@@ -7,14 +7,14 @@ require('./PlaybackTime.js');
 require('./ProgressBar.js');
 require('./TextButton.js');
 require('./Icon.js');
-require('../index-22bdf04e.js');
-require('../LocalizationContext-4fa55e6b.js');
-var ui_VoiceMessgeInput = require('../index-1737cbae.js');
-require('../consts-0db2bedc.js');
+require('../index-44186883.js');
+require('../LocalizationContext-461a0816.js');
+var ui_VoiceMessgeInput = require('../index-0126dbb4.js');
+require('../consts-6f02fcc4.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../color-83cbca20.js');
-require('../index-47e4bdbc.js');
+require('../stringSet-d1cee26a.js');
+require('../color-48ff06b2.js');
+require('../index-5e6194f8.js');
 
 
 

package/cjs/ui/Word.js

@@ -1,25 +1,25 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-22bdf04e.js');
+var ui_Label = require('../index-44186883.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var uuid = require('../uuid-c854e2a9.js');
-var index = require('../index-265937df.js');
+var uuid = require('../uuid-d86ea01f.js');
+var index = require('../index-bca3d144.js');
 var ui_MentionLabel = require('./MentionLabel.js');
 require('prop-types');
-require('../stringSet-c24927d9.js');
-require('../_rollupPluginBabelHelpers-2c0fc9c3.js');
+require('../stringSet-d1cee26a.js');
+require('../_rollupPluginBabelHelpers-919a4db3.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ContextMenu.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./UserProfile.js');
-require('../LocalizationContext-4fa55e6b.js');
-require('../index-47e4bdbc.js');
-require('../UserProfileContext-83eaf6e8.js');
+require('../LocalizationContext-461a0816.js');
+require('../index-5e6194f8.js');
+require('../UserProfileContext-1bcc48a2.js');
 require('../sendbirdSelectors.js');
-require('../topics-0df2f6f9.js');
-require('../utils-a1fead2f.js');
+require('../topics-00c67dd6.js');
+require('../utils-3dacb9bc.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');

package/cjs/useDirtyGetMentions-7b6c8a19.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+
+function getMentionNodes(root) {
+  if (root) {
+    const mentions = root.querySelectorAll("[data-sb-mention='true']");
+    const mentionsArray = Array.from(mentions);
+    return mentionsArray;
+  }
+  return [];
+}
+
+/**
+ * This is a dirty way to get the mentions given DOM node
+ */
+function useDirtyGetMentions(_ref, _ref2) {
+  let {
+    ref
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  // Select the node that will be observed for mutations
+  const targetNode = ref.current;
+  const [mentionNodes, setMentionNodes] = React.useState([]);
+
+  // to get the initial mentions
+  React.useLayoutEffect(() => {
+    if (targetNode) {
+      const mentions = getMentionNodes(targetNode);
+      setMentionNodes(mentions);
+    }
+  }, [targetNode]);
+  React.useEffect(() => {
+    // Options for the observer (which mutations to observe)
+    const config = {
+      childList: true,
+      subtree: true
+    };
+
+    // Callback function to execute when mutations are observed
+    const callback = mutationList => {
+      const hasMutation = mutationList.length > 0;
+      if (hasMutation) {
+        setMentionNodes(getMentionNodes(targetNode));
+      }
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+    if (targetNode) {
+      // Start observing the target node for configured mutations
+      observer.observe(targetNode, config);
+      logger.info('useDirtyGetMentions: observer started', {
+        observer,
+        config
+      });
+    }
+    return () => {
+      try {
+        observer.disconnect();
+        logger.info('useDirtyGetMentions: observer disconnected', {
+          observer
+        });
+      } catch (error) {
+        logger.error('useDirtyGetMentions: observer disconnect failed', {
+          observer
+        });
+      }
+    };
+  }, [targetNode]);
+  return mentionNodes;
+}
+
+exports.useDirtyGetMentions = useDirtyGetMentions;
+//# sourceMappingURL=useDirtyGetMentions-7b6c8a19.js.map