@sendbird/uikit-react 3.4.6 → 3.4.7-0

package/cjs/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 } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface MenuItemsProps {\n  className?: string;\n  style?: Record<string, string>;\n  openLeft?: boolean;\n  children: React.ReactElement | Array<React.ReactElement>;\n  parentRef: React.RefObject<HTMLElement>;\n  parentContainRef: React.RefObject<HTMLElement>;\n  closeDropdown: () => void;\n}\n\ntype MenuStyleType = { top?: number, left?: number };\ninterface MenuItemsState {\n  menuStyle: MenuStyleType;\n  handleClickOutside: (e: MouseEvent) => void;\n}\n\n// padding to handle height of last item in message-list\nconst HEIGHT_PADDING = 60;\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\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 + HEIGHT_PADDING > 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    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    // warning: this section has to be executed after the openLeft is calculated\n    // menu is outside viewport\n    if (menuStyle.left < 0) {\n      menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n    }\n\n    this.setState({ menuStyle })\n    return menuStyle;\n  }\n\n  render(): ReactElement {\n    const { menuStyle } = this.state;\n    const { children, style, className = '' } = this.props;\n    return (\n      createPortal(\n        (\n          <div className={this.props?.className}>\n            <div className=\"sendbird-dropdown__menu-backdrop\" />\n            <ul\n              className={`${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          </div>\n        ),\n        document.getElementById('sendbird-dropdown-portal'),\n      )\n    );\n  }\n}\n","import React, { ReactElement, ReactNode, 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: ReactNode;\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, ReactNode } 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 | ReactElement[] | ReactNode;\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      aria-disabled={disable ? true : false}\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 => (\n  <div\n    id=\"sendbird-dropdown-portal\"\n    className=\"sendbird-dropdown-portal\"\n  />\n);\n\n// For the test environment\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  isOpen?: boolean;\n}\nexport default function ContextMenu({\n  menuTrigger,\n  menuItems,\n  isOpen,\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 || isOpen) && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n"],"names":["HEIGHT_PADDING","MenuItems","_super","__extends","props","_this","call","menuRef","React","createRef","setupEvents","closeDropdown","handleClickOutside","event","current","_b","_a","contains","target","setState","document","addEventListener","cleanUpEvents","state","removeEventListener","getMenuPosition","_c","parentRef","openLeft","parentRect","getBoundingClientRect","x","left","y","top","menuStyle","innerWidth","window","innerHeight","rect","height","width","padding","Number","isNaN","prototype","componentDidMount","componentWillUnmount","render","children","style","className","createPortal","createElement","concat","ref","__assign","display","position","Math","round","getElementById","Component","EmojiListItems","parentContainRef","spaceFromTrigger","useState","reactionStyle","setReactionStyle","reactionRef","useRef","useEffect","classList","add","remove","handleClickOutSide","spaceFromTriggerX","spaceFromTriggerY","maximumLeft","Fragment","SortByRow","maxItemCount","itemWidth","itemHeight","ENTER_KEY","_MenuItems","_EmojiListItems","MenuItem","onClick","disable","handleClickEvent","e","getClassName","role","onKeyPress","keyCode","tabIndex","Label","type","LabelTypography","SUBTITLE_2","color","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","MenuRoot","id","EmojiReactionListRoot","ContextMenu","menuTrigger","menuItems","isOpen","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  className?: string;\n  style?: Record<string, string>;\n  openLeft?: boolean;\n  children: React.ReactElement | Array<React.ReactElement>;\n  parentRef: React.RefObject<HTMLElement>;\n  parentContainRef: React.RefObject<HTMLElement>;\n  closeDropdown: () => void;\n}\n\ntype MenuStyleType = { top?: number, left?: number };\ninterface MenuItemsState {\n  menuStyle: MenuStyleType;\n  handleClickOutside: (e: MouseEvent) => void;\n}\n\n// padding to handle height of last item in message-list\nconst HEIGHT_PADDING = 60;\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\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 + HEIGHT_PADDING > 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    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    // warning: this section has to be executed after the openLeft is calculated\n    // menu is outside viewport\n    if (menuStyle.left < 0) {\n      menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;\n    }\n\n    this.setState({ menuStyle })\n    return menuStyle;\n  }\n\n  render(): ReactElement {\n    const { menuStyle } = this.state;\n    const { children, style, className = '' } = this.props;\n    return (\n      createPortal(\n        (\n          <div className={this.props?.className}>\n            <div className=\"sendbird-dropdown__menu-backdrop\" />\n            <ul\n              className={`${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          </div>\n        ),\n        document.getElementById('sendbird-dropdown-portal'),\n      )\n    );\n  }\n}\n","import React, { ReactElement, ReactNode, 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: ReactNode;\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, ReactNode } 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 | ReactElement[] | ReactNode;\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      aria-disabled={disable ? true : false}\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 => (\n  <div\n    id=\"sendbird-dropdown-portal\"\n    className=\"sendbird-dropdown-portal\"\n  />\n);\n\n// For the test environment\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  isOpen?: boolean;\n}\nexport default function ContextMenu({\n  menuTrigger,\n  menuItems,\n  isOpen,\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 || isOpen) && menuItems(() => setShowMenu(false))}\n    </div>\n  );\n}\n"],"names":["HEIGHT_PADDING","MenuItems","React","Component","constructor","props","_defineProperty","createRef","closeDropdown","menuRef","handleClickOutside","event","_menuRef$current","_menuRef$current$cont","current","contains","call","target","setState","document","addEventListener","state","removeEventListener","_parentRef$current","_parentRef$current$ge","parentRef","openLeft","parentRect","getBoundingClientRect","x","left","y","top","menuStyle","innerWidth","innerHeight","window","rect","height","width","padding","Number","isNaN","componentDidMount","setupEvents","getMenuPosition","componentWillUnmount","cleanUpEvents","render","_this$props","children","style","className","createPortal","createElement","ref","_objectSpread","display","position","Math","round","getElementById","EmojiListItems","_ref","parentContainRef","spaceFromTrigger","reactionStyle","setReactionStyle","useState","reactionRef","useRef","useEffect","classList","add","remove","handleClickOutSide","_reactionRef$current","_reactionRef$current$","spaceFromTriggerX","spaceFromTriggerY","_reactionRef$current2","maximumLeft","Fragment","SortByRow","maxItemCount","itemWidth","itemHeight","ENTER_KEY","_MenuItems","_EmojiListItems","MenuItem","onClick","disable","handleClickEvent","e","getClassName","role","onKeyPress","keyCode","tabIndex","Label","type","LabelTypography","SUBTITLE_2","color","LabelColors","ONBACKGROUND_4","ONBACKGROUND_1","MenuRoot","id","EmojiReactionListRoot","ContextMenu","_ref2","menuTrigger","menuItems","isOpen","showMenu","setShowMenu"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA;AACA,MAAMA,cAAc,GAAG,EAAE,CAAA;AAEV,MAAMC,WAAS,SAASC,yBAAK,CAACC,SAAS,CAAiC;EACrFC,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,CAAC,CAAA;AAACC,IAAAA,yCAAA,CAO8BJ,IAAAA,EAAAA,SAAAA,eAAAA,yBAAK,CAACK,SAAS,EAAE,CAAA,CAAA;AAAAD,IAAAA,yCAAA,sBAWhD,MAAY;MACxB,MAAM;AAAEE,QAAAA,aAAAA;OAAe,GAAG,IAAI,CAACH,KAAK,CAAA;MACpC,MAAM;AAAEI,QAAAA,OAAAA;AAAQ,OAAC,GAAG,IAAI,CAAA;MACxB,MAAMC,kBAAkB,GAAIC,KAAK,IAAK;QAAA,IAAAC,gBAAA,EAAAC,qBAAA,CAAA;AACpC,QAAA,IAAIJ,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,IAAAA,OAAO,CAAEK,OAAO,IAAI,EAACL,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,IAAA,CAAAG,gBAAA,GAAPH,OAAO,CAAEK,OAAO,MAAA,IAAA,IAAAF,gBAAA,KAAA,KAAA,CAAA,IAAA,CAAAC,qBAAA,GAAhBD,gBAAA,CAAkBG,QAAQ,MAAA,IAAA,IAAAF,qBAAA,KAA1BA,KAAAA,CAAAA,IAAAA,qBAAA,CAAAG,IAAA,CAAAJ,gBAAA,EAA6BD,KAAK,CAACM,MAAM,CAAC,CAAE,EAAA;AACnET,UAAAA,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAa,EAAI,CAAA;AACnB,SAAA;OACD,CAAA;MACD,IAAI,CAACU,QAAQ,CAAC;AACZR,QAAAA,kBAAAA;AACF,OAAC,CAAC,CAAA;AAEFS,MAAAA,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEV,kBAAkB,CAAC,CAAA;KAC3D,CAAA,CAAA;AAAAJ,IAAAA,yCAAA,wBAEe,MAAY;MAC1B,MAAM;AACJI,QAAAA,kBAAAA;OACD,GAAG,IAAI,CAACW,KAAK,CAAA;AACdF,MAAAA,QAAQ,CAACG,mBAAmB,CAAC,WAAW,EAAEZ,kBAAkB,CAAC,CAAA;KAC9D,CAAA,CAAA;AAAAJ,IAAAA,yCAAA,0BAEiB,MAAqB;MAAA,IAAAiB,kBAAA,EAAAC,qBAAA,CAAA;MACrC,MAAM;QAAEC,SAAS;AAAEC,QAAAA,QAAAA;OAAU,GAAG,IAAI,CAACrB,KAAK,CAAA;MAC1C,MAAMsB,UAAU,GAAGF,SAAS,KAATA,IAAAA,IAAAA,SAAS,KAAAF,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,kBAAA,GAATE,SAAS,CAAEX,OAAO,MAAAS,IAAAA,IAAAA,kBAAA,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,qBAAA,GAAlBD,kBAAA,CAAoBK,qBAAqB,MAAAJ,IAAAA,IAAAA,qBAAA,KAAzCA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAAR,IAAA,CAAAO,kBAA4C,CAAC,CAAA;AAChE,MAAA,MAAMM,CAAC,GAAG,CAAAF,UAAU,KAAVA,IAAAA,IAAAA,UAAU,uBAAVA,UAAU,CAAEE,CAAC,MAAIF,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAVA,UAAU,CAAEG,IAAI,KAAI,CAAC,CAAA;AAChD,MAAA,MAAMC,CAAC,GAAG,CAAAJ,UAAU,KAAVA,IAAAA,IAAAA,UAAU,uBAAVA,UAAU,CAAEI,CAAC,MAAIJ,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAVA,UAAU,CAAEK,GAAG,KAAI,CAAC,CAAA;AAC/C,MAAA,MAAMC,SAAS,GAAG;AAChBD,QAAAA,GAAG,EAAED,CAAC;AACND,QAAAA,IAAI,EAAED,CAAAA;OACP,CAAA;MACD,IAAI,CAAC,IAAI,CAACpB,OAAO,CAACK,OAAO,EAAE,OAAOmB,SAAS,CAAA;MAC3C,MAAM;QAAEC,UAAU;AAAEC,QAAAA,WAAAA;AAAY,OAAC,GAAGC,MAAM,CAAA;MAC1C,MAAMC,IAAI,GAAG,IAAI,CAAC5B,OAAO,CAACK,OAAO,CAACc,qBAAqB,EAAE,CAAA;MACzD,IAAIG,CAAC,GAAGM,IAAI,CAACC,MAAM,GAAGtC,cAAc,GAAGmC,WAAW,EAAE;AAClDF,QAAAA,SAAS,CAACD,GAAG,IAAIK,IAAI,CAACC,MAAM,CAAA;AAC9B,OAAA;MACA,IAAIT,CAAC,GAAGQ,IAAI,CAACE,KAAK,GAAGL,UAAU,IAAI,CAACR,QAAQ,EAAE;AAC5CO,QAAAA,SAAS,CAACH,IAAI,IAAIO,IAAI,CAACE,KAAK,CAAA;AAC9B,OAAA;AACA,MAAA,IAAIN,SAAS,CAACD,GAAG,GAAG,CAAC,EAAE;AACrBC,QAAAA,SAAS,CAACD,GAAG,GAAGK,IAAI,CAACC,MAAM,GAAGH,WAAW,GAAG,CAACA,WAAW,GAAGE,IAAI,CAACC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAA;AACjF,OAAA;MACAL,SAAS,CAACD,GAAG,IAAI,EAAE,CAAA;AACnB,MAAA,IAAIN,QAAQ,EAAE;AACZ,QAAA,MAAMc,OAAO,GAAGC,MAAM,CAACC,KAAK,CAACL,IAAI,CAACE,KAAK,GAAG,EAAE,CAAC,GACzC,GAAG;AAAC,UACJF,IAAI,CAACE,KAAK,GAAG,EAAE,CAAA;QACnBN,SAAS,CAACH,IAAI,IAAIU,OAAO,CAAA;AAC3B,OAAA;AACA;AACA;AACA,MAAA,IAAIP,SAAS,CAACH,IAAI,GAAG,CAAC,EAAE;AACtBG,QAAAA,SAAS,CAACH,IAAI,GAAGO,IAAI,CAACE,KAAK,GAAGL,UAAU,GAAG,CAACA,UAAU,GAAGG,IAAI,CAACE,KAAK,IAAI,CAAC,GAAG,CAAC,CAAA;AAC9E,OAAA;MAEA,IAAI,CAACrB,QAAQ,CAAC;AAAEe,QAAAA,SAAAA;AAAU,OAAC,CAAC,CAAA;AAC5B,MAAA,OAAOA,SAAS,CAAA;KACjB,CAAA,CAAA;IA3EC,IAAI,CAACZ,KAAK,GAAG;MACXY,SAAS,EAAE,EAAE;MACbvB,kBAAkB,EAAEA,MAAM,YAAE;KAC7B,CAAA;AACH,GAAA;AAIAiC,EAAAA,iBAAiBA,GAAS;IACxB,IAAI,CAACC,WAAW,EAAE,CAAA;IAClB,IAAI,CAACC,eAAe,EAAE,CAAA;AACxB,GAAA;AAEAC,EAAAA,oBAAoBA,GAAS;IAC3B,IAAI,CAACC,aAAa,EAAE,CAAA;AACtB,GAAA;AA8DAC,EAAAA,MAAMA,GAAiB;AAAA,IAAA,IAAAC,WAAA,CAAA;IACrB,MAAM;AAAEhB,MAAAA,SAAAA;KAAW,GAAG,IAAI,CAACZ,KAAK,CAAA;IAChC,MAAM;MAAE6B,QAAQ;MAAEC,KAAK;AAAEC,MAAAA,SAAS,GAAG,EAAA;KAAI,GAAG,IAAI,CAAC/C,KAAK,CAAA;AACtD,IAAA,oBACEgD,qBAAY,eAERnD,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;MAAKF,SAAS,EAAA,CAAAH,WAAA,GAAE,IAAI,CAAC5C,KAAK,MAAA4C,IAAAA,IAAAA,WAAA,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,WAAA,CAAYG,SAAAA;KAC1BlD,eAAAA,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,kCAAA;AAAkC,KAAE,CAAC,eACpDlD,yBAAA,CAAAoD,aAAA,CAAA,IAAA,EAAA;MACEF,SAAS,EAAG,CAAEA,EAAAA,SAAU,CAA0B,wBAAA,CAAA;MAClDG,GAAG,EAAE,IAAI,CAAC9C,OAAQ;AAClB0C,MAAAA,KAAK,EAAAK,wCAAA,CAAA;AACHC,QAAAA,OAAO,EAAE,cAAc;AACvBC,QAAAA,QAAQ,EAAE,OAAO;QACjB5B,IAAI,EAAG,CAAE6B,EAAAA,IAAI,CAACC,KAAK,CAAC3B,SAAS,CAACH,IAAI,CAAE,CAAG,EAAA,CAAA;QACvCE,GAAG,EAAG,GAAE2B,IAAI,CAACC,KAAK,CAAC3B,SAAS,CAACD,GAAG,CAAE,CAAA,EAAA,CAAA;AAAG,OAAA,EAClCmB,KAAK,CAAA;KAGTD,EAAAA,QACC,CACD,CAAC,EAER/B,QAAQ,CAAC0C,cAAc,CAAC,0BAA0B,CACpD,CAAC,CAAA;AAEL,GAAA;AACF;;AClHA,MAAMC,gBAAc,GAAGC,IAAA,IAMkB;EAAA,IANjB;IACtBb,QAAQ;IACRzB,SAAS;IACTuC,gBAAgB;AAChBC,IAAAA,gBAAgB,GAAG;AAAEpC,MAAAA,CAAC,EAAE,CAAC;AAAEE,MAAAA,CAAC,EAAE,CAAA;KAAG;AACjCvB,IAAAA,aAAAA;AACmB,GAAC,GAAAuD,IAAA,CAAA;AACpB,EAAA,MAAM,CAACG,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,cAAQ,CAAgB;AAAEtC,IAAAA,IAAI,EAAE,CAAC;AAAEE,IAAAA,GAAG,EAAE,CAAA;AAAE,GAAC,CAAC,CAAA;AACtF,EAAA,MAAMqC,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;;AAEhC;AACAC,EAAAA,eAAS,CAAC,MAAM;IACd,IAAIP,gBAAgB,IAAIA,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,IAAAA,gBAAgB,CAAElD,OAAO,EAAE;MACjDkD,gBAAgB,CAAClD,OAAO,CAAC0D,SAAS,CAACC,GAAG,CAAC,6BAA6B,CAAC,CAAA;AACvE,KAAA;AACA,IAAA,OAAO,MAAM;MACX,IAAIT,gBAAgB,IAAIA,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,IAAAA,gBAAgB,CAAElD,OAAO,EAAE;QACjDkD,gBAAgB,CAAClD,OAAO,CAAC0D,SAAS,CAACE,MAAM,CAAC,6BAA6B,CAAC,CAAA;AAC1E,OAAA;KACD,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;;AAEN;AACAH,EAAAA,eAAS,CAAC,MAAM;IACd,MAAMI,kBAAkB,GAAIhE,KAAK,IAAK;MAAA,IAAAiE,oBAAA,EAAAC,qBAAA,CAAA;AACpC,MAAA,IAAIR,WAAW,KAAXA,IAAAA,IAAAA,WAAW,KAAXA,KAAAA,CAAAA,IAAAA,WAAW,CAAEvD,OAAO,IAAI,EAACuD,WAAW,aAAXA,WAAW,KAAA,KAAA,CAAA,IAAA,CAAAO,oBAAA,GAAXP,WAAW,CAAEvD,OAAO,MAAA,IAAA,IAAA8D,oBAAA,KAAA,KAAA,CAAA,IAAA,CAAAC,qBAAA,GAApBD,oBAAA,CAAsB7D,QAAQ,MAAA,IAAA,IAAA8D,qBAAA,KAA9BA,KAAAA,CAAAA,IAAAA,qBAAA,CAAA7D,IAAA,CAAA4D,oBAAA,EAAiCjE,KAAK,CAACM,MAAM,CAAC,CAAE,EAAA;AAC3ET,QAAAA,aAAa,EAAE,CAAA;AACjB,OAAA;KACD,CAAA;AACDW,IAAAA,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEuD,kBAAkB,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAM;AACXxD,MAAAA,QAAQ,CAACG,mBAAmB,CAAC,WAAW,EAAEqD,kBAAkB,CAAC,CAAA;KAC9D,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;;AAEN;AACAJ,EAAAA,eAAS,CAAC,MAAM;AAAA,IAAA,IAAAhD,kBAAA,CAAA;IACd,MAAMuD,iBAAiB,GAAG,CAAAb,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,gBAAgB,CAAEpC,CAAC,KAAI,CAAC,CAAA;IAClD,MAAMkD,iBAAiB,GAAG,CAAAd,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,gBAAgB,CAAElC,CAAC,KAAI,CAAC,CAAA;AAClD,IAAA,MAAMJ,UAAU,GAAGF,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAF,kBAAA,GAATE,SAAS,CAAEX,OAAO,cAAAS,kBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,kBAAA,CAAoBK,qBAAqB,EAAE,CAAA;IAC9D,MAAMC,CAAC,GAAGF,UAAU,CAACE,CAAC,IAAIF,UAAU,CAACG,IAAI,CAAA;IACzC,MAAMC,CAAC,GAAGJ,UAAU,CAACI,CAAC,IAAIJ,UAAU,CAACK,GAAG,CAAA;AACxC,IAAA,MAAMkC,aAAa,GAAG;AACpBlC,MAAAA,GAAG,EAAED,CAAC;AACND,MAAAA,IAAI,EAAED,CAAAA;KACP,CAAA;IACD,IAAI,EAACwC,WAAW,KAAXA,IAAAA,IAAAA,WAAW,eAAXA,WAAW,CAAEvD,OAAO,CAAE,EAAA;MACzBqD,gBAAgB,CAACD,aAAa,CAAC,CAAA;AACjC,KAAC,MAAM;AAAA,MAAA,IAAAc,qBAAA,CAAA;AACL,MAAA,MAAM3C,IAAI,GAAGgC,WAAW,aAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAAW,qBAAA,GAAXX,WAAW,CAAEvD,OAAO,cAAAkE,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,qBAAA,CAAsBpD,qBAAqB,EAAE,CAAA;AAC1D,MAAA,IAAIsC,aAAa,CAAClC,GAAG,GAAGK,IAAI,CAACC,MAAM,EAAE;AACnC4B,QAAAA,aAAa,CAAClC,GAAG,IAAIL,UAAU,CAACW,MAAM,CAAA;QACtC4B,aAAa,CAAClC,GAAG,IAAI+C,iBAAiB,CAAA;AACxC,OAAC,MAAM;AACLb,QAAAA,aAAa,CAAClC,GAAG,IAAIK,IAAI,CAACC,MAAM,CAAA;QAChC4B,aAAa,CAAClC,GAAG,IAAI+C,iBAAiB,CAAA;AACxC,OAAA;AACAb,MAAAA,aAAa,CAACpC,IAAI,IAAIO,IAAI,CAACE,KAAK,GAAG,CAAC,CAAA;MACpC2B,aAAa,CAACpC,IAAI,IAAKH,UAAU,CAACW,MAAM,GAAG,CAAC,GAAI,CAAC,CAAA;MACjD4B,aAAa,CAACpC,IAAI,IAAIgD,iBAAiB,CAAA;MACvC,MAAMG,WAAW,GAAG7C,MAAM,CAACF,UAAU,GAAGG,IAAI,CAACE,KAAK,CAAA;AAClD,MAAA,IAAI0C,WAAW,GAAGf,aAAa,CAACpC,IAAI,EAAE;QACpCoC,aAAa,CAACpC,IAAI,GAAGmD,WAAW,CAAA;AAClC,OAAA;AACA,MAAA,IAAIf,aAAa,CAACpC,IAAI,GAAG,CAAC,EAAE;QAC1BoC,aAAa,CAACpC,IAAI,GAAG,CAAC,CAAA;AACxB,OAAA;MACAqC,gBAAgB,CAACD,aAAa,CAAC,CAAA;AACjC,KAAA;GACD,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,oBACEb,qBAAY,eACVnD,yBAAA,CAAAoD,aAAA,CAAApD,yBAAA,CAAAgF,QAAA,EAAA,IAAA,eACEhF,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAC,kCAAA;AAAkC,GAAE,CAAC,eACpDlD,yBAAA,CAAAoD,aAAA,CAAA,IAAA,EAAA;AACEF,IAAAA,SAAS,EAAC,iCAAiC;AAC3CG,IAAAA,GAAG,EAAEc,WAAY;AACjBlB,IAAAA,KAAK,EAAE;AACLM,MAAAA,OAAO,EAAE,cAAc;AACvBC,MAAAA,QAAQ,EAAE,OAAO;MACjB5B,IAAI,EAAG,CAAE6B,EAAAA,IAAI,CAACC,KAAK,CAACM,aAAa,CAACpC,IAAI,CAAE,CAAG,EAAA,CAAA;MAC3CE,GAAG,EAAG,GAAE2B,IAAI,CAACC,KAAK,CAACM,aAAa,CAAClC,GAAG,CAAE,CAAA,EAAA,CAAA;AACxC,KAAA;AAAE,GAAA,eAEF9B,yBAAA,CAAAoD,aAAA,CAAC6B,YAAS,EAAA;AACR/B,IAAAA,SAAS,EAAC,sCAAsC;AAChDgC,IAAAA,YAAY,EAAE,CAAE;AAChBC,IAAAA,SAAS,EAAE,EAAG;AACdC,IAAAA,UAAU,EAAE,EAAA;GAEXpC,EAAAA,QACQ,CACT,CACJ,CAAC,EACH/B,QAAQ,CAAC0C,cAAc,CAAC,4BAA4B,CACtD,CAAC,CAAA;AAEL,CAAC;;ACxGD,MAAM0B,SAAS,GAAG,EAAE,CAAA;AAEb,MAAMtF,SAAS,GAAGuF,YAAU;AAC5B,MAAM1B,cAAc,GAAG2B,iBAAe;AAQhCC,MAAAA,QAAQ,GAAG3B,IAAA,IAKW;EAAA,IALV;AACvBX,IAAAA,SAAS,GAAG,EAAE;IACdF,QAAQ;IACRyC,OAAO;AACPC,IAAAA,OAAO,GAAG,KAAA;AACG,GAAC,GAAA7B,IAAA,CAAA;EACd,MAAM8B,gBAAgB,GAAIC,CAAC,IAAK;AAC9B,IAAA,IAAI,CAACF,OAAO,IAAID,OAAO,EAAE;AACvBA,MAAAA,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAGG,CAAC,CAAC,CAAA;AACd,KAAA;GACD,CAAA;EACD,oBACE5F,yBAAA,CAAAoD,aAAA,CAAA,IAAA,EAAA;AACEF,IAAAA,SAAS,EAAE2C,kBAAY,CAAC,CAAC3C,SAAS,EAAE,8BAA8B,EAAEwC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAC,CAAE;AAC/FI,IAAAA,IAAI,EAAC,UAAU;AACf,IAAA,eAAA,EAAeJ,OAAO,GAAG,IAAI,GAAG,KAAM;AACtCD,IAAAA,OAAO,EAAEE,gBAAiB;IAC1BI,UAAU,EAAGH,CAAC,IAAK;MAAE,IAAIA,CAAC,CAACI,OAAO,KAAKX,SAAS,EAAEM,gBAAgB,CAACC,CAAC,CAAC,CAAA;KAAI;AACzEK,IAAAA,QAAQ,EAAE,CAAA;AAAE,GAAA,eAEZjG,yBAAA,CAAAoD,aAAA,CAAC8C,cAAK,EAAA;AACJhD,IAAAA,SAAS,EAAC,oCAAoC;IAC9CiD,IAAI,EAAEC,wBAAe,CAACC,UAAW;IACjCC,KAAK,EAAEZ,OAAO,GAAGa,oBAAW,CAACC,cAAc,GAAGD,oBAAW,CAACE,cAAAA;GAEzDzD,EAAAA,QACI,CACL,CAAC,CAAA;AAET,EAAC;MAEY0D,QAAQ,GAAGA,mBACtB1G,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;AACEuD,EAAAA,EAAE,EAAC,0BAA0B;AAC7BzD,EAAAA,SAAS,EAAC,0BAAA;AAA0B,CACrC,EACF;;AAED;MACa0D,qBAAqB,GAAGA,mBAAoB5G,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;AAAKuD,EAAAA,EAAE,EAAC,4BAAA;AAA4B,CAAE,EAAC;AAQjF,SAASE,WAAWA,CAAAC,KAAA,EAIA;EAAA,IAJC;IAClCC,WAAW;IACXC,SAAS;AACTC,IAAAA,MAAAA;AACgB,GAAC,GAAAH,KAAA,CAAA;EACjB,MAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGjD,cAAQ,CAAC,KAAK,CAAC,CAAA;EAC/C,oBACElE,yBAAA,CAAAoD,aAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAC,uBAAuB;AACjCD,IAAAA,KAAK,EAAE;AAAEM,MAAAA,OAAO,EAAE,QAAA;AAAS,KAAA;GAE1BwD,EAAAA,WAAW,KAAXA,IAAAA,IAAAA,WAAW,KAAXA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAG,MAAMI,WAAW,CAAC,CAACD,QAAQ,CAAC,CAAC,EAC3C,CAACA,QAAQ,IAAID,MAAM,KAAKD,SAAS,CAAC,MAAMG,WAAW,CAAC,KAAK,CAAC,CACxD,CAAC,CAAA;AAEV;;;;;;;;;"}

