@sendbird/uikit-react 3.4.6 → 3.4.7-0

package/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","_a","_b","className","url","_c","alt","_d","width","_e","height","_f","circle","_g","fixedSize","_h","placeHolder","_j","defaultComponent","_k","onLoad","_l","onError","_m","useState","showDefaultComponent","setShowDefaultComponent","_o","showPlaceHolder","setShowPlaceHolder","DefaultComponent","useMemo","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","createElement","src","__spreadArray","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","concat","borderRadius"],"mappings":"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"}
+{"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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"}

package/ui/Input.js

@@ -1,25 +1,27 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
 import 'prop-types';
-import '../stringSet-9d579825.js';
+import '../stringSet-1f18348a.js';
 
-var InputLabel = function (_a) {
-  var children = _a.children;
+const InputLabel = _ref => {
+  let {
+    children
+  } = _ref;
   return /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-input-label",
     type: LabelTypography.CAPTION_3,
     color: LabelColors.ONBACKGROUND_1
   }, children);
 };
-var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var name = props.name,
-    required = props.required,
-    disabled = props.disabled,
-    value = props.value,
-    placeHolder = props.placeHolder;
-  var _a = useState(value),
-    inputValue = _a[0],
-    setInputValue = _a[1];
+const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    name,
+    required,
+    disabled,
+    value,
+    placeHolder
+  } = props;
+  const [inputValue, setInputValue] = useState(value);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-input"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -29,7 +31,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     required: required,
     disabled: disabled,
     value: inputValue,
