@sendbird/uikit-react 3.5.0-rc.0 → 3.5.0

package/cjs/ui/Loader.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-5a7eb30d.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 require('prop-types');
@@ -9,19 +8,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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;
+function Loader(_ref) {
+  let {
+    className = '',
+    width = '26px',
+    height = '26px',
+    children
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-loader'], false).join(' '),
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-loader'].join(' '),
     style: {
-      width: typeof width === 'string' ? width : "".concat(width, "px"),
-      height: typeof height === 'string' ? height : "".concat(height, "px")
+      width: typeof width === 'string' ? width : `${width}px`,
+      height: typeof height === 'string' ? height : `${height}px`
     }
   }, children || /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
     type: ui_Icon.IconTypes.SPINNER,

package/cjs/ui/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/ui/Loader/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport Icon, { IconTypes } from '../Icon';\n\nexport interface LoaderProps {\n  className?: string | Array<string>;\n  width?: string | number;\n  height?: string | number;\n  children?: ReactElement;\n}\n\nexport default function Loader({\n  className = '',\n  width = '26px',\n  height = '26px',\n  children,\n}: LoaderProps): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-loader',\n      ].join(' ')}\n      style={{\n        width: typeof width === 'string' ? width : `${width}px`,\n        height: typeof height === 'string' ? height : `${height}px`,\n      }}\n    >\n      {\n        children\n        || (\n          <Icon\n            type={IconTypes.SPINNER}\n            width=\"26px\"\n            height=\"26px\"\n          />\n        )\n      }\n    </div>\n  );\n}\n"],"names":["Loader","_a","_b","className","_c","width","_d","height","children","React","__spreadArray","Array","isArray","join","concat","Icon","IconTypes","SPINNER"],"mappings":";;;;;;;;;;;AAawB,SAAAA,MAAA,CAAOC,EAAP,EAKV;MAJZC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA;MACZE,EAAA,GAAAH,EAAA,CAAAI;MAAAA,KAAK,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,MAAH,GAASA;MACdE;MAAAC,MAAM,mBAAG,SAAMD;MACfE,QAAQ,GAAAP,EAAA,CAAAO;EAER,oBACEC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,SAAS,EAAEC,uBAAA,CAAAA,uBAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAN,CAAcT,SAAd,CAAA,GAA2BA,SAA3B,GAAuC,CAACA,SAAD,CADlC,EAC8C,IAD9C,CAAA,EAC8C,CACvD,iBADuD,CAD9C,EAGT,KAHS,CAAA,CAGTU,IAHS,CAGJ,GAHI,CADb;AAKE,IAAA,KAAK,EAAE;AACLR,MAAAA,KAAK,EAAE,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoC,EAAA,CAAAS,MAAA,CAAGT,KAAH,EAAY,IAAZ,CADtC;AAELE,MAAAA,MAAM,EAAE,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,GAAsC,EAAAO,CAAAA,MAAA,CAAGP,MAAH,EAAa,IAAb,CAAA;AAFzC,KAAA;GAMLC,EAAAA,QAAQ,iBAENC,yBAAA,CAAA,aAAA,CAACM,kBAAD,EAAA;IACE,IAAI,EAAEC,iBAAS,CAACC,OADlB;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAC,MAAA;AAHT,GAAA,CAbN,CADF,CAAA;AAuBD;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../../src/ui/Loader/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport Icon, { IconTypes } from '../Icon';\n\nexport interface LoaderProps {\n  className?: string | Array<string>;\n  width?: string | number;\n  height?: string | number;\n  children?: ReactElement;\n}\n\nexport default function Loader({\n  className = '',\n  width = '26px',\n  height = '26px',\n  children,\n}: LoaderProps): ReactElement {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-loader',\n      ].join(' ')}\n      style={{\n        width: typeof width === 'string' ? width : `${width}px`,\n        height: typeof height === 'string' ? height : `${height}px`,\n      }}\n    >\n      {\n        children\n        || (\n          <Icon\n            type={IconTypes.SPINNER}\n            width=\"26px\"\n            height=\"26px\"\n          />\n        )\n      }\n    </div>\n  );\n}\n"],"names":["Loader","_ref","className","width","height","children","React","createElement","Array","isArray","join","style","Icon","type","IconTypes","SPINNER"],"mappings":";;;;;;;;;;AAae,SAASA,MAAMA,CAAAC,IAAA,EAKA;EAAA,IALC;AAC7BC,IAAAA,SAAS,GAAG,EAAE;AACdC,IAAAA,KAAK,GAAG,MAAM;AACdC,IAAAA,MAAM,GAAG,MAAM;AACfC,IAAAA,QAAAA;AACW,GAAC,GAAAJ,IAAA,CAAA;EACZ,oBACEK,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAE,CACT,IAAIM,KAAK,CAACC,OAAO,CAACP,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,iBAAiB,CAClB,CAACQ,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,KAAK,EAAE;MACLR,KAAK,EAAE,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA;MACvDC,MAAM,EAAE,OAAOA,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAA;AAC1D,KAAA;AAAE,GAAA,EAGAC,QAAQ,iBAENC,yBAAA,CAAAC,aAAA,CAACK,kBAAI,EAAA;IACHC,IAAI,EAAEC,iBAAS,CAACC,OAAQ;AACxBZ,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,CAEhB,CAEC,CAAA;AAEV;;;;"}