package/cjs/ui/DateSeparator.js

@@ -1,34 +1,32 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-8f4b0cfe.js');
 var React = require('react');
-var color = require('../color-7f7508e6.js');
-var ui_Label = require('../index-b8a20afd.js');
+var color = require('../color-afeb8dc2.js');
+var ui_Label = require('../index-73643285.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
+require('../stringSet-68748705.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var DateSeparator = function (_a) {
-  var _b = _a.children,
-    children = _b === void 0 ? null : _b,
-    _c = _a.className,
-    className = _c === void 0 ? '' : _c,
-    _d = _a.separatorColor,
-    separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;
+const DateSeparator = _ref => {
+  let {
+    children = null,
+    className = '',
+    separatorColor = color.Colors.ONBACKGROUND_4
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-separator'], false).join(' ')
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-separator'].join(' ')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: ['sendbird-separator__left', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+    className: ['sendbird-separator__left', `${color.changeColorToClassName(separatorColor)}--background-color`].join(' ')
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-separator__text"
   }, children || /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, "Date Separator")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: ['sendbird-separator__right', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+    className: ['sendbird-separator__right', `${color.changeColorToClassName(separatorColor)}--background-color`].join(' ')
   }));
 };
 

package/cjs/ui/DateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSeparator.js","sources":["../../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_a","_b","children","_c","className","_d","separatorColor","Colors","ONBACKGROUND_4","React","createElement","__spreadArray","Array","isArray","join","concat","changeColorToClassName","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;;;;;;;AAgBA,IAAMA,aAAa,GAAG,UAACC,EAIF,EAAA;MAHnBC,EAAe,GAAAD,EAAA,CAAAE,QAAA;IAAfA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA;IACfE,EAAA,GAAAH,EAAA,CAAAI,SAAc;IAAdA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAAA,EAAA;IACdE,sBAAsC;IAAtCC,cAAc,mBAAGC,YAAM,CAACC,cAAc,GAAAH,EAAA,CAAA;EAEtC,oBACEI,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEN,IAAAA,SAAS,EAAEO,uBAAA,CAAAA,uBAAA,CAAA,EAAA,EACLC,KAAK,CAACC,OAAO,CAACT,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,EAAC,IAAA,CAAA,EAAA,CACvD,oBAAoB,CACpB,EAAA,KAAA,CAAA,CAAAU,IAAI,CAAC,GAAG,CAAA;GAEVL,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAE,CAAC,0BAA0B,EAAE,EAAG,CAAAW,MAAA,CAAAC,4BAAsB,CAACV,cAAc,CAAC,uBAAoB,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAA;GACpH,CAAA,eAAAL,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAC,0BAAA;AAA0B,GAAA,EAErCF,QAAQ,iBAENO,yBAAA,CAAAC,aAAA,CAACO,cAAK,EAAA;IAACC,IAAI,EAAEC,wBAAe,CAACC,SAAU;IAACC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;AAAe,GAAA,EACxE,gBACF,CACD,CAGL,eAAAd,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAE,CAAC,2BAA2B,EAAE,EAAG,CAAAW,MAAA,CAAAC,4BAAsB,CAACV,cAAc,CAAC,uBAAoB,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAA;AAAE,GAAA,CACzH,CAAM,CAAA;AAEV;;;;"}
+{"version":3,"file":"DateSeparator.js","sources":["../../../src/ui/DateSeparator/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport './index.scss';\n\nimport {\n  Colors,\n  changeColorToClassName,\n} from '../../utils/color';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface DateSeparatorProps {\n  children?: string | ReactElement;\n  className?: string | Array<string>;\n  separatorColor?: Colors;\n}\nconst DateSeparator = ({\n  children = null,\n  className = '',\n  separatorColor = Colors.ONBACKGROUND_4,\n}: DateSeparatorProps): ReactElement => {\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-separator',\n      ].join(' ')}\n    >\n      <div className={['sendbird-separator__left', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n      <div className=\"sendbird-separator__text\">\n        {\n          children\n          || (\n            <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>\n              Date Separator\n            </Label>\n          )\n        }\n      </div>\n      <div className={['sendbird-separator__right', `${changeColorToClassName(separatorColor)}--background-color`].join(' ')} />\n    </div>\n  );\n};\n\nexport default DateSeparator;\n"],"names":["DateSeparator","_ref","children","className","separatorColor","Colors","ONBACKGROUND_4","React","createElement","Array","isArray","join","changeColorToClassName","Label","type","LabelTypography","CAPTION_2","color","LabelColors","ONBACKGROUND_2"],"mappings":";;;;;;;;;;;;AAgBMA,MAAAA,aAAa,GAAGC,IAAA,IAIkB;EAAA,IAJjB;AACrBC,IAAAA,QAAQ,GAAG,IAAI;AACfC,IAAAA,SAAS,GAAG,EAAE;IACdC,cAAc,GAAGC,YAAM,CAACC,cAAAA;AACN,GAAC,GAAAL,IAAA,CAAA;EACnB,oBACEM,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAE,CACT,IAAIM,KAAK,CAACC,OAAO,CAACP,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,EACvD,oBAAoB,CACrB,CAACQ,IAAI,CAAC,GAAG,CAAA;GAEVJ,eAAAA,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAE,CAAC,0BAA0B,EAAG,GAAES,4BAAsB,CAACR,cAAc,CAAE,CAAmB,kBAAA,CAAA,CAAC,CAACO,IAAI,CAAC,GAAG,CAAA;AAAE,GAAE,CAAC,eACzHJ,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAC,0BAAA;AAA0B,GAAA,EAErCD,QAAQ,iBAENK,yBAAA,CAAAC,aAAA,CAACK,cAAK,EAAA;IAACC,IAAI,EAAEC,wBAAe,CAACC,SAAU;IAACC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;AAAe,GAAA,EAAC,gBAEpE,CAGR,CAAC,eACNZ,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,SAAS,EAAE,CAAC,2BAA2B,EAAG,GAAES,4BAAsB,CAACR,cAAc,CAAE,CAAmB,kBAAA,CAAA,CAAC,CAACO,IAAI,CAAC,GAAG,CAAA;AAAE,GAAE,CACtH,CAAC,CAAA;AAEV;;;;"}