-    onChange: function (e) {
+    onChange: e => {
       setInputValue(e.target.value);
     }
   }), placeHolder && !inputValue && /*#__PURE__*/React__default.createElement(Label, {

package/ui/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../src/ui/Input/index.tsx"],"sourcesContent":["import React, { ReactElement, RefObject, useState } from 'react';\n\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface InputLabelProps {\n  children: ReactElement;\n}\nexport const InputLabel = ({ children }: InputLabelProps): ReactElement => (\n  <Label\n    className=\"sendbird-input-label\"\n    type={LabelTypography.CAPTION_3}\n    color={LabelColors.ONBACKGROUND_1}\n  >\n    {children}\n  </Label>\n);\n\nexport interface InputProps {\n  name: string;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeHolder?: string;\n}\nconst Input = React.forwardRef((props: InputProps, ref: RefObject<HTMLInputElement>) => {\n  const {\n    name,\n    required,\n    disabled,\n    value,\n    placeHolder,\n  } = props;\n  const [inputValue, setInputValue] = useState(value);\n  return (\n    <div className=\"sendbird-input\">\n      <input\n        className=\"sendbird-input__input\"\n        ref={ref}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={inputValue}\n        onChange={(e) => {\n          setInputValue(e.target.value);\n        }}\n      />\n      {(placeHolder && !inputValue) && (\n        <Label\n          className=\"sendbird-input__placeholder\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {placeHolder}\n        </Label>\n      )}\n    </div>\n  );\n});\n\nexport default Input;\n"],"names":["InputLabel","_a","children","React","createElement","Label","className","type","LabelTypography","CAPTION_3","color","LabelColors","ONBACKGROUND_1","Input","forwardRef","props","ref","name","required","disabled","value","placeHolder","useState","inputValue","setInputValue","onChange","e","target","BODY_1","ONBACKGROUND_3"],"mappings":";;;;;IASaA,UAAU,GAAG,UAACC,EAA6B,EAAA;AAA3B,EAAA,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA,CAAA;AAAsC,EAAA,oBACzEC,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJC,IAAAA,SAAS,EAAC,sBAAsB;IAChCC,IAAI,EAAEC,eAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,WAAW,CAACC,cAAAA;AAAe,GAAA,EAEjCV,QAAQ,CACH,CAAA;AAPiE,EAQ1E;AASKW,IAAAA,KAAK,gBAAGV,cAAK,CAACW,UAAU,CAAC,UAACC,KAAiB,EAAEC,GAAgC,EAAA;AAE/E,EAAA,IAAAC,IAAI,GAKFF,KAAK,CALHE,IAAA;IACJC,QAAQ,GAINH,KAAK,CAJCG,QAAA;IACRC,QAAQ,GAGNJ,KAAK,CAHCI,QAAA;IACRC,KAAK,GAEHL,KAAK,CAAAK,KAFF;IACLC,WAAW,GACTN,KAAK,CAAAM,WADI,CAAA;AAEP,EAAA,IAAApB,EAAA,GAA8BqB,QAAQ,CAACF,KAAK,CAAC;AAA5CG,IAAAA,UAAU,GAAAtB,EAAA,CAAA,CAAA,CAAA;AAAEuB,IAAAA,aAAa,GAAAvB,EAAA,CAAA,CAAA,CAAmB,CAAA;EACnD,oBACEE,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKE,IAAAA,SAAS,EAAC,gBAAA;GACbH,eAAAA,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEE,IAAAA,SAAS,EAAC,uBAAuB;AACjCU,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,KAAK,EAAEG,UAAW;AAClBE,IAAAA,QAAQ,EAAE,UAACC,CAAC,EAAA;AACVF,MAAAA,aAAa,CAACE,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAA;AAC/B,KAAA;GAEF,CAAA,EAAEC,WAAW,IAAI,CAACE,UAAU,iBAC1BpB,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJC,IAAAA,SAAS,EAAC,6BAA6B;IACvCC,IAAI,EAAEC,eAAe,CAACoB,MAAO;IAC7BlB,KAAK,EAAEC,WAAW,CAACkB,cAAAA;GAElBR,EAAAA,WAAW,CAEf,CACG,CAAA;AAEV,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../src/ui/Input/index.tsx"],"sourcesContent":["import React, { ReactElement, RefObject, useState } from 'react';\n\nimport './index.scss';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface InputLabelProps {\n  children: ReactElement;\n}\nexport const InputLabel = ({ children }: InputLabelProps): ReactElement => (\n  <Label\n    className=\"sendbird-input-label\"\n    type={LabelTypography.CAPTION_3}\n    color={LabelColors.ONBACKGROUND_1}\n  >\n    {children}\n  </Label>\n);\n\nexport interface InputProps {\n  name: string;\n  required?: boolean;\n  disabled?: boolean;\n  value?: string;\n  placeHolder?: string;\n}\nconst Input = React.forwardRef((props: InputProps, ref: RefObject<HTMLInputElement>) => {\n  const {\n    name,\n    required,\n    disabled,\n    value,\n    placeHolder,\n  } = props;\n  const [inputValue, setInputValue] = useState(value);\n  return (\n    <div className=\"sendbird-input\">\n      <input\n        className=\"sendbird-input__input\"\n        ref={ref}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={inputValue}\n        onChange={(e) => {\n          setInputValue(e.target.value);\n        }}\n      />\n      {(placeHolder && !inputValue) && (\n        <Label\n          className=\"sendbird-input__placeholder\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_3}\n        >\n          {placeHolder}\n        </Label>\n      )}\n    </div>\n  );\n});\n\nexport default Input;\n"],"names":["InputLabel","_ref","children","React","createElement","Label","className","type","LabelTypography","CAPTION_3","color","LabelColors","ONBACKGROUND_1","Input","forwardRef","props","ref","name","required","disabled","value","placeHolder","inputValue","setInputValue","useState","onChange","e","target","BODY_1","ONBACKGROUND_3"],"mappings":";;;;;AASO,MAAMA,UAAU,GAAGC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAA0B,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,oBACtDE,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJC,IAAAA,SAAS,EAAC,sBAAsB;IAChCC,IAAI,EAAEC,eAAe,CAACC,SAAU;IAChCC,KAAK,EAAEC,WAAW,CAACC,cAAAA;AAAe,GAAA,EAEjCV,QACI,CAAC,CAAA;AAAA,EACT;AASKW,MAAAA,KAAK,gBAAGV,cAAK,CAACW,UAAU,CAAC,CAACC,KAAiB,EAAEC,GAAgC,KAAK;EACtF,MAAM;IACJC,IAAI;IACJC,QAAQ;IACRC,QAAQ;IACRC,KAAK;AACLC,IAAAA,WAAAA;AACF,GAAC,GAAGN,KAAK,CAAA;EACT,MAAM,CAACO,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAACJ,KAAK,CAAC,CAAA;EACnD,oBACEjB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKE,IAAAA,SAAS,EAAC,gBAAA;GACbH,eAAAA,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEE,IAAAA,SAAS,EAAC,uBAAuB;AACjCU,IAAAA,GAAG,EAAEA,GAAI;AACTC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,KAAK,EAAEE,UAAW;IAClBG,QAAQ,EAAGC,CAAC,IAAK;AACfH,MAAAA,aAAa,CAACG,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAA;AAC/B,KAAA;GACD,CAAC,EACAC,WAAW,IAAI,CAACC,UAAU,iBAC1BnB,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJC,IAAAA,SAAS,EAAC,6BAA6B;IACvCC,IAAI,EAAEC,eAAe,CAACoB,MAAO;IAC7BlB,KAAK,EAAEC,WAAW,CAACkB,cAAAA;GAElBR,EAAAA,WACI,CAEN,CAAC,CAAA;AAEV,CAAC;;;;"}