package/cjs/ui/MentionLabel.js

@@ -2,101 +2,94 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-bdd889a2.js');
+var ui_Label = require('../index-6cb0d040.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-5a7eb30d.js');
+require('../_rollupPluginBabelHelpers-c89f311a.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-a9006ea2.js');
-require('../index-b3371ef2.js');
+require('../uuid-12b01f73.js');
+require('../index-5231fde8.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-60660a99.js');
-require('../LocalizationContext-8780a64e.js');
-require('../index-48d85d8f.js');
-require('../UserProfileContext-0808e413.js');
+require('../stringSet-106da549.js');
+require('../LocalizationContext-0e429c3d.js');
+require('../index-016f7106.js');
+require('../UserProfileContext-87580795.js');
 require('../sendbirdSelectors.js');
-require('../topics-f3f74edc.js');
-require('../utils-708aa730.js');
+require('../topics-b384e6b3.js');
+require('../utils-ad7b5b82.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('./Button.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-bd6baf0a.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function MentionLabel(props) {
-  var _a, _b, _c;
-
-  var mentionTemplate = props.mentionTemplate,
-      mentionedUserId = props.mentionedUserId,
-      mentionedUserNickname = props.mentionedUserNickname,
-      isByMe = props.isByMe;
-  var mentionRef = React.useRef();
-  var sendbirdState = useSendbirdStateContext();
-  var userId = (_a = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.config) === null || _a === void 0 ? void 0 : _a.userId;
-  var sdk = (_c = (_b = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
-  var amIBeingMentioned = userId === mentionedUserId;
-
-  var _d = React.useState(),
-      user = _d[0],
-      setUser = _d[1];
-
-  var fetchUser = React.useCallback(function (toggleDropdown) {
-    if (user || !(sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery)) {
+  var _sendbirdState$config, _sendbirdState$stores, _sendbirdState$stores2;
+  const {
+    mentionTemplate,
+    mentionedUserId,
+    mentionedUserNickname,
+    isByMe
+  } = props;
+  const mentionRef = React.useRef();
+  const sendbirdState = useSendbirdStateContext();
+  const userId = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$config = sendbirdState.config) === null || _sendbirdState$config === void 0 ? void 0 : _sendbirdState$config.userId;
+  const sdk = sendbirdState === null || sendbirdState === void 0 ? void 0 : (_sendbirdState$stores = sendbirdState.stores) === null || _sendbirdState$stores === void 0 ? void 0 : (_sendbirdState$stores2 = _sendbirdState$stores.sdkStore) === null || _sendbirdState$stores2 === void 0 ? void 0 : _sendbirdState$stores2.sdk;
+  const amIBeingMentioned = userId === mentionedUserId;
+  const [user, setUser] = React.useState();
+  const fetchUser = React.useCallback(toggleDropdown => {
+    if (user || !(sdk !== null && sdk !== void 0 && sdk.createApplicationUserListQuery)) {
       toggleDropdown();
       return;
     }
-
-    var query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
+    const query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
       userIdsFilter: [mentionedUserId]
     });
-    query.next().then(function (members) {
+    query.next().then(members => {
       if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
         setUser(members[0]);
       }
-
       toggleDropdown();
     });
   }, [sdk, mentionedUserId]);
   return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement("a", {
-        className: "\n            sendbird-word__mention\n            ".concat(amIBeingMentioned ? 'sendbird-word__mention--me' : '', "\n          "),
-        onClick: function () {
-          return fetchUser(toggleDropdown);
-        },
-        ref: mentionRef
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-        type: ui_Label.LabelTypography.CAPTION_1,
-        color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
-      }, "".concat(mentionTemplate).concat(mentionedUserNickname)));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
-      /**
-      * parentRef: For catching location(x, y) of MenuItems
-      * parentContainRef: For toggling more options(menus & reactions)
-      */
-      , {
-        parentRef: mentionRef,
-        parentContainRef: mentionRef,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        user: user,
-        onSuccess: closeDropdown,
-        currentUserId: userId
-      }));
-    }
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement("a", {
+      className: `
+            sendbird-word__mention
+            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}
+          `,
+      onClick: () => fetchUser(toggleDropdown),
+      ref: mentionRef,
+      "data-userid": mentionedUserId,
+      "data-nickname": mentionedUserNickname,
+      "data-sb-mention": true
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+      type: ui_Label.LabelTypography.CAPTION_1,
+      color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+    }, `${mentionTemplate}${mentionedUserNickname}`)),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems
+    /**
+    * parentRef: For catching location(x, y) of MenuItems
+    * parentContainRef: For toggling more options(menus & reactions)
+    */, {
+      parentRef: mentionRef,
+      parentContainRef: mentionRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+      user: user,
+      onSuccess: closeDropdown,
+      currentUserId: userId
+    }))
   });
 }
 