package/cjs/ui/EmojiReactions.js

@@ -8,60 +8,62 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../index-2ac1f908.js');
-var LocalizationContext = require('../LocalizationContext-498cb747.js');
-require('../tslib.es6-8f4b0cfe.js');
-require('../index-b8a20afd.js');
+var index = require('../index-f2146bae.js');
+var LocalizationContext = require('../LocalizationContext-af96cf5f.js');
+require('../index-73643285.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
+require('../stringSet-68748705.js');
+require('../_rollupPluginBabelHelpers-c5955c81.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-1ffa3b79.js');
+require('../uuid-0b4ed44c.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-8b6bb1ee.js');
+require('../index-83d1d15e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var EmojiReactions = function (_a) {
-  var _b, _c;
-  var className = _a.className,
-    userId = _a.userId,
-    message = _a.message,
-    emojiContainer = _a.emojiContainer,
-    memberNicknamesMap = _a.memberNicknamesMap,
-    _d = _a.spaceFromTrigger,
-    spaceFromTrigger = _d === void 0 ? {
+const EmojiReactions = _ref => {
+  var _message$reactions, _message$reactions2;
+  let {
+    className,
+    userId,
+    message,
+    emojiContainer,
+    memberNicknamesMap,
+    spaceFromTrigger = {
       x: 0,
       y: 0
-    } : _d,
-    _e = _a.isByMe,
-    isByMe = _e === void 0 ? false : _e,
-    toggleReaction = _a.toggleReaction;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-  var emojisMap = index.getEmojiMapAll(emojiContainer);
-  var addReactionRef = React.useRef(null);
+    },
+    isByMe = false,
+    toggleReaction
+  } = _ref;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const emojisMap = index.getEmojiMapAll(emojiContainer);
+  const addReactionRef = React.useRef(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
-  }, ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 && message.reactions.map(function (reaction) {
-    var _a, _b;
-    var reactedByMe = index.isReactedBy(userId, reaction);
+  }, (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && message.reactions.map(reaction => {
+    var _reaction$userIds, _emojisMap$get;
+    const reactedByMe = index.isReactedBy(userId, reaction);
     return /*#__PURE__*/React__default["default"].createElement(ui_TooltipWrapper, {
       className: "sendbird-emoji-reactions__reaction-badge",
       key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
-      hoverTooltip: ((_a = reaction === null || reaction === void 0 ? void 0 : reaction.userIds) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
+      hoverTooltip: (reaction === null || reaction === void 0 ? void 0 : (_reaction$userIds = reaction.userIds) === null || _reaction$userIds === void 0 ? void 0 : _reaction$userIds.length) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
     }, /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
       count: reaction.userIds.length,
       selected: reactedByMe,
-      onClick: function (e) {
-        var _a;
+      onClick: e => {
+        var _e$stopPropagation;
         toggleReaction(message, reaction.key, reactedByMe);
-        (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
       }
     }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
       circle: true,
-      url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '',
+      url: ((_emojisMap$get = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _emojisMap$get === void 0 ? void 0 : _emojisMap$get.url) || '',
       width: "20px",
       height: "20px",
       defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
@@ -70,64 +72,54 @@ var EmojiReactions = function (_a) {
         type: ui_Icon.IconTypes.QUESTION
       })
     })));
-  }), ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) < emojisMap.size && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
-        className: "sendbird-emoji-reactions__add-reaction-badge",
-        ref: addReactionRef,
-        isAdd: true,
-        onClick: function (e) {
-          var _a;
-          toggleDropdown();
-          (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+  }), (message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length) < emojisMap.size && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
+      className: "sendbird-emoji-reactions__add-reaction-badge",
+      ref: addReactionRef,
+      isAdd: true,
+      onClick: e => {
+        var _e$stopPropagation2;
+        toggleDropdown();
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      type: ui_Icon.IconTypes.EMOJI_MORE,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+      width: "20px",
+      height: "20px"
+    })),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
+      parentRef: addReactionRef,
+      parentContainRef: addReactionRef,
+      closeDropdown: closeDropdown,
+      spacefromTrigger: spaceFromTrigger
+    }, index.getEmojiListAll(emojiContainer).map(emoji => {
+      var _message$reactions3, _message$reactions3$f, _message$reactions3$f2;
+      const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions3 = message.reactions) === null || _message$reactions3 === void 0 ? void 0 : (_message$reactions3$f = _message$reactions3.find(reaction => reaction.key === emoji.key)) === null || _message$reactions3$f === void 0 ? void 0 : (_message$reactions3$f2 = _message$reactions3$f.userIds) === null || _message$reactions3$f2 === void 0 ? void 0 : _message$reactions3$f2.some(reactorId => reactorId === userId);
+      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+        key: emoji.key,
+        width: "36px",
+        height: "36px",
+        selected: isReacted,
+        onClick: e => {
+          closeDropdown();
+          toggleReaction(message, emoji.key, isReacted);
+          e === null || e === void 0 ? void 0 : e.stopPropagation();
         }
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.EMOJI_MORE,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-        width: "20px",
-        height: "20px"
-      }));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
-        parentRef: addReactionRef,
-        parentContainRef: addReactionRef,
-        closeDropdown: closeDropdown,
-        spacefromTrigger: spaceFromTrigger
-      }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
-        var _a, _b, _c;
-        var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) {
-          return reaction.key === emoji.key;
-        })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
-          return reactorId === userId;
-        });
-        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
-          key: emoji.key,
-          width: "36px",
-          height: "36px",
-          selected: isReacted,
-          onClick: function (e) {
-            closeDropdown();
-            toggleReaction(message, emoji.key, isReacted);
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-          url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+        url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+        width: "28px",
+        height: "28px",
+        placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+          type: ui_Icon.IconTypes.QUESTION,
+          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
           width: "28px",
-          height: "28px",
-          placeHolder: function (style) {
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              style: style
-            }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-              type: ui_Icon.IconTypes.QUESTION,
-              fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-              width: "28px",
-              height: "28px"
-            }));
-          }
-        }));
+          height: "28px"
+        }))
       }));