package/ui/Label.js

@@ -1,5 +1,5 @@
 import 'react';
 import 'prop-types';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-cce0e324.js';
-import '../stringSet-9d579825.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-4111594a.js';
+import '../stringSet-1f18348a.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { d as changeColorToClassName, L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
-import '../stringSet-9d579825.js';
+import { d as changeColorToClassName, L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
+import '../stringSet-1f18348a.js';
 
 const http = /https?:\/\//;
 function LinkLabel(_ref) {

package/ui/LinkLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkLabel.js","sources":["../../src/ui/LinkLabel/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { changeColorToClassName } from '../Label/utils';\nimport './index.scss';\n\nconst http = /https?:\\/\\//;\n\nexport default function LinkLabel({\n  className,\n  src,\n  type,\n  color,\n  children,\n}) {\n  const url = (http.test(src)) ? src : `http://${src}`;\n\n  return (\n    <a\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-link-label',\n        color ? changeColorToClassName(color) : '',\n      ].join(' ')}\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // for mobile\n      onTouchEnd={(e) => {\n        e.preventDefault();\n        e.nativeEvent.stopImmediatePropagation();\n        window.open(url, '_blank', 'noopener,noreferrer');\n      }}\n    >\n      <Label\n        className=\"sendbird-link-label__label\"\n        type={type}\n        color={color}\n      >\n        {children}\n      </Label>\n    </a>\n  );\n}\n\nLinkLabel.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  src: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  color: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n};\n\nLinkLabel.defaultProps = {\n  className: '',\n  type: '',\n  color: '',\n};\n\nexport const LinkLabelTypography = LabelTypography;\nexport const LinkLabelColors = LabelColors;\n"],"names":["http","LinkLabel","_ref","className","src","type","color","children","url","test","React","createElement","Array","isArray","changeColorToClassName","join","href","target","rel","onTouchEnd","e","preventDefault","nativeEvent","stopImmediatePropagation","window","open","Label","propTypes","PropTypes","oneOfType","string","arrayOf","isRequired","element","defaultProps","LinkLabelTypography","LabelTypography","LinkLabelColors","LabelColors"],"mappings":";;;;;AAOA,MAAMA,IAAI,GAAG,aAAa,CAAA;AAEX,SAASC,SAASA,CAAAC,IAAA,EAM9B;EAAA,IAN+B;IAChCC,SAAS;IACTC,GAAG;IACHC,IAAI;IACJC,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,GAAAL,IAAA,CAAA;AACC,EAAA,MAAMM,GAAG,GAAIR,IAAI,CAACS,IAAI,CAACL,GAAG,CAAC,GAAIA,GAAG,GAAI,CAAA,OAAA,EAASA,GAAI,CAAC,CAAA,CAAA;EAEpD,oBACEM,cAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACER,IAAAA,SAAS,EAAE,CACT,IAAIS,KAAK,CAACC,OAAO,CAACV,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,qBAAqB,EACrBG,KAAK,GAAGQ,sBAAsB,CAACR,KAAK,CAAC,GAAG,EAAE,CAC3C,CAACS,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,IAAI,EAAER,GAAI;AACVS,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAA;AACJ;AAAA;IACAC,UAAU,EAAGC,CAAC,IAAK;MACjBA,CAAC,CAACC,cAAc,EAAE,CAAA;AAClBD,MAAAA,CAAC,CAACE,WAAW,CAACC,wBAAwB,EAAE,CAAA;MACxCC,MAAM,CAACC,IAAI,CAACjB,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAA;AACnD,KAAA;AAAE,GAAA,eAEFE,cAAA,CAAAC,aAAA,CAACe,KAAK,EAAA;AACJvB,IAAAA,SAAS,EAAC,4BAA4B;AACtCE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAAA;GAENC,EAAAA,QAAQ,CACH,CACN,CAAA;AAER,CAAA;AAEAN,SAAS,CAAC0B,SAAS,GAAG;AACpBxB,EAAAA,SAAS,EAAEyB,SAAS,CAACC,SAAS,CAAC,CAC7BD,SAAS,CAACE,MAAM,EAChBF,SAAS,CAACG,OAAO,CAACH,SAAS,CAACE,MAAM,CAAC,CACpC,CAAC;AACF1B,EAAAA,GAAG,EAAEwB,SAAS,CAACE,MAAM,CAACE,UAAU;EAChC3B,IAAI,EAAEuB,SAAS,CAACE,MAAM;EACtBxB,KAAK,EAAEsB,SAAS,CAACE,MAAM;AACvBvB,EAAAA,QAAQ,EAAEqB,SAAS,CAACC,SAAS,CAAC,CAC5BD,SAAS,CAACE,MAAM,EAChBF,SAAS,CAACK,OAAO,EACjBL,SAAS,CAACG,OAAO,CAACH,SAAS,CAACE,MAAM,CAAC,EACnCF,SAAS,CAACG,OAAO,CAACH,SAAS,CAACK,OAAO,CAAC,CACrC,CAAC,CAACD,UAAAA;AACL,CAAC,CAAA;AAED/B,SAAS,CAACiC,YAAY,GAAG;AACvB/B,EAAAA,SAAS,EAAE,EAAE;AACbE,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,KAAK,EAAE,EAAA;AACT,CAAC,CAAA;AAEM,MAAM6B,mBAAmB,GAAGC,gBAAe;AAC3C,MAAMC,eAAe,GAAGC;;;;"}
+{"version":3,"file":"LinkLabel.js","sources":["../../src/ui/LinkLabel/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { changeColorToClassName } from '../Label/utils';\nimport './index.scss';\n\nconst http = /https?:\\/\\//;\n\nexport default function LinkLabel({\n  className,\n  src,\n  type,\n  color,\n  children,\n}) {\n  const url = (http.test(src)) ? src : `http://${src}`;\n\n  return (\n    <a\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-link-label',\n        color ? changeColorToClassName(color) : '',\n      ].join(' ')}\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // for mobile\n      onTouchEnd={(e) => {\n        e.preventDefault();\n        e.nativeEvent.stopImmediatePropagation();\n        window.open(url, '_blank', 'noopener,noreferrer');\n      }}\n    >\n      <Label\n        className=\"sendbird-link-label__label\"\n        type={type}\n        color={color}\n      >\n        {children}\n      </Label>\n    </a>\n  );\n}\n\nLinkLabel.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  src: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  color: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.element,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.arrayOf(PropTypes.element),\n  ]).isRequired,\n};\n\nLinkLabel.defaultProps = {\n  className: '',\n  type: '',\n  color: '',\n};\n\nexport const LinkLabelTypography = LabelTypography;\nexport const LinkLabelColors = LabelColors;\n"],"names":["http","LinkLabel","_ref","className","src","type","color","children","url","test","React","createElement","Array","isArray","changeColorToClassName","join","href","target","rel","onTouchEnd","e","preventDefault","nativeEvent","stopImmediatePropagation","window","open","Label","propTypes","PropTypes","oneOfType","string","arrayOf","isRequired","element","defaultProps","LinkLabelTypography","LabelTypography","LinkLabelColors","LabelColors"],"mappings":";;;;;AAOA,MAAMA,IAAI,GAAG,aAAa,CAAA;AAEX,SAASC,SAASA,CAAAC,IAAA,EAM9B;EAAA,IAN+B;IAChCC,SAAS;IACTC,GAAG;IACHC,IAAI;IACJC,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,GAAAL,IAAA,CAAA;AACC,EAAA,MAAMM,GAAG,GAAIR,IAAI,CAACS,IAAI,CAACL,GAAG,CAAC,GAAIA,GAAG,GAAI,CAAA,OAAA,EAASA,GAAI,CAAC,CAAA,CAAA;EAEpD,oBACEM,cAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACER,IAAAA,SAAS,EAAE,CACT,IAAIS,KAAK,CAACC,OAAO,CAACV,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,qBAAqB,EACrBG,KAAK,GAAGQ,sBAAsB,CAACR,KAAK,CAAC,GAAG,EAAE,CAC3C,CAACS,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,IAAI,EAAER,GAAI;AACVS,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAA;AACJ;AAAA;IACAC,UAAU,EAAGC,CAAC,IAAK;MACjBA,CAAC,CAACC,cAAc,EAAE,CAAA;AAClBD,MAAAA,CAAC,CAACE,WAAW,CAACC,wBAAwB,EAAE,CAAA;MACxCC,MAAM,CAACC,IAAI,CAACjB,GAAG,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAA;AACnD,KAAA;AAAE,GAAA,eAEFE,cAAA,CAAAC,aAAA,CAACe,KAAK,EAAA;AACJvB,IAAAA,SAAS,EAAC,4BAA4B;AACtCE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAAA;GAENC,EAAAA,QACI,CACN,CAAC,CAAA;AAER,CAAA;AAEAN,SAAS,CAAC0B,SAAS,GAAG;AACpBxB,EAAAA,SAAS,EAAEyB,SAAS,CAACC,SAAS,CAAC,CAC7BD,SAAS,CAACE,MAAM,EAChBF,SAAS,CAACG,OAAO,CAACH,SAAS,CAACE,MAAM,CAAC,CACpC,CAAC;AACF1B,EAAAA,GAAG,EAAEwB,SAAS,CAACE,MAAM,CAACE,UAAU;EAChC3B,IAAI,EAAEuB,SAAS,CAACE,MAAM;EACtBxB,KAAK,EAAEsB,SAAS,CAACE,MAAM;AACvBvB,EAAAA,QAAQ,EAAEqB,SAAS,CAACC,SAAS,CAAC,CAC5BD,SAAS,CAACE,MAAM,EAChBF,SAAS,CAACK,OAAO,EACjBL,SAAS,CAACG,OAAO,CAACH,SAAS,CAACE,MAAM,CAAC,EACnCF,SAAS,CAACG,OAAO,CAACH,SAAS,CAACK,OAAO,CAAC,CACrC,CAAC,CAACD,UAAAA;AACL,CAAC,CAAA;AAED/B,SAAS,CAACiC,YAAY,GAAG;AACvB/B,EAAAA,SAAS,EAAE,EAAE;AACbE,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,KAAK,EAAE,EAAA;AACT,CAAC,CAAA;AAEM,MAAM6B,mBAAmB,GAAGC,gBAAe;AAC3C,MAAMC,eAAe,GAAGC;;;;"}

package/ui/Loader.js

@@ -1,21 +1,19 @@
-import { a as __spreadArray } from '../tslib.es6-d6e50ec3.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
 import 'prop-types';
 
-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.createElement("div", {
-    className: __spreadArray(__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.createElement(Icon, {
     type: IconTypes.SPINNER,

package/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","createElement","__spreadArray","Array","isArray","join","style","concat","Icon","type","IconTypes","SPINNER"],"mappings":";;;;;AAawB,SAAAA,MAAMA,CAACC,EAKjB,EAAA;MAJZC,EAAc,GAAAD,EAAA,CAAAE,SAAA;IAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA;IACdE,EAAA,GAAAH,EAAA,CAAAI,KAAc;IAAdA,KAAK,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAAA,EAAA;IACdE,cAAe;IAAfC,MAAM,mBAAG,MAAM,GAAAD,EAAA;IACfE,QAAQ,GAAAP,EAAA,CAAAO,QAAA,CAAA;EAER,oBACEC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEP,IAAAA,SAAS,EAAEQ,aAAA,CAAAA,aAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAO,CAACV,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,EAAC,IAAA,CAAA,EAAA,CACvD,iBAAiB,CACjB,EAAA,KAAA,CAAA,CAAAW,IAAI,CAAC,GAAG,CAAE;AACZC,IAAAA,KAAK,EAAE;AACLV,MAAAA,KAAK,EAAE,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,EAAA,CAAAW,MAAA,CAAGX,KAAK,EAAI,IAAA,CAAA;AACvDE,MAAAA,MAAM,EAAE,OAAOA,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,EAAA,CAAAS,MAAA,CAAGT,MAAM,EAAI,IAAA,CAAA;AAC5D,KAAA;AAAC,GAAA,EAGAC,QAAQ,iBAENC,cAAA,CAAAC,aAAA,CAACO,IAAI,EAAA;IACHC,IAAI,EAAEC,SAAS,CAACC,OAAQ;AACxBf,IAAAA,KAAK,EAAC,MAAM;AACZE,IAAAA,MAAM,EAAC,MAAA;AAAM,GAAA,CAEhB,CAEC,CAAA;AAEV;;;;"}
+{"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,cAAA,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,cAAA,CAAAC,aAAA,CAACK,IAAI,EAAA;IACHC,IAAI,EAAEC,SAAS,CAACC,OAAQ;AACxBZ,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;AAAM,GACd,CAGF,CAAC,CAAA;AAEV;;;;"}

package/ui/MentionLabel.js

@@ -1,22 +1,22 @@
 import React__default, { useRef, useState, useCallback } from 'react';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
 import UserProfile from './UserProfile.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../tslib.es6-d6e50ec3.js';
+import '../_rollupPluginBabelHelpers-b2d9bfc5.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-86cb48e0.js';
-import '../index-e378ca4e.js';
+import '../uuid-48baadaf.js';
+import '../index-dbe0e004.js';
 import '../utils/message/getOutgoingMessageState.js';
 import 'prop-types';
-import '../stringSet-9d579825.js';
-import '../LocalizationContext-3d8c0b24.js';
-import '../index-aaa9b9f8.js';
-import '../UserProfileContext-41938ddc.js';
+import '../stringSet-1f18348a.js';
+import '../LocalizationContext-9c54e783.js';
+import '../index-a9ddd0f5.js';
+import '../UserProfileContext-a8aa4c0f.js';
 import '../sendbirdSelectors.js';
-import '../topics-f9301447.js';
-import '../utils-86d65b96.js';
+import '../topics-d8d10f83.js';
+import '../utils-0c09801e.js';
 import './Avatar.js';
 import './ImageRenderer.js';
 import './Icon.js';
@@ -24,28 +24,28 @@ import './Button.js';
 import '../withSendbird.js';
 
 function MentionLabel(props) {
-  var _a, _b, _c;
-  var mentionTemplate = props.mentionTemplate,
-    mentionedUserId = props.mentionedUserId,
-    mentionedUserNickname = props.mentionedUserNickname,
-    isByMe = props.isByMe;
-  var mentionRef = 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 = useState(),
-    user = _d[0],
-    setUser = _d[1];
-  var fetchUser = 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 = 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] = useState();
+  const fetchUser = 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]);
       }
@@ -53,40 +53,37 @@ function MentionLabel(props) {
     });
   }, [sdk, mentionedUserId]);
   return /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        className: "\n            sendbird-word__mention\n            ".concat(amIBeingMentioned ? 'sendbird-word__mention--me' : '', "\n          "),
-        onClick: function () {
-          return fetchUser(toggleDropdown);
-        },
-        ref: mentionRef,
-        "data-userid": mentionedUserId,
-        "data-nickname": mentionedUserNickname,
-        "data-sb-mention": true
-      }, /*#__PURE__*/React__default.createElement(Label, {
-        type: LabelTypography.CAPTION_1,
-        color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
-      }, "".concat(mentionTemplate).concat(mentionedUserNickname)));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(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.createElement(UserProfile, {
-        user: user,
-        onSuccess: closeDropdown,
-        currentUserId: userId
-      }));
-    }
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__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.createElement(Label, {
+      type: LabelTypography.CAPTION_1,
+      color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+    }, `${mentionTemplate}${mentionedUserNickname}`)),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(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.createElement(UserProfile, {
+      user: user,
+      onSuccess: closeDropdown,
+      currentUserId: userId
+    }))
   });
 }
 