package/cjs/ui/MentionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  )\n}\n"],"names":["MentionLabel","props","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","_a","config","sdk","_c","_b","stores","sdkStore","amIBeingMentioned","_d","useState","user","setUser","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","ContextMenu","concat","Label","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","MenuItems","paddingTop","paddingBottom","UserProfile"],"mappings":"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"}
+{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n          data-userid={mentionedUserId}\n          data-nickname={mentionedUserNickname}\n          data-sb-mention={true}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  );\n}\n"],"names":["MentionLabel","props","_sendbirdState$config","_sendbirdState$stores","_sendbirdState$stores2","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","config","sdk","stores","sdkStore","amIBeingMentioned","user","setUser","useState","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","createElement","ContextMenu","menuTrigger","className","onClick","ref","Label","type","LabelTypography","CAPTION_1","color","LabelColors","ONCONTENT_1","ONBACKGROUND_1","menuItems","closeDropdown","MenuItems","parentRef","parentContainRef","style","paddingTop","paddingBottom","UserProfile","onSuccess","currentUserId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBe,SAASA,YAAYA,CAACC,KAAwB,EAAe;AAAA,EAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,sBAAA,CAAA;EAC1E,MAAM;IACJC,eAAe;IACfC,eAAe;IACfC,qBAAqB;AACrBC,IAAAA,MAAAA;AACF,GAAC,GAAGP,KAAK,CAAA;EAET,MAAMQ,UAAU,GAAGC,YAAM,EAAE,CAAA;EAE3B,MAAMC,aAAa,GAAGC,uBAAuB,EAAE,CAAA;AAC/C,EAAA,MAAMC,MAAM,GAAGF,aAAa,KAAbA,IAAAA,IAAAA,aAAa,wBAAAT,qBAAA,GAAbS,aAAa,CAAEG,MAAM,MAAAZ,IAAAA,IAAAA,qBAAA,KAArBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAuBW,MAAM,CAAA;EAC5C,MAAME,GAAG,GAAGJ,aAAa,KAAbA,IAAAA,IAAAA,aAAa,wBAAAR,qBAAA,GAAbQ,aAAa,CAAEK,MAAM,MAAA,IAAA,IAAAb,qBAAA,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,sBAAA,GAArBD,qBAAA,CAAuBc,QAAQ,cAAAb,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA/BA,sBAAA,CAAiCW,GAAG,CAAA;AAChD,EAAA,MAAMG,iBAAiB,GAAGL,MAAM,KAAKP,eAAe,CAAA;AACpD,EAAA,MAAM,CAACa,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,EAAc,CAAA;AAC9C,EAAA,MAAMC,SAAS,GAAGC,iBAAW,CAC1BC,cAAc,IAAK;IAClB,IAAIL,IAAI,IAAI,EAACJ,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,IAAAA,GAAG,CAAEU,8BAA8B,CAAE,EAAA;AAChDD,MAAAA,cAAc,EAAE,CAAA;AAChB,MAAA,OAAA;AACF,KAAA;IACA,MAAME,KAAK,GAAGX,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,GAAG,CAAEU,8BAA8B,CAAC;MAChDE,aAAa,EAAE,CAACrB,eAAe,CAAA;AACjC,KAAC,CAAC,CAAA;AACFoB,IAAAA,KAAK,CAACE,IAAI,EAAE,CAACC,IAAI,CAAEC,OAAO,IAAK;MAC7B,IAAI,CAAAA,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAEC,MAAM,IAAG,CAAC,EAAE;AACvBX,QAAAA,OAAO,CAACU,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AACrB,OAAA;AACAN,MAAAA,cAAc,EAAE,CAAA;AAClB,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAACT,GAAG,EAAET,eAAe,CAAC,CACvB,CAAA;AACD,EAAA,oBACE0B,yBAAA,CAAAC,aAAA,CAACC,yBAAW,EAAA;AACVC,IAAAA,WAAW,EAAGX,cAA0B,iBACtCQ,yBAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACEG,MAAAA,SAAS,EAAG,CAAA;AACtB;AACA,YAAA,EAAclB,iBAAiB,GAAG,4BAA4B,GAAG,EAAG,CAAA;AACpE,UAAY,CAAA;AACFmB,MAAAA,OAAO,EAAEA,MAAMf,SAAS,CAACE,cAAc,CAAE;AACzCc,MAAAA,GAAG,EAAE7B,UAAW;AAChB,MAAA,aAAA,EAAaH,eAAgB;AAC7B,MAAA,eAAA,EAAeC,qBAAsB;MACrC,iBAAiB,EAAA,IAAA;AAAK,KAAA,eAEtByB,yBAAA,CAAAC,aAAA,CAACM,cAAK,EAAA;MACJC,IAAI,EAAEC,wBAAe,CAACC,SAAU;MAChCC,KAAK,EAAEnC,MAAM,GAAGoC,oBAAW,CAACC,WAAW,GAAGD,oBAAW,CAACE,cAAAA;AAAe,KAAA,EAEnE,GAAEzC,eAAgB,CAAA,EAAEE,qBAAsB,CAAA,CAAC,CACvC,CAEV;AACFwC,IAAAA,SAAS,EAAGC,aAAyB,iBACnChB,yBAAA,CAAAC,aAAA,CAACgB,wBAAAA;AACC;AACV;AACA;AACA,QAHU;AAIAC,MAAAA,SAAS,EAAEzC,UAAW;AACtB0C,MAAAA,gBAAgB,EAAE1C,UAAW;AAC7BuC,MAAAA,aAAa,EAAEA,aAAc;AAC7BI,MAAAA,KAAK,EAAE;AAAEC,QAAAA,UAAU,EAAE,KAAK;AAAEC,QAAAA,aAAa,EAAE,KAAA;AAAM,OAAA;AAAE,KAAA,eAEnDtB,yBAAA,CAAAC,aAAA,CAACsB,cAAW,EAAA;AACVpC,MAAAA,IAAI,EAAEA,IAAK;AACXqC,MAAAA,SAAS,EAAER,aAAc;AACzBS,MAAAA,aAAa,EAAE5C,MAAAA;KACf,CAAA,CAAA;GAGN,CAAA,CAAA;AAEN;;;;"}