-    }
+    }))
   }));
 };
 

package/cjs/ui/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: { x: number, y: number };\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = { x: 0, y: 0 },\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={(e) => {\n                  toggleReaction(message, reaction.key, reactedByMe);\n                  e?.stopPropagation?.();\n                }}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={(e) => {\n                toggleDropdown();\n                e?.stopPropagation?.();\n              }}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = (message?.reactions?.\n                  find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId));\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(e): void => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                      e?.stopPropagation();\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","x","y","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","createElement","getClassName","_b","reactions","length","map","reaction","reactedByMe","isReactedBy","TooltipWrapper","key","hoverTooltip","userIds","Tooltip","getEmojiTooltipString","ReactionBadge","count","selected","onClick","e","stopPropagation","ImageRenderer","circle","url","get","width","height","defaultComponent","Icon","type","IconTypes","QUESTION","_c","size","ContextMenu","menuTrigger","toggleDropdown","ref","isAdd","EMOJI_MORE","fillColor","IconColors","ON_BACKGROUND_3","menuItems","closeDropdown","EmojiListItems","parentRef","parentContainRef","spacefromTrigger","getEmojiListAll","emoji","isReacted","find","some","reactorId","ReactionButton","placeHolder","style"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: { x: number, y: number };\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = { x: 0, y: 0 },\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={(e) => {\n                  toggleReaction(message, reaction.key, reactedByMe);\n                  e?.stopPropagation?.();\n                }}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={(e) => {\n                toggleDropdown();\n                e?.stopPropagation?.();\n              }}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = (message?.reactions?.\n                  find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId));\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(e): void => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                      e?.stopPropagation();\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_ref","_message$reactions","_message$reactions2","className","userId","message","emojiContainer","memberNicknamesMap","spaceFromTrigger","x","y","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","createElement","getClassName","reactions","length","map","reaction","_reaction$userIds","_emojisMap$get","reactedByMe","isReactedBy","TooltipWrapper","key","hoverTooltip","userIds","Tooltip","getEmojiTooltipString","ReactionBadge","count","selected","onClick","e","_e$stopPropagation","stopPropagation","call","ImageRenderer","circle","url","get","width","height","defaultComponent","Icon","type","IconTypes","QUESTION","size","ContextMenu","menuTrigger","toggleDropdown","ref","isAdd","_e$stopPropagation2","EMOJI_MORE","fillColor","IconColors","ON_BACKGROUND_3","menuItems","closeDropdown","EmojiListItems","parentRef","parentContainRef","spacefromTrigger","getEmojiListAll","emoji","_message$reactions3","_message$reactions3$f","_message$reactions3$f2","isReacted","find","some","reactorId","ReactionButton","placeHolder","style"],"mappings":"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"}

