@sendbird/uikit-react 3.1.2 → 3.1.3

package/ui/ContextMenu.js

@@ -1,96 +1,81 @@
-import React__default, { useRef, useState, useEffect } from 'react';
-import { _ as __assign } from '../tslib.es6-710c6267.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { b as __extends, _ as __assign } from '../tslib.es6-72a2f141.js';
 import { createPortal } from 'react-dom';
 import SortByRow from './SortByRow.js';
-import { k as getClassName } from '../index-03ccaf35.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
-import '../uuid-60ae25c1.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import { k as getClassName } from '../index-24a5ab49.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
+import '../uuid-8a4db02f.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
+import '../stringSet-c4a61372.js';
 
-var MenuItems$1 = function MenuItems(_a) {
-  var className = _a.className,
-      children = _a.children,
-      _b = _a.style,
-      style = _b === void 0 ? {} : _b,
-      parentRef = _a.parentRef,
-      parentContainRef = _a.parentContainRef,
-      _c = _a.openLeft,
-      openLeft = _c === void 0 ? false : _c,
-      closeDropdown = _a.closeDropdown;
-  var menuRef = useRef(null);
+var MenuItems$1 =
+/** @class */
+function (_super) {
+  __extends(MenuItems, _super);
 
-  var _d = useState({
-    left: 0,
-    top: 0
-  }),
-      menuStyle = _d[0],
-      setMenuStyle = _d[1];
-  /* showParent & hideParent */
+  function MenuItems(props) {
+    var _this = _super.call(this, props) || this;
 
+    _this.menuRef = /*#__PURE__*/React__default.createRef();
 
-  useEffect(function () {
-    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
-      parentContainRef.current.classList.add('sendbird-reactions--pressed');
-    }
+    _this.setupEvents = function () {
+      var closeDropdown = _this.props.closeDropdown;
+      var menuRef = _this.menuRef;
 
-    return function () {
-      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
-        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
-      }
-    };
-  }, []);
-  /* setupEvents & cleanupEvents */
+      var handleClickOutside = function handleClickOutside(event) {
+        var _a, _b;
 
-  useEffect(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      var _a, _b;
+        if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+          closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        }
+      };
 
-      if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = menuRef === null || menuRef === void 0 ? void 0 : (_a = menuRef.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
-        closeDropdown();
-      }
-    };
+      _this.setState({
+        handleClickOutside: handleClickOutside
+      });
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.addEventListener('mousedown', handleClickOutside);
     };
