@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/ui/ImageRenderer.js

@@ -1,27 +1,24 @@
+import { c as __spreadArray, _ as __assign } from '../tslib.es6-0c779aab.js';
 import React__default, { useMemo, useState } from 'react';
-import Icon, { IconTypes, IconColors } from './Icon.js';
-import 'prop-types';
 
-var numberToPx = (value => {
-  return typeof value === 'number' ? `${value}px` : value;
+var numberToPx = (function (value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
 });
 
 function getDynamicMinLengthInPx(sideLength, maxSideLength, defaultMinLength) {
-  var _numberToPx;
-  return `min(${maxSideLength !== null && maxSideLength !== void 0 ? maxSideLength : defaultMinLength}, ${(_numberToPx = numberToPx(sideLength)) !== null && _numberToPx !== void 0 ? _numberToPx : defaultMinLength})`;
+  var _a;
+  return "min(".concat(maxSideLength !== null && maxSideLength !== void 0 ? maxSideLength : defaultMinLength, ", ").concat((_a = numberToPx(sideLength)) !== null && _a !== void 0 ? _a : defaultMinLength, ")");
 }
 
-function useDynamicSideLength(_ref) {
-  let {
-    width,
-    height,
-    maxSideLength,
-    defaultMinLength
-  } = _ref;
-  const dynamicMinWidth = useMemo(() => {
+function useDynamicSideLength(_a) {
+  var width = _a.width,
+    height = _a.height,
+    maxSideLength = _a.maxSideLength,
+    defaultMinLength = _a.defaultMinLength;
+  var dynamicMinWidth = useMemo(function () {
     return getDynamicMinLengthInPx(width, maxSideLength, defaultMinLength);
   }, [width]);
-  const dynamicMinHeight = useMemo(() => {
+  var dynamicMinHeight = useMemo(function () {
     return getDynamicMinLengthInPx(height, maxSideLength, defaultMinLength);
   }, [height]);
   return [dynamicMinWidth, dynamicMinHeight];
@@ -33,42 +30,71 @@ function useDynamicSideLength(_ref) {
   if it exists onLoad is called, if not onError is called
   and those properties switch img tag to real purposing element
 */
-
-function getBorderRadiusForImageRenderer() {
-  let circle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  let borderRadius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+function getBorderRadiusForImageRenderer(circle, borderRadius) {
+  if (circle === void 0) {
+    circle = false;
+  }
+  if (borderRadius === void 0) {
+    borderRadius = null;
+  }
   return circle ? '50%' : numberToPx(borderRadius);
 }
-const ImageRenderer = _ref => {
-  let {
-    className = '',
-    url,
-    alt = '',
-    width = null,
-    maxSideLength = null,
-    height = null,
-    circle = false,
-    fixedSize = false,
-    placeHolder = null,
-    defaultComponent = null,
-    borderRadius = null,
-    onLoad = () => {/* noop */},
-    onError = () => {/* noop */},
-    shadeOnHover,
-    isGif = false
-  } = _ref;
-  const [showDefaultComponent, setShowDefaultComponent] = useState(false);
-  const [showPlaceHolder, setShowPlaceHolder] = useState(true);
-  const [dynamicMinWidth, dynamicMinHeight] = useDynamicSideLength({
-    width,
-    height,
-    maxSideLength,
-    defaultMinLength: '400px'
-  });
-  const DefaultComponent = useMemo(() => {
+function getBorderRadiusForMultipleImageRenderer(borderRadius, index, totalCount) {
+  var value = parseInt(borderRadius);
+  var lastIndex = totalCount - 1;
+  var topLeft = index === 0 ? value * 2 : value;
+  var topRight = index === 1 ? value * 2 : value;
+  var bottomRight = index === lastIndex ? value * 2 : value;
+  var bottomLeft = index === lastIndex - 1 ? value * 2 : value;
+  return "".concat(topLeft, "px ").concat(topRight, "px ").concat(bottomRight, "px ").concat(bottomLeft, "px");
+}
+var ImageRenderer = function (_a) {
+  var _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    url = _a.url,
+    _c = _a.alt,
+    alt = _c === void 0 ? '' : _c,
+    _d = _a.width,
+    width = _d === void 0 ? null : _d,
+    _e = _a.maxSideLength,
+    maxSideLength = _e === void 0 ? null : _e,
+    _f = _a.height,
+    height = _f === void 0 ? null : _f,
+    _g = _a.circle,
+    circle = _g === void 0 ? false : _g,
+    _h = _a.fixedSize,
+    fixedSize = _h === void 0 ? false : _h,
+    _j = _a.placeHolder,
+    placeHolder = _j === void 0 ? null : _j,
+    _k = _a.defaultComponent,
+    defaultComponent = _k === void 0 ? null : _k,
+    _l = _a.borderRadius,
+    borderRadius = _l === void 0 ? null : _l,
+    _m = _a.onLoad,
+    onLoad = _m === void 0 ? function () {} : _m,
+    _o = _a.onError,
+    onError = _o === void 0 ? function () {} : _o,
+    shadeOnHover = _a.shadeOnHover,
+    _p = _a.isUploaded,
+    isUploaded = _p === void 0 ? true : _p;
+  var _q = useState(false),
+    showDefaultComponent = _q[0],
+    setShowDefaultComponent = _q[1];
+  var _r = useState(true),
+    showPlaceHolder = _r[0],
+    setShowPlaceHolder = _r[1];
+  var _s = useDynamicSideLength({
+      width: width,
+      height: height,
+      maxSideLength: maxSideLength,
+      defaultMinLength: '400px'
+    }),
+    dynamicMinWidth = _s[0],
+    dynamicMinHeight = _s[1];
+  var DefaultComponent = useMemo(function () {
     return typeof defaultComponent === 'function' ? defaultComponent() : defaultComponent;
   }, [defaultComponent]);
-  const PlaceHolder = useMemo(() => {
+  var PlaceHolder = useMemo(function () {
     return placeHolder && typeof placeHolder === 'function' ? placeHolder({
       style: {
         width: '100%',
@@ -82,25 +108,25 @@ const ImageRenderer = _ref => {
       }
     }) : null;
   }, [placeHolder]);
-  const HiddenImageLoader = useMemo(() => {
+  var HiddenImageLoader = useMemo(function () {
     setShowDefaultComponent(false);
     // reset the state when url is changed
     return /*#__PURE__*/React__default.createElement("img", {
       className: "sendbird-image-renderer__hidden-image-loader",
       src: url,
       alt: alt,
-      onLoad: () => {
+      onLoad: function () {
         setShowPlaceHolder(false);
         onLoad();
       },
-      onError: () => {
+      onError: function () {
         setShowDefaultComponent(true);
         onError();
       }
     });
   }, [url]);
   return dynamicMinWidth && dynamicMinHeight && /*#__PURE__*/React__default.createElement("div", {
-    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-image-renderer'].join(' '),
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-image-renderer'], false).join(' '),
     style: {
       width: '100%',
       minWidth: dynamicMinWidth,
@@ -118,25 +144,18 @@ const ImageRenderer = _ref => {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
       backgroundSize: 'cover',
-      backgroundImage: `url(${url})`,
+      backgroundImage: "url(".concat(url, ")"),
       borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius)
     }
   }), HiddenImageLoader, shadeOnHover && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-multiple-files-image-renderer__image-cover",
-    style: {
+    style: __assign({
       borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius)
-    }
-  }), isGif && /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-multiple-files-image-renderer__icon-wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-multiple-files-image-renderer__icon-wrapper__icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.GIF,
-    fillColor: IconColors.THUMBNAIL_ICON,
-    width: "34px",
-    height: "34px"
-  }))));
+    }, isUploaded ? {} : {
+      display: 'inline-flex'
+    })
+  }));
 };
 
-export { ImageRenderer as default, getBorderRadiusForImageRenderer };
+export { ImageRenderer as default, getBorderRadiusForImageRenderer, getBorderRadiusForMultipleImageRenderer };
 //# sourceMappingURL=ImageRenderer.js.map

package/ui/ImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.js","sources":["../../src/utils/numberToPx.ts","../../src/ui/ImageRenderer/utils.ts","../../src/ui/ImageRenderer/useDynamicSideLength.ts","../../src/ui/ImageRenderer/index.tsx"],"sourcesContent":["export default (value: string | number): string => {\n  return typeof value === 'number' ? `${value}px` : value;\n};\n","import numberToPx from '../../utils/numberToPx';\n\nexport function getDynamicMinLengthInPx(\n  sideLength: string | number,\n  maxSideLength: string | null,\n  defaultMinLength: string,\n): string {\n  return `min(${maxSideLength ?? defaultMinLength}, ${numberToPx(sideLength) ?? defaultMinLength})`;\n}\n","import { useMemo } from 'react';\nimport { getDynamicMinLengthInPx } from './utils';\n\ninterface DynamicSideLengthProps {\n  width: string | number;\n  height: string | number;\n  maxSideLength: string | null;\n  defaultMinLength: string\n}\n\nexport function useDynamicSideLength({\n  width,\n  height,\n  maxSideLength,\n  defaultMinLength,\n}: DynamicSideLengthProps): string[] {\n\n  const dynamicMinWidth = useMemo(() => {\n    return getDynamicMinLengthInPx(width, maxSideLength, defaultMinLength);\n  }, [width]);\n\n  const dynamicMinHeight = useMemo(() => {\n    return getDynamicMinLengthInPx(height, maxSideLength, defaultMinLength);\n  }, [height]);\n\n  return [dynamicMinWidth, dynamicMinHeight];\n}\n","import React, { useState, useMemo, ReactElement } from 'react';\n\nimport './index.scss';\nimport numberToPx from '../../utils/numberToPx';\nimport { useDynamicSideLength } from './useDynamicSideLength';\nimport Icon, { IconTypes, IconColors } from '../Icon';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\nexport function getBorderRadiusForImageRenderer(\n  circle = false,\n  borderRadius: string | number = null,\n): string {\n  return circle ? '50%' : numberToPx(borderRadius);\n}\n\nexport interface ImageRendererProps {\n  className?: string | Array<string>;\n  url: string;\n  alt?: string;\n  width?: string | number;\n  maxSideLength?: string;\n  height?: string | number;\n  circle?: boolean;\n  fixedSize?: boolean;\n  placeHolder?: ((props: { style: { [key: string]: string | number } }) => ReactElement) | ReactElement;\n  defaultComponent?: (() => ReactElement) | ReactElement;\n  borderRadius?: string | number;\n  onLoad?: () => void;\n  onError?: () => void;\n  shadeOnHover?: boolean;\n  isGif?: boolean;\n}\n\nconst ImageRenderer = ({\n  className = '',\n  url,\n  alt = '',\n  width = null,\n  maxSideLength = null,\n  height = null,\n  circle = false,\n  fixedSize = false,\n  placeHolder = null,\n  defaultComponent = null,\n  borderRadius = null,\n  onLoad = () => { /* noop */ },\n  onError = () => { /* noop */ },\n  shadeOnHover,\n  isGif = false,\n}: ImageRendererProps): ReactElement => {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n  const [dynamicMinWidth, dynamicMinHeight] = useDynamicSideLength({\n    width,\n    height,\n    maxSideLength,\n    defaultMinLength: '400px',\n  });\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: dynamicMinWidth,\n          maxWidth: fixedSize ? dynamicMinWidth : '400px',\n          height: dynamicMinHeight,\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 dynamicMinWidth && dynamicMinHeight && (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: dynamicMinWidth,\n        maxWidth: fixedSize ? dynamicMinWidth : '400px',\n        height: dynamicMinHeight,\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: dynamicMinWidth,\n                maxWidth: fixedSize ? dynamicMinWidth : '400px',\n                height: dynamicMinHeight,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n      {\n        shadeOnHover && <div\n        className=\"sendbird-multiple-files-image-renderer__image-cover\"\n        style={{\n          borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),\n        }}\n      />\n      }\n      {\n        isGif && (\n          <div className=\"sendbird-multiple-files-image-renderer__icon-wrapper\">\n            <div className=\"sendbird-multiple-files-image-renderer__icon-wrapper__icon\">\n              <Icon\n                type={IconTypes.GIF}\n                fillColor={IconColors.THUMBNAIL_ICON}\n                width=\"34px\"\n                height=\"34px\"\n              />\n            </div>\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default ImageRenderer;\n"],"names":["value","getDynamicMinLengthInPx","sideLength","maxSideLength","defaultMinLength","_numberToPx","numberToPx","useDynamicSideLength","_ref","width","height","dynamicMinWidth","useMemo","dynamicMinHeight","getBorderRadiusForImageRenderer","circle","arguments","length","undefined","borderRadius","ImageRenderer","className","url","alt","fixedSize","placeHolder","defaultComponent","onLoad","onError","shadeOnHover","isGif","showDefaultComponent","setShowDefaultComponent","useState","showPlaceHolder","setShowPlaceHolder","DefaultComponent","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","createElement","src","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","Icon","type","IconTypes","GIF","fillColor","IconColors","THUMBNAIL_ICON"],"mappings":"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"}
+{"version":3,"file":"ImageRenderer.js","sources":["../../src/utils/numberToPx.ts","../../src/ui/ImageRenderer/utils.ts","../../src/ui/ImageRenderer/useDynamicSideLength.ts","../../src/ui/ImageRenderer/index.tsx"],"sourcesContent":["export default (value: string | number): string => {\n  return typeof value === 'number' ? `${value}px` : value;\n};\n","import numberToPx from '../../utils/numberToPx';\n\nexport function getDynamicMinLengthInPx(\n  sideLength: string | number,\n  maxSideLength: string | null,\n  defaultMinLength: string,\n): string {\n  return `min(${maxSideLength ?? defaultMinLength}, ${numberToPx(sideLength) ?? defaultMinLength})`;\n}\n","import { useMemo } from 'react';\nimport { getDynamicMinLengthInPx } from './utils';\n\ninterface DynamicSideLengthProps {\n  width: string | number;\n  height: string | number;\n  maxSideLength: string | null;\n  defaultMinLength: string\n}\n\nexport function useDynamicSideLength({\n  width,\n  height,\n  maxSideLength,\n  defaultMinLength,\n}: DynamicSideLengthProps): string[] {\n\n  const dynamicMinWidth = useMemo(() => {\n    return getDynamicMinLengthInPx(width, maxSideLength, defaultMinLength);\n  }, [width]);\n\n  const dynamicMinHeight = useMemo(() => {\n    return getDynamicMinLengthInPx(height, maxSideLength, defaultMinLength);\n  }, [height]);\n\n  return [dynamicMinWidth, dynamicMinHeight];\n}\n","import React, { useState, useMemo, ReactElement } from 'react';\n\nimport './index.scss';\nimport numberToPx from '../../utils/numberToPx';\nimport { useDynamicSideLength } from './useDynamicSideLength';\n\n/*\n  ImageRenderer displays image with url or source\n  it checks if the source exist with img tag first\n  if it exists onLoad is called, if not onError is called\n  and those properties switch img tag to real purposing element\n*/\n\nexport function getBorderRadiusForImageRenderer(\n  circle = false,\n  borderRadius: string | number = null,\n): string {\n  return circle ? '50%' : numberToPx(borderRadius);\n}\n\nexport function getBorderRadiusForMultipleImageRenderer(\n  borderRadius: string | number,\n  index: number,\n  totalCount: number,\n): string {\n  const value: number = parseInt(borderRadius);\n  const lastIndex: number = totalCount - 1;\n  const topLeft: string = index === 0 ? value * 2 : value;\n  const topRight: string = index === 1 ? value * 2 : value;\n  const bottomRight: string = index === lastIndex ? value * 2 : value;\n  const bottomLeft: string = index === lastIndex - 1 ? value * 2 : value;\n  return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;\n}\n\nexport interface ImageRendererProps {\n  className?: string | Array<string>;\n  url: string;\n  alt?: string;\n  width?: string | number;\n  maxSideLength?: string;\n  height?: string | number;\n  circle?: boolean;\n  fixedSize?: boolean;\n  placeHolder?: ((props: { style: { [key: string]: string | number } }) => ReactElement) | ReactElement;\n  defaultComponent?: (() => ReactElement) | ReactElement;\n  borderRadius?: string | number;\n  onLoad?: () => void;\n  onError?: () => void;\n  shadeOnHover?: boolean;\n  isUploaded?: boolean;\n}\n\nconst ImageRenderer = ({\n  className = '',\n  url,\n  alt = '',\n  width = null,\n  maxSideLength = null,\n  height = null,\n  circle = false,\n  fixedSize = false,\n  placeHolder = null,\n  defaultComponent = null,\n  borderRadius = null,\n  onLoad = () => { /* noop */ },\n  onError = () => { /* noop */ },\n  shadeOnHover,\n  isUploaded = true,\n}: ImageRendererProps): ReactElement => {\n  const [showDefaultComponent, setShowDefaultComponent] = useState(false);\n  const [showPlaceHolder, setShowPlaceHolder] = useState(true);\n  const [dynamicMinWidth, dynamicMinHeight] = useDynamicSideLength({\n    width,\n    height,\n    maxSideLength,\n    defaultMinLength: '400px',\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: dynamicMinWidth,\n          maxWidth: fixedSize ? dynamicMinWidth : '400px',\n          height: dynamicMinHeight,\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 dynamicMinWidth && dynamicMinHeight && (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-image-renderer',\n      ].join(' ')}\n      style={{\n        width: '100%',\n        minWidth: dynamicMinWidth,\n        maxWidth: fixedSize ? dynamicMinWidth : '400px',\n        height: dynamicMinHeight,\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: dynamicMinWidth,\n                maxWidth: fixedSize ? dynamicMinWidth : '400px',\n                height: dynamicMinHeight,\n                position: 'absolute',\n                backgroundRepeat: 'no-repeat',\n                backgroundPosition: 'center',\n                backgroundSize: 'cover',\n                backgroundImage: `url(${url})`,\n                borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),\n              }}\n            />\n          )\n      }\n      {HiddenImageLoader}\n      {\n        shadeOnHover && <div\n          className=\"sendbird-multiple-files-image-renderer__image-cover\"\n          style={{\n            ...{ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) },\n            ...(isUploaded ? {} : { display: 'inline-flex' }),\n          }}\n        />\n      }\n    </div>\n  );\n};\n\nexport default ImageRenderer;\n"],"names":["value","concat","getDynamicMinLengthInPx","sideLength","maxSideLength","defaultMinLength","_a","numberToPx","useDynamicSideLength","width","height","dynamicMinWidth","useMemo","dynamicMinHeight","getBorderRadiusForImageRenderer","circle","borderRadius","getBorderRadiusForMultipleImageRenderer","index","totalCount","parseInt","lastIndex","topLeft","topRight","bottomRight","bottomLeft","ImageRenderer","_b","className","url","_c","alt","_d","_e","_f","_g","_h","fixedSize","_j","placeHolder","_k","defaultComponent","_l","_m","onLoad","_o","onError","shadeOnHover","_p","isUploaded","_q","useState","showDefaultComponent","setShowDefaultComponent","_r","showPlaceHolder","setShowPlaceHolder","_s","DefaultComponent","PlaceHolder","style","minWidth","maxWidth","position","display","justifyContent","alignItems","HiddenImageLoader","React","createElement","src","__spreadArray","Array","isArray","join","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage"],"mappings":"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"}

package/ui/Input.js

@@ -1,27 +1,25 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-aa520474.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-12103973.js';
 import 'prop-types';
-import '../stringSet-2814bf17.js';
+import '../stringSet-1106c8ec.js';
 
-const InputLabel = _ref => {
-  let {
-    children
-  } = _ref;
+var InputLabel = function (_a) {
+  var children = _a.children;
   return /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-input-label",
     type: LabelTypography.CAPTION_3,
     color: LabelColors.ONBACKGROUND_1
   }, children);
 };
-const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-    name,
-    required,
-    disabled,
-    value,
-    placeHolder
-  } = props;
-  const [inputValue, setInputValue] = useState(value);
+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];
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-input"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -31,7 +29,7 @@ const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     required: required,
     disabled: disabled,
     value: inputValue,
-    onChange: e => {
+    onChange: function (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","_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,QAAQ,CACH,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;GACA,CAAA,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,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","_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,QACI,CAAC,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,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-aa520474.js';
-import '../stringSet-2814bf17.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-12103973.js';
+import '../stringSet-1106c8ec.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-aa520474.js';
-import '../stringSet-2814bf17.js';
+import { d as changeColorToClassName, L as Label, a as LabelTypography, b as LabelColors } from '../index-12103973.js';
+import '../stringSet-1106c8ec.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,19 +1,21 @@
+import { c as __spreadArray } from '../tslib.es6-0c779aab.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
 import 'prop-types';
 
-function Loader(_ref) {
-  let {
-    className = '',
-    width = '26px',
-    height = '26px',
-    children
-  } = _ref;
+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;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-loader'].join(' '),
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-loader'], false).join(' '),
     style: {
-      width: typeof width === 'string' ? width : `${width}px`,
-      height: typeof height === 'string' ? height : `${height}px`
+      width: typeof width === 'string' ? width : "".concat(width, "px"),
+      height: typeof height === 'string' ? height : "".concat(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","_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,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","_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,CAIhB,CAAC,CAAA;AAEV;;;;"}

package/ui/MentionLabel.js

@@ -1,52 +1,53 @@
 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-aa520474.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-12103973.js';
 import UserProfile from './UserProfile.js';
-import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../_rollupPluginBabelHelpers-50c9576f.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import '../tslib.es6-0c779aab.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-16373bba.js';
-import '../index-5d6a0f12.js';
+import '../uuid-3c77ef7b.js';
+import '../index-fc1642cb.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index.module-60af77d3.js';
+import '../index-c6095960.js';
 import 'prop-types';
-import '../stringSet-2814bf17.js';
-import '../LocalizationContext-2463058b.js';
-import '../index-7700a436.js';
-import '../UserProfileContext-4ae968eb.js';
+import '../stringSet-1106c8ec.js';
+import '../LocalizationContext-d18a86d8.js';
+import '../index-d3f61405.js';
+import '../UserProfileContext-26e71f9a.js';
 import '../sendbirdSelectors.js';
-import '../topics-5659403d.js';
-import '../utils-407da489.js';
+import '../pubSub/topics.js';
+import '../utils-74c161a0.js';
 import './Avatar.js';
 import './ImageRenderer.js';
 import './Icon.js';
 import './Button.js';
+import '../types-4ffc52f6.js';
 import '../withSendbird.js';
 
 function MentionLabel(props) {
-  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)) {
+  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)) {
       toggleDropdown();
       return;
     }
-    const query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
+    var query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
       userIdsFilter: [mentionedUserId]
     });
-    query.next().then(members => {
+    query.next().then(function (members) {
       if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
         setUser(members[0]);
       }
@@ -54,37 +55,40 @@ function MentionLabel(props) {
     });
   }, [sdk, mentionedUserId]);
   return /*#__PURE__*/React__default.createElement(ContextMenu, {
-    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
-    }))
+    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
+      }));
+    }
   });
 }