package/cjs/ui/FileMessageItemBody.js

@@ -1,37 +1,37 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-b8a20afd.js');
+var ui_Label = require('../index-73643285.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../index-2ac1f908.js');
-var color = require('../color-7f7508e6.js');
-var MediaQueryContext = require('../MediaQueryContext-b9c2ec1f.js');
+var index = require('../index-f2146bae.js');
+var color = require('../color-afeb8dc2.js');
+var MediaQueryContext = require('../MediaQueryContext-8ec3f647.js');
 require('prop-types');
-require('../stringSet-061fe0c1.js');
-require('../tslib.es6-8f4b0cfe.js');
+require('../stringSet-68748705.js');
+require('../_rollupPluginBabelHelpers-c5955c81.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FileMessageItemBody(_a) {
-  var _b;
-  var className = _a.className,
-    message = _a.message,
-    _c = _a.isByMe,
-    isByMe = _c === void 0 ? false : _c,
-    _d = _a.mouseHover,
-    mouseHover = _d === void 0 ? false : _d,
-    _e = _a.isReactionEnabled,
-    isReactionEnabled = _e === void 0 ? false : _e,
-    _f = _a.truncateLimit,
-    truncateLimit = _f === void 0 ? null : _f;
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  var truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+function FileMessageItemBody(_ref) {
+  var _message$reactions;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false,
+    truncateLimit = null
+  } = _ref;
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.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' : ''])
+    className: index.getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 ? 'reactions' : ''])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-file-message-item-body__file-icon"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
@@ -48,7 +48,7 @@ function FileMessageItemBody(_a) {
     height: "24px"
   })), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
     className: "sendbird-file-message-item-body__file-name",