package/cjs/ui/MentionUserLabel.js

@@ -1,23 +1,25 @@
 'use strict';
 
 var React = require('react');
+var consts = require('../consts-1c3020ad.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function MentionUserLabel(_a) {
-  var _b = _a.className,
-      className = _b === void 0 ? '' : _b,
-      children = _a.children,
-      _c = _a.isReverse,
-      isReverse = _c === void 0 ? false : _c,
-      color = _a.color,
-      userId = _a.userId;
+function MentionUserLabel(_ref) {
+  let {
+    className = '',
+    children,
+    isReverse = false,
+    color,
+    userId
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "sendbird-mention-user-label ".concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
+    className: `${consts.MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`,
     contentEditable: false,
-    "data-userid": userId
+    "data-userid": userId,
+    "data-sb-mention": true
   }, children);
 }
 

package/cjs/ui/MentionUserLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import React from 'react';\nimport './index.scss';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`sendbird-mention-user-label ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_a","_b","className","children","_c","isReverse","color","userId","React","concat"],"mappings":";;;;;;;;AAWwB,SAAAA,gBAAA,CAAiBC,EAAjB,EAMA;MALtBC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA;MACZE,QAAQ;MACRC,EAAA,GAAAJ,EAAA,CAAAK;MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MACjBE,KAAK,GAAAN,EAAA,CAAAM;MACLC,MAAM,GAAAP,EAAA,CAAAO;EAEN,oBACEC,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IACE,SAAS,EAAE,+BAA+BC,MAA/B,CAA+BP,SAA/B,KAAA,QAAA,CAA4CG,SAAS,GAAG,SAAH,GAAe,EAApE,KAAA,QAAA,CAA0EC,KAA1E,CADb;AAEE,IAAA,eAAe,EAAE,KAFnB;IAGE,aAAaC,EAAAA,MAAAA;AAHf,GAAA,EAKGJ,QALH,CADF,CAAA;AASD;;;;"}
+{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React from 'react';\nimport { MENTION_USER_LABEL_CLASSNAME } from './consts';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n      data-sb-mention={true}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_ref","className","children","isReverse","color","userId","React","createElement","MENTION_USER_LABEL_CLASSNAME","contentEditable"],"mappings":";;;;;;;;;AAae,SAASA,gBAAgBA,CAAAC,IAAA,EAMD;EAAA,IANE;AACvCC,IAAAA,SAAS,GAAG,EAAE;IACdC,QAAQ;AACRC,IAAAA,SAAS,GAAG,KAAK;IACjBC,KAAK;AACLC,IAAAA,MAAAA;AACqB,GAAC,GAAAL,IAAA,CAAA;EACtB,oBACEM,yBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEN,IAAAA,SAAS,EAAG,CAAA,EAAEO,mCAA6B,CAAA,CAAA,EAAGP,SAAU,CAAA,CAAA,EAAGE,SAAS,GAAG,SAAS,GAAG,EAAG,CAAA,CAAA,EAAGC,KAAM,CAAE,CAAA;AACjGK,IAAAA,eAAe,EAAE,KAAM;AACvB,IAAA,aAAA,EAAaJ,MAAO;IACpB,iBAAiB,EAAA,IAAA;AAAK,GAAA,EAErBH,QAAQ,CACJ,CAAA;AAEX;;;;"}