package/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          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","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","createElement","ContextMenu","menuTrigger","className","concat","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":"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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":"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"}

package/ui/MentionUserLabel.js

@@ -1,16 +1,16 @@
 import React__default from 'react';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-f4362414.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-d4c78cc0.js';
 
-function MentionUserLabel(_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    children = _a.children,
-    _c = _a.isReverse,
-    isReverse = _c === void 0 ? false : _c,
-    color = _a.color,
-    userId = _a.userId;
+function MentionUserLabel(_ref) {
+  let {
+    className = '',
+    children,
+    isReverse = false,
+    color,
+    userId
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(MENTION_USER_LABEL_CLASSNAME, " ").concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
+    className: `${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`,
     contentEditable: false,
     "data-userid": userId,
     "data-sb-mention": true

package/ui/MentionUserLabel.js.map

@@ -1 +1 @@
-{"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","_a","_b","className","children","_c","isReverse","color","userId","React","createElement","concat","MENTION_USER_LABEL_CLASSNAME","contentEditable"],"mappings":";;;AAawB,SAAAA,gBAAgBA,CAACC,EAMjB,EAAA;MALtBC,EAAc,GAAAD,EAAA,CAAAE,SAAA;IAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA;IACdE,QAAQ,cAAA;IACRC,EAAA,GAAAJ,EAAA,CAAAK,SAAiB;IAAjBA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;IACjBE,KAAK,GAAAN,EAAA,CAAAM,KAAA;IACLC,MAAM,GAAAP,EAAA,CAAAO,MAAA,CAAA;EAEN,oBACEC,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,SAAS,EAAE,EAAG,CAAAQ,MAAA,CAAAC,4BAA4B,cAAIT,SAAS,EAAA,GAAA,CAAA,CAAAQ,MAAA,CAAIL,SAAS,GAAG,SAAS,GAAG,EAAE,cAAIC,KAAK,CAAG;AACjGM,IAAAA,eAAe,EAAE,KAAM;AACvB,IAAA,aAAA,EAAaL,MAAO;IACpB,iBAAiB,EAAA,IAAA;AAAK,GAAA,EAErBJ,QAAQ,CACJ,CAAA;AAEX;;;;"}
+{"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,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEN,IAAAA,SAAS,EAAG,CAAA,EAAEO,4BAA6B,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,QACG,CAAC,CAAA;AAEX;;;;"}