-    onClick: function () {
+    onClick: () => {
       window.open(message === null || message === void 0 ? void 0 : message.url);
     },
     color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1

package/cjs/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';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  truncateLimit?: number;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  truncateLimit = null,\n}: Props): ReactElement {\n  const { isMobile } = useMediaQueryContext();\n  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);\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, truncateMaxNum)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","_e","isReactionEnabled","_f","truncateLimit","isMobile","useMediaQueryContext","truncateMaxNum","React","createElement","getClassName","_b","reactions","length","Icon","type","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","fillColor","IconColors","PRIMARY","width","height","TextButton","onClick","window","open","url","color","Colors","ONCONTENT_1","ONBACKGROUND_1","Label","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":"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"}
+{"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';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  truncateLimit?: number;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  truncateLimit = null,\n}: Props): ReactElement {\n  const { isMobile } = useMediaQueryContext();\n  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);\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, truncateMaxNum)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_ref","_message$reactions","className","message","isByMe","mouseHover","isReactionEnabled","truncateLimit","isMobile","useMediaQueryContext","truncateMaxNum","React","createElement","getClassName","reactions","length","Icon","type","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","fillColor","IconColors","PRIMARY","width","height","TextButton","onClick","window","open","url","color","Colors","ONCONTENT_1","ONBACKGROUND_1","Label","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":"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"}