-  }, []);
-  /* getMenuPosition */
-
-  useEffect(function () {
-    var _a;
 
-    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    var x = parentRect.x || parentRect.left;
-    var y = parentRect.y || parentRect.top;
-    var menuStyle = {
-      top: y,
-      left: x
+    _this.cleanUpEvents = function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
     };
 
-    if (!(menuRef === null || menuRef === void 0 ? void 0 : menuRef.current)) {
-      setMenuStyle(menuStyle);
-    } else {
-      var innerWidth_1 = window.innerWidth,
-          innerHeight_1 = window.innerHeight;
-      var rect = menuRef.current.getBoundingClientRect();
+    _this.getMenuPosition = function () {
+      var _a, _b;
 
-      if (y + rect.height > innerHeight_1) {
+      var _c = _this.props,
+          parentRef = _c.parentRef,
+          openLeft = _c.openLeft;
+      var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+      var x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
+      var y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
+      var menuStyle = {
+        top: y,
+        left: x
+      };
+      if (!_this.menuRef.current) return menuStyle;
+      var innerWidth = window.innerWidth,
+          innerHeight = window.innerHeight;
+
+      var rect = _this.menuRef.current.getBoundingClientRect();
+
+      if (y + rect.height > innerHeight) {
         menuStyle.top -= rect.height;
       }
 
-      if (x + rect.width > innerWidth_1 && !openLeft) {
+      if (x + rect.width > innerWidth && !openLeft) {
         menuStyle.left -= rect.width;
       }
 
       if (menuStyle.top < 0) {
-        menuStyle.top = rect.height < innerHeight_1 ? (innerHeight_1 - rect.height) / 2 : 0;
+        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
       }
 
       if (menuStyle.left < 0) {
-        menuStyle.left = rect.width < innerWidth_1 ? (innerWidth_1 - rect.width) / 2 : 0;
+        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
       }
 
       menuStyle.top += 32;
@@ -101,24 +86,50 @@ var MenuItems$1 = function MenuItems(_a) {
         menuStyle.left -= padding;
       }
 
-      setMenuStyle(menuStyle);
-    }
-  }, []);
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", {
-    className: Array.isArray(className) ? className.join(' ') : className
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-dropdown__menu-backdrop"
-  }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "sendbird-dropdown__menu",
-    ref: menuRef,
-    style: __assign({
-      display: 'inline-block',
-      position: 'fixed',
-      left: "".concat(Math.round(menuStyle.left), "px"),
-      top: "".concat(Math.round(menuStyle.top), "px")
-    }, style)
-  }, children)), document.getElementById('sendbird-dropdown-portal'));
-};
+      _this.setState({
+        menuStyle: menuStyle
+      });
+
+      return menuStyle;
+    };
+
+    _this.state = {
+      menuStyle: {},
+      handleClickOutside: function handleClickOutside() {}
+    };
+    return _this;
+  }
+
+  MenuItems.prototype.componentDidMount = function () {
+    this.setupEvents();
+    this.getMenuPosition();
+  };
+
+  MenuItems.prototype.componentWillUnmount = function () {
+    this.cleanUpEvents();
+  };
+
+  MenuItems.prototype.render = function () {
+    var menuStyle = this.state.menuStyle;
+    var _a = this.props,
+        children = _a.children,
+        style = _a.style;
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-dropdown__menu-backdrop"
+    }), /*#__PURE__*/React__default.createElement("ul", {
+      className: "sendbird-dropdown__menu",
+      ref: this.menuRef,
+      style: __assign({
+        display: 'inline-block',
+        position: 'fixed',
+        left: "".concat(Math.round(menuStyle.left), "px"),
+        top: "".concat(Math.round(menuStyle.top), "px")
+      }, style)
+    }, children)), document.getElementById('sendbird-dropdown-portal'));
+  };
+
+  return MenuItems;
+}(React__default.Component);
 
 var EmojiListItems$1 = function EmojiListItems(_a) {
   var children = _a.children,
@@ -281,7 +292,10 @@ function ContextMenu(_a) {
       setShowMenu = _b[1];
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-context-menu"
+    className: "sendbird-context-menu",
+    style: {
+      display: 'inline'
+    }
   }, menuTrigger(function () {
     return setShowMenu(!showMenu);
   }), showMenu && menuItems(function () {

package/ui/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../src/ui/ContextMenu/MenuItems.tsx","../../src/ui/ContextMenu/EmojiListItems.tsx","../../src/ui/ContextMenu/index.tsx"],"sourcesContent":["import React, { ReactElement, RefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype MenuStyle = { left: number, top: number };\nexport interface MenuItemsProps {\n  className?: string | Array<string>;\n  children?: ReactElement;\n  style?: { [key: string]: string };\n  parentRef: RefObject<HTMLDivElement>;\n  parentContainRef?: RefObject<HTMLDivElement>;\n  openLeft?: boolean;\n  closeDropdown: () => void;\n}\n\nconst MenuItems = ({\n  className,\n  children,\n  style = {},\n  parentRef,\n  parentContainRef,\n  openLeft = false,\n  closeDropdown,\n}: MenuItemsProps): ReactElement => {\n  const menuRef = useRef(null);\n  const [menuStyle, setMenuStyle] = useState<MenuStyle>({ left: 0, top: 0 });\n\n  /* showParent & hideParent */\n  useEffect(() => {\n    if (parentContainRef && parentContainRef?.current) {\n      parentContainRef.current.classList.add('sendbird-reactions--pressed');\n    }\n    return () => {\n      if (parentContainRef && parentContainRef?.current) {\n        parentContainRef.current.classList.remove('sendbird-reactions--pressed');\n      }\n    };\n  }, []);\n\n  /* setupEvents & cleanupEvents */\n  useEffect(() => {\n    const handleClickOutside = (event) => {\n      if (menuRef?.current && !menuRef?.current.contains?.(event.target)) {\n        closeDropdown();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  /* getMenuPosition */\n  useEffect(() => {\n    const parentRect = parentRef?.current?.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const menuStyle = {\n      top: y,\n      left: x,\n    };\n    if (!menuRef?.current) {\n      setMenuStyle(menuStyle);\n    } else {\n      const { innerWidth, innerHeight } = window;\n      const rect = menuRef.current.getBoundingClientRect();\n      if (y + rect.height > innerHeight) {\n        menuStyle.top -= rect.height;\n      }\n      if (x + rect.width > innerWidth && !openLeft) {\n        menuStyle.left -= rect.width;\n      }\n      if (menuStyle.top < 0) {\n        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;\n      }\n      if (menuStyle.left < 0) {\n        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n      }\n      menuStyle.top += 32;\n      if (openLeft) {\n        const padding = Number.isNaN(rect.width - 30)\n          ? 108 // default\n          : rect.width - 30;\n        menuStyle.left -= padding;\n      }\n      setMenuStyle(menuStyle);\n    }\n  }, []);\n\n  return createPortal(\n    (\n      <div className={Array.isArray(className) ? className.join(' ') : className}>\n        <div className=\"sendbird-dropdown__menu-backdrop\" />\n        <ul\n          className=\"sendbird-dropdown__menu\"\n          ref={menuRef}\n          style={{\n            display: 'inline-block',\n            position: 'fixed',\n            left: `${Math.round(menuStyle.left)}px`,\n            top: `${Math.round(menuStyle.top)}px`,\n            ...style,\n          }}\n        >\n          {children}\n        </ul>\n      </div>\n    ),\n    document.getElementById('sendbird-dropdown-portal')\n  );\n};\n\nexport default MenuItems;\n","import React, { ReactElement, RefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport SortByRow from '../SortByRow';\n\ntype SpaceFromTrigger = { x: number, y: number };\ntype ReactionStyle = { left: number, top: number };\nexport interface EmojiListItemsProps {\n  closeDropdown: () => void;\n  children: ReactElement;\n  parentRef: RefObject<HTMLDivElement>;\n  parentContainRef: RefObject<HTMLDivElement>;\n  spaceFromTrigger?: SpaceFromTrigger;\n}\n\nconst EmojiListItems = ({\n  children,\n  parentRef,\n  parentContainRef,\n  spaceFromTrigger = { x: 0, y: 0 },\n  closeDropdown,\n}: EmojiListItemsProps): ReactElement => {\n  const [reactionStyle, setReactionStyle] = useState<ReactionStyle>({ left: 0, top: 0 });\n  const reactionRef = useRef(null);\n\n  /* showParent & hideParent */\n  useEffect(() => {\n    if (parentContainRef && parentContainRef?.current) {\n      parentContainRef.current.classList.add('sendbird-reactions--pressed');\n    }\n    return () => {\n      if (parentContainRef && parentContainRef?.current) {\n        parentContainRef.current.classList.remove('sendbird-reactions--pressed');\n      }\n    };\n  }, []);\n\n  /* setupEvents & cleanupEvents */\n  useEffect(() => {\n    const handleClickOutSide = (event) => {\n      if (reactionRef?.current && !reactionRef?.current?.contains?.(event.target)) {\n        closeDropdown();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutSide);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutSide);\n    };\n  }, []);\n\n  /* getBarPosition */\n  useEffect(() => {\n    const spaceFromTriggerX = spaceFromTrigger?.x || 0;\n    const spaceFromTriggerY = spaceFromTrigger?.y || 0;\n    const parentRect = parentRef?.current?.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const reactionStyle = {\n      top: y,\n      left: x,\n    };\n    if (!reactionRef?.current) {\n      setReactionStyle(reactionStyle);\n    } else {\n      const rect = reactionRef?.current?.getBoundingClientRect();\n      if (reactionStyle.top < rect.height) {\n        reactionStyle.top += parentRect.height;\n        reactionStyle.top += spaceFromTriggerY;\n      } else {\n        reactionStyle.top -= rect.height;\n        reactionStyle.top -= spaceFromTriggerY;\n      }\n      reactionStyle.left -= rect.width / 2;\n      reactionStyle.left += (parentRect.height / 2) - 2;\n      reactionStyle.left += spaceFromTriggerX;\n      const maximumLeft = window.innerWidth - rect.width;\n      if (maximumLeft < reactionStyle.left) {\n        reactionStyle.left = maximumLeft;\n      }\n      if (reactionStyle.left < 0) {\n        reactionStyle.left = 0;\n      }\n      setReactionStyle(reactionStyle);\n    }\n  }, []);\n\n  return (\n    createPortal(\n      <>\n        <div className=\"sendbird-dropdown__menu-backdrop\" />\n        <ul\n          className=\"sendbird-dropdown__reaction-bar\"\n          ref={reactionRef}\n          style={{\n            display: 'inline-block',\n            position: 'fixed',\n            left: `${Math.round(reactionStyle.left)}px`,\n            top: `${Math.round(reactionStyle.top)}px`,\n          }}\n        >\n          <SortByRow\n            className=\"sendbird-dropdown__reaction-bar__row\"\n            maxItemCount={8}\n            itemWidth={44}\n            itemHeight={40}\n          >\n            {children}\n          </SortByRow>\n        </ul>\n      </>,\n      document.getElementById('sendbird-emoji-list-portal'),\n    )\n  );\n};\n\nexport default EmojiListItems;\n","import React, { ReactElement, MouseEvent, useState } from 'react';\nimport './index.scss';\n\nimport _MenuItems from './MenuItems';\nimport _EmojiListItems from './EmojiListItems';\n\nimport { getClassName } from '../../utils';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nconst ENTER_KEY = 13;\n\nexport const MenuItems = _MenuItems;\nexport const EmojiListItems = _EmojiListItems;\n\nexport interface MenuItemProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  onClick?: (e: MouseEvent<HTMLLIElement>) => void;\n  disable?: boolean;\n}\nexport const MenuItem = ({\n  className = '',\n  children,\n  onClick,\n  disable = false,\n}: MenuItemProps): ReactElement => {\n  const handleClickEvent = (e) => {\n    if (!disable && onClick) {\n      onClick?.(e);\n    }\n  };\n  return (\n    <li\n      className={getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : ''])}\n      role=\"menuitem\"\n      onClick={handleClickEvent}\n      onKeyPress={(e) => { if (e.keyCode === ENTER_KEY) handleClickEvent(e); }}\n      tabIndex={0}\n    >\n      <Label\n        className=\"sendbird-dropdown__menu-item__text\"\n        type={LabelTypography.SUBTITLE_2}\n        color={disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1}\n      >\n        {children}\n      </Label>\n    </li>\n  );\n};\n\nexport const MenuRoot = (): ReactElement => <div id=\"sendbird-dropdown-portal\" />;\nexport const EmojiReactionListRoot = (): ReactElement => <div id=\"sendbird-emoji-list-portal\" />;\n\ntype MenuDisplayingFunc = () => void;\nexport interface ContextMenuProps {\n  menuTrigger: (MenuDisplayingFunc) => ReactElement;\n  menuItems: (MenuDisplayingFunc) => ReactElement;\n}\nexport default function ContextMenu({\n  menuTrigger,\n  menuItems,\n}: ContextMenuProps): ReactElement {\n  const [showMenu, setShowMenu] = useState(false);\n  return (\n    <div className=\"sendbird-context-menu\">\n      {menuTrigger(() => setShowMenu(!showMenu))}\n      {showMenu && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n"],"names":["MenuItems","_a","className","children","_b","style","parentRef","parentContainRef","_c","openLeft","closeDropdown","menuRef","useRef","_d","useState","left","top","menuStyle","setMenuStyle","useEffect","current","classList","add","remove","handleClickOutside","event","contains","target","document","addEventListener","removeEventListener","parentRect","getBoundingClientRect","x","y","innerWidth_1","window","innerHeight_1","rect","height","width","padding","Number","isNaN","createPortal","React","Array","isArray","join","display","position","Math","round","getElementById","EmojiListItems","spaceFromTrigger","reactionStyle","setReactionStyle","reactionRef","handleClickOutSide","spaceFromTriggerX","spaceFromTriggerY","maximumLeft","innerWidth","ENTER_KEY","_MenuItems","_EmojiListItems","MenuItem","onClick","disable","handleClickEvent","e","getClassName","keyCode","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","MenuRoot","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","showMenu","setShowMenu"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","sources":["../../src/ui/ContextMenu/MenuItems.tsx","../../src/ui/ContextMenu/EmojiListItems.tsx","../../src/ui/ContextMenu/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface MenuItemsProps {\n  style?: Record<string, string>;\n  openLeft?: boolean;\n  children: React.ReactElement;\n  parentRef: React.RefObject<HTMLDivElement>;\n  parentContainRef: React.RefObject<HTMLDivElement>;\n  closeDropdown: () => void;\n}\n\ntype MenuStyleType = { top?: number, left?: number };\ninterface MenuItemsState {\n  menuStyle: MenuStyleType;\n  handleClickOutside: (e: MouseEvent) => void;\n}\n\nexport default class MenuItems extends React.Component<MenuItemsProps, MenuItemsState> {\n  constructor(props: MenuItemsProps) {\n    super(props);\n    this.state = {\n      menuStyle: {},\n      handleClickOutside: () => {/* noop */ },\n    };\n  }\n  menuRef: React.RefObject<HTMLUListElement> = React.createRef();\n\n  componentDidMount(): void {\n    this.setupEvents();\n    this.getMenuPosition();\n  }\n\n  componentWillUnmount(): void {\n    this.cleanUpEvents();\n  }\n\n  setupEvents = (): void => {\n    const { closeDropdown } = this.props;\n    const { menuRef } = this;\n    const handleClickOutside = (event) => {\n      if (menuRef?.current && !menuRef?.current?.contains?.(event.target)) {\n        closeDropdown?.();\n      }\n    };\n    this.setState({\n      handleClickOutside,\n    });\n\n    document.addEventListener('mousedown', handleClickOutside);\n  }\n\n  cleanUpEvents = (): void => {\n    const {\n      handleClickOutside,\n    } = this.state;\n    document.removeEventListener('mousedown', handleClickOutside);\n  }\n\n  getMenuPosition = (): MenuStyleType => {\n    const { parentRef, openLeft } = this.props;\n    const parentRect = parentRef?.current?.getBoundingClientRect?.();\n    const x = parentRect?.x || parentRect?.left || 0;\n    const y = parentRect?.y || parentRect?.top || 0;\n    const menuStyle = {\n      top: y,\n      left: x,\n    };\n    if (!this.menuRef.current) return menuStyle;\n    const { innerWidth, innerHeight } = window;\n    const rect = this.menuRef.current.getBoundingClientRect();\n    if (y + rect.height > innerHeight) {\n      menuStyle.top -= rect.height;\n    }\n    if (x + rect.width > innerWidth && !openLeft) {\n      menuStyle.left -= rect.width;\n    }\n    if (menuStyle.top < 0) {\n      menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;\n    }\n    if (menuStyle.left < 0) {\n      menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n    }\n    menuStyle.top += 32;\n    if (openLeft) {\n      const padding = Number.isNaN(rect.width - 30)\n        ? 108 // default\n        : rect.width - 30;\n      menuStyle.left -= padding;\n    }\n    this.setState({ menuStyle })\n    return menuStyle;\n  }\n\n  render(): ReactElement {\n    const { menuStyle } = this.state;\n    const { children, style } = this.props;\n    return (\n      createPortal(\n        (\n          <>\n            <div className=\"sendbird-dropdown__menu-backdrop\" />\n            <ul\n              className=\"sendbird-dropdown__menu\"\n              ref={this.menuRef}\n              style={{\n                display: 'inline-block',\n                position: 'fixed',\n                left: `${Math.round(menuStyle.left)}px`,\n                top: `${Math.round(menuStyle.top)}px`,\n                ...style,\n              }}\n            >\n              {children}\n            </ul>\n          </>\n        ),\n        document.getElementById('sendbird-dropdown-portal'),\n      )\n    );\n  }\n}\n","import React, { ReactElement, RefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport SortByRow from '../SortByRow';\n\ntype SpaceFromTrigger = { x: number, y: number };\ntype ReactionStyle = { left: number, top: number };\nexport interface EmojiListItemsProps {\n  closeDropdown: () => void;\n  children: ReactElement;\n  parentRef: RefObject<HTMLDivElement>;\n  parentContainRef: RefObject<HTMLDivElement>;\n  spaceFromTrigger?: SpaceFromTrigger;\n}\n\nconst EmojiListItems = ({\n  children,\n  parentRef,\n  parentContainRef,\n  spaceFromTrigger = { x: 0, y: 0 },\n  closeDropdown,\n}: EmojiListItemsProps): ReactElement => {\n  const [reactionStyle, setReactionStyle] = useState<ReactionStyle>({ left: 0, top: 0 });\n  const reactionRef = useRef(null);\n\n  /* showParent & hideParent */\n  useEffect(() => {\n    if (parentContainRef && parentContainRef?.current) {\n      parentContainRef.current.classList.add('sendbird-reactions--pressed');\n    }\n    return () => {\n      if (parentContainRef && parentContainRef?.current) {\n        parentContainRef.current.classList.remove('sendbird-reactions--pressed');\n      }\n    };\n  }, []);\n\n  /* setupEvents & cleanupEvents */\n  useEffect(() => {\n    const handleClickOutSide = (event) => {\n      if (reactionRef?.current && !reactionRef?.current?.contains?.(event.target)) {\n        closeDropdown();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutSide);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutSide);\n    };\n  }, []);\n\n  /* getBarPosition */\n  useEffect(() => {\n    const spaceFromTriggerX = spaceFromTrigger?.x || 0;\n    const spaceFromTriggerY = spaceFromTrigger?.y || 0;\n    const parentRect = parentRef?.current?.getBoundingClientRect();\n    const x = parentRect.x || parentRect.left;\n    const y = parentRect.y || parentRect.top;\n    const reactionStyle = {\n      top: y,\n      left: x,\n    };\n    if (!reactionRef?.current) {\n      setReactionStyle(reactionStyle);\n    } else {\n      const rect = reactionRef?.current?.getBoundingClientRect();\n      if (reactionStyle.top < rect.height) {\n        reactionStyle.top += parentRect.height;\n        reactionStyle.top += spaceFromTriggerY;\n      } else {\n        reactionStyle.top -= rect.height;\n        reactionStyle.top -= spaceFromTriggerY;\n      }\n      reactionStyle.left -= rect.width / 2;\n      reactionStyle.left += (parentRect.height / 2) - 2;\n      reactionStyle.left += spaceFromTriggerX;\n      const maximumLeft = window.innerWidth - rect.width;\n      if (maximumLeft < reactionStyle.left) {\n        reactionStyle.left = maximumLeft;\n      }\n      if (reactionStyle.left < 0) {\n        reactionStyle.left = 0;\n      }\n      setReactionStyle(reactionStyle);\n    }\n  }, []);\n\n  return (\n    createPortal(\n      <>\n        <div className=\"sendbird-dropdown__menu-backdrop\" />\n        <ul\n          className=\"sendbird-dropdown__reaction-bar\"\n          ref={reactionRef}\n          style={{\n            display: 'inline-block',\n            position: 'fixed',\n            left: `${Math.round(reactionStyle.left)}px`,\n            top: `${Math.round(reactionStyle.top)}px`,\n          }}\n        >\n          <SortByRow\n            className=\"sendbird-dropdown__reaction-bar__row\"\n            maxItemCount={8}\n            itemWidth={44}\n            itemHeight={40}\n          >\n            {children}\n          </SortByRow>\n        </ul>\n      </>,\n      document.getElementById('sendbird-emoji-list-portal'),\n    )\n  );\n};\n\nexport default EmojiListItems;\n","import React, { ReactElement, MouseEvent, useState } from 'react';\nimport './index.scss';\n\nimport _MenuItems from './MenuItems';\nimport _EmojiListItems from './EmojiListItems';\n\nimport { getClassName } from '../../utils';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nconst ENTER_KEY = 13;\n\nexport const MenuItems = _MenuItems;\nexport const EmojiListItems = _EmojiListItems;\n\nexport interface MenuItemProps {\n  className?: string | Array<string>;\n  children: ReactElement;\n  onClick?: (e: MouseEvent<HTMLLIElement>) => void;\n  disable?: boolean;\n}\nexport const MenuItem = ({\n  className = '',\n  children,\n  onClick,\n  disable = false,\n}: MenuItemProps): ReactElement => {\n  const handleClickEvent = (e) => {\n    if (!disable && onClick) {\n      onClick?.(e);\n    }\n  };\n  return (\n    <li\n      className={getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : ''])}\n      role=\"menuitem\"\n      onClick={handleClickEvent}\n      onKeyPress={(e) => { if (e.keyCode === ENTER_KEY) handleClickEvent(e); }}\n      tabIndex={0}\n    >\n      <Label\n        className=\"sendbird-dropdown__menu-item__text\"\n        type={LabelTypography.SUBTITLE_2}\n        color={disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1}\n      >\n        {children}\n      </Label>\n    </li>\n  );\n};\n\nexport const MenuRoot = (): ReactElement => <div id=\"sendbird-dropdown-portal\" />;\nexport const EmojiReactionListRoot = (): ReactElement => <div id=\"sendbird-emoji-list-portal\" />;\n\ntype MenuDisplayingFunc = () => void;\nexport interface ContextMenuProps {\n  menuTrigger: (MenuDisplayingFunc) => ReactElement;\n  menuItems: (MenuDisplayingFunc) => ReactElement;\n}\nexport default function ContextMenu({\n  menuTrigger,\n  menuItems,\n}: ContextMenuProps): ReactElement {\n  const [showMenu, setShowMenu] = useState(false);\n  return (\n    <div\n      className=\"sendbird-context-menu\"\n      style={{ display: 'inline' }}\n    >\n      {menuTrigger(() => setShowMenu(!showMenu))}\n      {showMenu && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n"],"names":["__extends","props","_super","_this","React","createRef","closeDropdown","menuRef","handleClickOutside","event","current","contains","target","setState","document","addEventListener","state","removeEventListener","_c","parentRef","openLeft","parentRect","getBoundingClientRect","x","left","y","top","menuStyle","innerWidth","window","innerHeight","rect","height","width","padding","Number","isNaN","MenuItems","setupEvents","getMenuPosition","cleanUpEvents","_a","children","style","createPortal","display","position","Math","round","getElementById","Component","EmojiListItems","parentContainRef","_b","spaceFromTrigger","useState","reactionStyle","setReactionStyle","reactionRef","useRef","useEffect","classList","add","remove","handleClickOutSide","spaceFromTriggerX","spaceFromTriggerY","maximumLeft","ENTER_KEY","_MenuItems","_EmojiListItems","MenuItem","className","onClick","disable","handleClickEvent","e","getClassName","keyCode","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","MenuRoot","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","showMenu","setShowMenu"],"mappings":"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"}

package/ui/DateSeparator.js

@@ -1,10 +1,10 @@
-import { a as __spreadArray } from '../tslib.es6-710c6267.js';
+import { a as __spreadArray } from '../tslib.es6-72a2f141.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../color-798488ed.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import { C as Colors, c as changeColorToClassName } from '../color-83cfc07a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
+import '../stringSet-c4a61372.js';
 
 var DateSeparator = function DateSeparator(_a) {
   var _b = _a.children,

package/ui/EmojiReactions.js

@@ -6,17 +6,17 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { I as getEmojiMapAll, k as getClassName, J as isReactedBy, K as getEmojiTooltipString, H as getEmojiListAll } from '../index-03ccaf35.js';
-import { a as LocalizationContext } from '../LocalizationContext-2a073ef0.js';
-import '../tslib.es6-710c6267.js';
-import '../index-ed39099a.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import { I as getEmojiMapAll, k as getClassName, J as isReactedBy, K as getEmojiTooltipString, H as getEmojiListAll } from '../index-24a5ab49.js';
+import { a as LocalizationContext } from '../LocalizationContext-5b475a64.js';
+import '../tslib.es6-72a2f141.js';
+import '../index-e028fd23.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
+import '../stringSet-c4a61372.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-60ae25c1.js';
-import '../index-5ec69689.js';
+import '../uuid-8a4db02f.js';
+import '../index-25496c01.js';
 
 var EmojiReactions = function EmojiReactions(_a) {
   var _b, _c;

package/ui/FileMessageItemBody.js

@@ -1,13 +1,13 @@
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { k as getClassName, L as getUIKitFileType, t as truncateString } from '../index-03ccaf35.js';
-import { C as Colors } from '../color-798488ed.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import { k as getClassName, L as getUIKitFileType, t as truncateString } from '../index-24a5ab49.js';
+import { C as Colors } from '../color-83cfc07a.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
-import '../tslib.es6-710c6267.js';
+import '../stringSet-c4a61372.js';
+import '../tslib.es6-72a2f141.js';
 
 function FileMessageItemBody(_a) {
   var _b;
@@ -17,9 +17,11 @@ function FileMessageItemBody(_a) {
       _c = _a.isByMe,
       isByMe = _c === void 0 ? false : _c,
       _d = _a.mouseHover,
-      mouseHover = _d === void 0 ? false : _d;
+      mouseHover = _d === void 0 ? false : _d,
+      _e = _a.isReactionEnabled,
+      isReactionEnabled = _e === void 0 ? false : _e;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'reactions' : ''])
+    className: getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'reactions' : ''])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-file-message-item-body__file-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {

package/ui/FileMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileMessageItemBody.js","sources":["../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\nimport { Colors } from '../../utils/color';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n}: Props): ReactElement {\n\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      message?.reactions?.length > 0 ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className={'sendbird-file-message-item-body__file-icon__icon'}\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {truncateString(message?.name || message?.url)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","React","getClassName","reactions","length","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","window","open","url","Colors","ONCONTENT_1","ONBACKGROUND_1","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":";;;;;;;;;;;SAiBwBA,oBAAoBC;;;MAC1CC,SAAS;MACTC,OAAO;MACPC;MAAAC,MAAM,mBAAG;MACTC;MAAAC,UAAU,mBAAG;AAGb,sBACEC;AAAK,IAAA,SAAS,EAAEC,YAAY,CAAC,CAC3BP,SAD2B,EAE3B,iCAF2B,EAG3BG,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK3B,CAAA,MAAAJ,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEO,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAA7B,GAAiC,WAAjC,GAA+C,EALpB,CAAD;AAA5B,kBAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,IAAD;AACE,IAAA,SAAS,EAAE,kDADb;AAEE,IAAA,IAAI,EAAE;AACJI,MAAAA,KAAK,EAAEC,SAAS,CAACC,KADb;AAEJC,MAAAA,KAAK,EAAEF,SAAS,CAACG,IAFb;AAGJC,MAAAA,KAAK,EAAEJ,SAAS,CAACK,UAHb;AAIJC,MAAAA,GAAG,EAAEN,SAAS,CAACM,GAJX;AAKJC,MAAAA,MAAM,EAAEP,SAAS,CAACQ;AALd,MAMJC,gBAAgB,CAACnB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEoB,IAAV,CANZ,CAFR;AASE,IAAA,SAAS,EAAEC,UAAU,CAACC,OATxB;AAUE,IAAA,KAAK,EAAC,MAVR;AAWE,IAAA,MAAM,EAAC;AAXT,IADF,CAPF,eAsBEjB,6BAAC,UAAD;AACE,IAAA,SAAS,EAAC,4CADZ;AAEE,IAAA,OAAO,EAAE;AAAQkB,MAAAA,MAAM,CAACC,IAAP,CAAYxB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAArB;AAA2B,KAF9C;AAGE,IAAA,KAAK,EAAEvB,MAAM,GAAGwB,MAAM,CAACC,WAAV,GAAwBD,MAAM,CAACE;AAH9C,kBAKEvB,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,kDADZ;AAEE,IAAA,IAAI,EAAEwB,eAAe,CAACC,MAFxB;AAGE,IAAA,KAAK,EAAE5B,MAAM,GAAG6B,WAAW,CAACJ,WAAf,GAA6BI,WAAW,CAACH;AAHxD,KAKGI,cAAc,CAAC,CAAAhC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEiC,IAAT,MAAiBjC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEyB,GAA1B,CAAD,CALjB,CALF,CAtBF,CADF;AAsCD;;;;"}
+{"version":3,"file":"FileMessageItemBody.js","sources":["../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\nimport { Colors } from '../../utils/color';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className={'sendbird-file-message-item-body__file-icon__icon'}\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {truncateString(message?.name || message?.url)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","_e","isReactionEnabled","React","getClassName","reactions","length","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","window","open","url","Colors","ONCONTENT_1","ONBACKGROUND_1","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":";;;;;;;;;;;SAkBwBA,oBAAoBC;;;MAC1CC,SAAS;MACTC,OAAO;MACPC;MAAAC,MAAM,mBAAG;MACTC;MAAAC,UAAU,mBAAG;MACbC;MAAAC,iBAAiB,mBAAG;AAGpB,sBACEC;AAAK,IAAA,SAAS,EAAEC,YAAY,CAAC,CAC3BT,SAD2B,EAE3B,iCAF2B,EAG3BG,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK1BE,iBAAiB,IAAI,CAAA,MAAAN,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAAnD,GAAwD,WAAxD,GAAsE,EAL3C,CAAD;AAA5B,kBAOEH;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,IAAD;AACE,IAAA,SAAS,EAAE,kDADb;AAEE,IAAA,IAAI,EAAE;AACJI,MAAAA,KAAK,EAAEC,SAAS,CAACC,KADb;AAEJC,MAAAA,KAAK,EAAEF,SAAS,CAACG,IAFb;AAGJC,MAAAA,KAAK,EAAEJ,SAAS,CAACK,UAHb;AAIJC,MAAAA,GAAG,EAAEN,SAAS,CAACM,GAJX;AAKJC,MAAAA,MAAM,EAAEP,SAAS,CAACQ;AALd,MAMJC,gBAAgB,CAACrB,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEsB,IAAV,CANZ,CAFR;AASE,IAAA,SAAS,EAAEC,UAAU,CAACC,OATxB;AAUE,IAAA,KAAK,EAAC,MAVR;AAWE,IAAA,MAAM,EAAC;AAXT,IADF,CAPF,eAsBEjB,6BAAC,UAAD;AACE,IAAA,SAAS,EAAC,4CADZ;AAEE,IAAA,OAAO,EAAE;AAAQkB,MAAAA,MAAM,CAACC,IAAP,CAAY1B,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAE2B,GAArB;AAA2B,KAF9C;AAGE,IAAA,KAAK,EAAEzB,MAAM,GAAG0B,MAAM,CAACC,WAAV,GAAwBD,MAAM,CAACE;AAH9C,kBAKEvB,6BAAC,KAAD;AACE,IAAA,SAAS,EAAC,kDADZ;AAEE,IAAA,IAAI,EAAEwB,eAAe,CAACC,MAFxB;AAGE,IAAA,KAAK,EAAE9B,MAAM,GAAG+B,WAAW,CAACJ,WAAf,GAA6BI,WAAW,CAACH;AAHxD,KAKGI,cAAc,CAAC,CAAAlC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEmC,IAAT,MAAiBnC,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAE2B,GAA1B,CAAD,CALjB,CALF,CAtBF,CADF;AAsCD;;;;"}

package/ui/FileViewer.js

@@ -1,17 +1,17 @@
 import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { a as LocalizationContext } from '../LocalizationContext-2a073ef0.js';
-import { M as MODAL_ROOT } from '../index-c9cda9f6.js';
-import { A as isSupportedFileView, B as isVideo, C as isImage } from '../index-03ccaf35.js';
+import { a as LocalizationContext } from '../LocalizationContext-5b475a64.js';
+import { M as MODAL_ROOT } from '../index-1086dd43.js';
+import { A as isSupportedFileView, B as isVideo, C as isImage } from '../index-24a5ab49.js';
 import Avatar from './Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import '../stringSet-647493ce.js';
-import '../index-5ec69689.js';
-import '../tslib.es6-710c6267.js';
+import '../stringSet-c4a61372.js';
+import '../index-25496c01.js';
+import '../tslib.es6-72a2f141.js';
 import './ImageRenderer.js';
-import '../uuid-60ae25c1.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import '../uuid-8a4db02f.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
 
 var FileViewerComponent = function FileViewerComponent(_a) {

package/ui/Icon.js

@@ -1,4 +1,4 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-3043541a.js';
+import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-b2b008c2.js';
 import * as React from 'react';
 import React__default from 'react';
 import PropTypes from 'prop-types';

package/ui/IconButton.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray, _ as __assign } from '../tslib.es6-710c6267.js';
+import { a as __spreadArray, _ as __assign } from '../tslib.es6-72a2f141.js';
 import React__default, { useState } from 'react';
 
 var IconButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {

package/ui/ImageRenderer.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray } from '../tslib.es6-710c6267.js';
+import { a as __spreadArray } from '../tslib.es6-72a2f141.js';
 import React__default, { useState, useMemo } from 'react';
 
 var ImageRenderer = function ImageRenderer(_a) {

package/ui/Input.js

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
+import '../stringSet-c4a61372.js';
 
 var InputLabel = function InputLabel(_a) {
   var children = _a.children;

package/ui/Label.js

@@ -1,6 +1,6 @@
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'react';
 import 'prop-types';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-ed39099a.js';
-import '../stringSet-647493ce.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../index-e028fd23.js';
+import '../stringSet-c4a61372.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,8 +1,8 @@
-import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-3043541a.js';
+import { b as _toConsumableArray } from '../_rollupPluginBabelHelpers-b2b008c2.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { a as LabelTypography, b as LabelColors, d as changeColorToClassName, L as Label } from '../index-ed39099a.js';
-import '../stringSet-647493ce.js';
+import { a as LabelTypography, b as LabelColors, d as changeColorToClassName, L as Label } from '../index-e028fd23.js';
+import '../stringSet-c4a61372.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_ref) {

package/ui/Loader.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../tslib.es6-710c6267.js';
+import { a as __spreadArray } from '../tslib.es6-72a2f141.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
 
 function Loader(_a) {

package/ui/MentionLabel.js

@@ -1,26 +1,26 @@
 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-ed39099a.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e028fd23.js';
 import ConnectedUserProfile from './UserProfile.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../tslib.es6-710c6267.js';
+import '../tslib.es6-72a2f141.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../uuid-60ae25c1.js';
-import '../index-03ccaf35.js';
-import '../_rollupPluginBabelHelpers-3043541a.js';
+import '../uuid-8a4db02f.js';
+import '../index-24a5ab49.js';
+import '../_rollupPluginBabelHelpers-b2b008c2.js';
 import 'prop-types';
-import '../stringSet-647493ce.js';
-import '../LocalizationContext-2a073ef0.js';
-import '../index-5ec69689.js';
+import '../stringSet-c4a61372.js';
+import '../LocalizationContext-5b475a64.js';
+import '../index-25496c01.js';
 import '../withSendbird.js';
 import '../sendbirdSelectors.js';
-import '../topics-18836011.js';
-import '../utils-301322ba.js';
+import '../topics-851d221c.js';
+import '../utils-2c4d166e.js';
 import './Avatar.js';
 import './ImageRenderer.js';
 import './Icon.js';
-import '../index-6a47d16f.js';
+import '../index-16e14c17.js';
 
 function MentionLabel(props) {
   var _a, _b, _c;