@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/ui/SortByRow.js

@@ -0,0 +1,37 @@
+import React__default from 'react';
+import { u as uuidv4 } from '../uuid-d94880c0.js';
+
+const componentClassName = 'sendbird-sort-by-row';
+function SortByRow(_ref) {
+  let {
+    className = '',
+    maxItemCount,
+    itemWidth,
+    itemHeight,
+    children
+  } = _ref;
+  if (Array.isArray(children) && children.length > maxItemCount) {
+    const result = [];
+    for (let i = 0; i < children.length; i += maxItemCount) {
+      result.push( /*#__PURE__*/React__default.createElement("div", {
+        className: [...(Array.isArray(className) ? className : [className]), componentClassName].join(' '),
+        key: uuidv4(),
+        style: {
+          width: itemWidth * maxItemCount,
+          height: itemHeight
+        }
+      }, children.slice(i, i + maxItemCount)));
+    }
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, result);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), componentClassName].join(' '),
+    style: {
+      width: itemWidth * (Array.isArray(children) ? children.length : 1),
+      height: itemHeight
+    }
+  }, children);
+}
+
+export { SortByRow as default };
+//# sourceMappingURL=SortByRow.js.map

package/ui/TextButton.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { C as Colors, c as changeColorToClassName } from '../color-4e19bb80.js';
+
+const TextButton = _ref => {
+  let {
+    className = '',
+    color = Colors.ONBACKGROUND_1,
+    disabled = false,
+    disableUnderline = false,
+    onClick = () => {/* noop */},
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), changeColorToClassName(color), disableUnderline ? 'sendbird-textbutton--not-underline' : 'sendbird-textbutton', disabled ? 'sendbird-textbutton--disabled' : ''].join(' '),
+    role: "button",
+    tabIndex: 0,
+    onClick: e => onClick(e),
+    onKeyPress: e => onClick(e)
+  }, children);
+};
+
+export { TextButton as default };
+//# sourceMappingURL=TextButton.js.map

package/ui/TextMessageItemBody.js

@@ -0,0 +1,73 @@
+import React__default, { useContext, useMemo } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import { h as getClassName, B as isEditedMessage } from '../index-42dda0be.js';
+import { a as LocalizationContext } from '../LocalizationContext-53fdaf30.js';
+import { t as tokenizeMessage } from '../tokenize-ca9f78c1.js';
+import { T as TextFragment } from '../index-9dd15aad.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../consts-72f79e08.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../index-b596c800.js';
+import '../index.module-dea47541.js';
+import '../Message/context.js';
+import './MentionLabel.js';
+import './ContextMenu.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../uuid-d94880c0.js';
+import './UserProfile.js';
+import '../UserProfileContext-0041c5c2.js';
+import '../sendbirdSelectors.js';
+import '../topics-86131d90.js';
+import '../utils-b0301443.js';
+import './Avatar.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import './Button.js';
+import '../useSendbirdStateContext.js';
+import '../withSendbird.js';
+import './LinkLabel.js';
+
+function TextMessageItemBody(_ref) {
+  var _message$mentionedMes, _message$mentionedUse, _message$reactions;
+  let {
+    className = '',
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isMentionEnabled = false,
+    isReactionEnabled = false
+  } = _ref;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const isMessageMentioned = isMentionEnabled && (message === null || message === void 0 ? void 0 : (_message$mentionedMes = message.mentionedMessageTemplate) === null || _message$mentionedMes === void 0 ? void 0 : _message$mentionedMes.length) > 0 && (message === null || message === void 0 ? void 0 : (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.length) > 0;
+  const tokens = useMemo(() => {
+    if (isMessageMentioned) {
+      return tokenizeMessage({
+        mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+        messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate
+      });
+    }
+    return tokenizeMessage({
+      messageText: message === null || message === void 0 ? void 0 : message.message
+    });
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
+  return /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, TEXT_MESSAGE_BODY_CLASSNAME, 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.createElement(TextFragment, {
+    tokens: tokens
+  }), isEditedMessage(message) && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-text-message-item-body__message edited",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2
+  }, ` ${stringSet.MESSAGE_EDITED} `)));
+}
+
+export { TextMessageItemBody as default };
+//# sourceMappingURL=TextMessageItemBody.js.map

package/ui/ThreadReplies.js

@@ -0,0 +1,79 @@
+import React__default from 'react';
+import Avatar from './Avatar.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import { u as useLocalization } from '../LocalizationContext-53fdaf30.js';
+import { u as uuidv4 } from '../uuid-d94880c0.js';
+import './ImageRenderer.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../index-b596c800.js';
+
+function ThreadReplies(_ref) {
+  var _mostRepliedUsers$;
+  let {
+    className,
+    threadInfo,
+    onClick
+  } = _ref;
+  const {
+    mostRepliedUsers = [],
+    replyCount
+  } = threadInfo;
+  const {
+    stringSet
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-ui-thread-replies ${className}`,
+    role: "button",
+    onClick: e => {
+      onClick(e);
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+    },
+    onKeyDown: e => {
+      onClick(e);
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles"
+  }, mostRepliedUsers.slice(0, 4).map(user => {
+    return /*#__PURE__*/React__default.createElement(Avatar, {
+      key: uuidv4(),
+      className: "sendbird-ui-thread-replies__user-profiles__avatar",
+      src: user === null || user === void 0 ? void 0 : user.profileUrl,
+      alt: "user profile",
+      width: "20px",
+      height: "20px"
+    });
+  }), (mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers.length) >= 5 && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__image",
+    src: mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : (_mostRepliedUsers$ = mostRepliedUsers[4]) === null || _mostRepliedUsers$ === void 0 ? void 0 : _mostRepliedUsers$.profileUrl,
+    alt: "user profile",
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__cover"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__plus"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.PLUS,
+    fillColor: IconColors.WHITE,
+    width: "16px",
+    height: "16px"
+  })))), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-ui-thread-replies__reply-counts",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.PRIMARY
+  }, replyCount === 1 ? `${replyCount} ${stringSet.CHANNEL__THREAD_REPLY}` : `${replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount} ${stringSet.CHANNEL__THREAD_REPLIES}`), /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-ui-thread-replies__icon",
+    type: IconTypes.CHEVRON_RIGHT,
+    fillColor: IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  }));
+}
+
+export { ThreadReplies as default };
+//# sourceMappingURL=ThreadReplies.js.map

package/ui/ThumbnailMessageItemBody.js

@@ -0,0 +1,71 @@
+import { b as _extends } from '../_rollupPluginBabelHelpers-71645d31.js';
+import React__default, { useState } from 'react';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import ImageRenderer from './ImageRenderer.js';
+import { h as getClassName, p as isVideoMessage, o as isGifMessage, C as isSentMessage } from '../index-42dda0be.js';
+import { n as noop } from '../utils-b0301443.js';
+import { u as useLongPress } from '../useLongPress-2fd9d19f.js';
+import 'prop-types';
+import '../utils/message/getOutgoingMessageState.js';
+import '../MediaQueryContext-6fca0d36.js';
+
+function ThumbnailMessageItemBody(_ref) {
+  var _thumbnails$, _message$reactions$le, _message$reactions;
+  let {
+    className = '',
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false,
+    showFileViewer = noop,
+    style = {}
+  } = _ref;
+  const {
+    thumbnails = []
+  } = message;
+  const thumbnailUrl = thumbnails.length > 0 ? (_thumbnails$ = thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
+  const [imageRendered, setImageRendered] = useState(false);
+  const onClickHandler = useLongPress({
+    onLongPress: noop,
+    onClick: () => {
+      if (isSentMessage(message)) {
+        showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
+      }
+    }
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_message$reactions$le = (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) !== null && _message$reactions$le !== void 0 ? _message$reactions$le : 0) > 0 ? 'reactions' : ''])
+  }, onClickHandler), /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    className: "sendbird-thumbnail-message-item-body__thumbnail",
+    url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url),
+    alt: message === null || message === void 0 ? void 0 : message.type,
+    width: (style === null || style === void 0 ? void 0 : style.width) || '360px',
+    height: (style === null || style === void 0 ? void 0 : style.height) || '270px',
+    onLoad: () => {
+      setImageRendered(true);
+    },
+    placeHolder: style_ => /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-thumbnail-message-item-body__placeholder",
+      style: style_
+    })
+  }), isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default.createElement("video", {
+    className: "sendbird-thumbnail-message-item-body__video"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: message === null || message === void 0 ? void 0 : message.url,
+    type: message === null || message === void 0 ? void 0 : message.type
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__image-cover"
+  }), (isVideoMessage(message) || isGifMessage(message)) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF,
+    fillColor: IconColors.GRAY,
+    width: "34px",
+    height: "34px"
+  }))));
+}
+
+export { ThumbnailMessageItemBody as default };
+//# sourceMappingURL=ThumbnailMessageItemBody.js.map

package/ui/Toggle.js

@@ -0,0 +1,191 @@
+import React__default, { useState, useCallback } from 'react';
+import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-71645d31.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import '../withSendbird.js';
+
+/**
+ * The default value of `checked` should be null
+ * to support both case of controlled and uncontrolled component
+ * ref: https://github.com/aaronshaf/react-toggle#props
+ */
+const noop = () => {/* noop */};
+const TOGGLE_DEFAULT_VALUE = {
+  checked: null,
+  defaultChecked: false,
+  disabled: false,
+  onChange: noop,
+  onFocus: noop,
+  onBlur: noop
+};
+const ToggleContext = /*#__PURE__*/React__default.createContext(TOGGLE_DEFAULT_VALUE);
+function useToggleContext() {
+  const context = React__default.useContext(ToggleContext);
+  if (context === undefined) {
+    throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');
+  }
+  return context;
+}
+
+// Props Explanation https://github.com/aaronshaf/react-toggle#props
+function ToggleContainer(_ref) {
+  let {
+    checked = TOGGLE_DEFAULT_VALUE.checked,
+    // null
+    defaultChecked = TOGGLE_DEFAULT_VALUE.defaultChecked,
+    disabled = TOGGLE_DEFAULT_VALUE.disabled,
+    onChange = TOGGLE_DEFAULT_VALUE.onChange,
+    onFocus = TOGGLE_DEFAULT_VALUE.onFocus,
+    onBlur = TOGGLE_DEFAULT_VALUE.onBlur,
+    children
+  } = _ref;
+  const [isChecked, setChecked] = useState(defaultChecked || false);
+  const handleChange = useCallback(e => {
+    if (disabled) {
+      return;
+    }
+    if (checked === null) {
+      setChecked(e.currentTarget.checked);
+    }
+    onChange(e);
+  }, [onChange, checked]);
+  return /*#__PURE__*/React__default.createElement(ToggleContext.Provider, {
+    value: {
+      checked: checked !== null ? checked : isChecked,
+      disabled,
+      onChange: handleChange,
+      onFocus: e => {
+        if (!disabled) {
+          onFocus(e);
+        }
+      },
+      onBlur: e => {
+        if (!disabled) {
+          onBlur(e);
+        }
+      }
+    }
+  }, children);
+}
+
+function filterNumber(input) {
+  if (typeof input !== 'string' && typeof input !== 'number') {
+    try {
+      const {
+        config
+      } = useSendbirdStateContext();
+      const {
+        logger
+      } = config;
+      logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);
+    } catch (_) {/* noop */}
+    return [];
+  }
+  if (typeof input === 'number') {
+    return [input];
+  }
+  const regex = /(-?\d+)(\.\d+)?/g;
+  const numbers = input.match(regex) || [];
+  return numbers.map(parseFloat);
+}
+
+function ToggleUI(props) {
+  var _filterNumber;
+  const {
+    reversed = false,
+    width = '40px',
+    animationDuration = '0.5s',
+    style = {},
+    name = '',
+    id = '',
+    ariaLabel = '',
+    ariaLabelledby = ''
+  } = props;
+  const {
+    checked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur
+  } = useToggleContext();
+
+  // animation should not be activated in the initialization step
+  const [animatedClassName, setAnimatedClassName] = useState('');
+  const toggleWidth = (_filterNumber = filterNumber(width)) === null || _filterNumber === void 0 ? void 0 : _filterNumber[0];
+  const toggleHeight = toggleWidth / 2;
+  // The size of dot should be 60% of toggle height
+  const dotSize = toggleHeight * 0.6;
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: ['sendbird-input-toggle-button', animatedClassName, checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked', disabled ? 'sendbird-input-toggle-button--disabled' : [], reversed ? 'sendbird-input-toggle-button--reversed' : []].flat().join(' '),
+    style: _objectSpread2({
+      width: `${toggleWidth}px`,
+      height: `${toggleHeight}px`,
+      borderRadius: `${dotSize}px`
+    }, style)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: ['sendbird-input-toggle-button__inner-dot', checked ? 'sendbird-input-toggle-button__inner-dot--activate' : 'sendbird-input-toggle-button__inner-dot--inactivate'].join(' '),
+    style: {
+      width: `${dotSize}px`,
+      height: `${dotSize}px`,
+      animationDuration
+    }
+  }), /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    name: name,
+    id: id,
+    checked: checked,
+    disabled: disabled,
+    onChange: e => {
+      onChange(e);
+      setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
+    },
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+}
+
+function Toggle(props) {
+  const {
+    // ToggleProvider
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    // ToggleUI
+    className,
+    reversed,
+    width,
+    // height will be half of width
+    animationDuration,
+    style,
+    name,
+    id,
+    ariaLabel,
+    ariaLabelledby
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-ui-toggle ${className}`
+  }, /*#__PURE__*/React__default.createElement(ToggleContainer, {
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, /*#__PURE__*/React__default.createElement(ToggleUI, {
+    reversed: reversed,
+    width: width,
+    animationDuration: animationDuration,
+    style: style,
+    name: name,
+    id: id,
+    ariaLabel: ariaLabel,
+    ariaLabelledby: ariaLabelledby
+  })));
+}
+
+export { Toggle, ToggleContainer, ToggleUI, useToggleContext };
+//# sourceMappingURL=Toggle.js.map

package/ui/Tooltip.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+
+function Tooltip(_ref) {
+  let {
+    className = '',
+    children = ''
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-tooltip'].join(' ')
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-tooltip__text",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONCONTENT_1
+  }, children));
+}
+
+export { Tooltip as default };
+//# sourceMappingURL=Tooltip.js.map

package/ui/UnknownMessageItemBody.js

@@ -0,0 +1,37 @@
+import React__default, { useContext } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import { h as getClassName } from '../index-42dda0be.js';
+import { a as LocalizationContext } from '../LocalizationContext-53fdaf30.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../index-b596c800.js';
+
+function UnknownMessageItemBody(_ref) {
+  var _message$reactions;
+  let {
+    className,
+    message,
+    isByMe = false,
+    mouseHover = false,
+    isReactionEnabled = false
+  } = _ref;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, 'sendbird-unknown-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.createElement(Label, {
+    className: "sendbird-unknown-message-item-body__header",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+  }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-unknown-message-item-body__description",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2
+  }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE));
+}
+
+export { UnknownMessageItemBody as default };
+//# sourceMappingURL=UnknownMessageItemBody.js.map

package/ui/UserListItem.js

@@ -0,0 +1,127 @@
+import React__default, { useContext } from 'react';
+import { a as UserProfileContext } from '../UserProfileContext-0041c5c2.js';
+import { a as LocalizationContext } from '../LocalizationContext-53fdaf30.js';
+import Avatar from './Avatar.js';
+import MutedAvatarOverlay from './MutedAvatarOverlay.js';
+import Checkbox from './Checkbox.js';
+import UserProfile from './UserProfile.js';
+import ContextMenu, { MenuItems } from './ContextMenu.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-20f528de.js';
+import 'prop-types';
+import '../stringSet-63246007.js';
+import '../index-b596c800.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import '../uuid-d94880c0.js';
+import '../sendbirdSelectors.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import '../topics-86131d90.js';
+import '../utils-b0301443.js';
+import './Button.js';
+import '../useSendbirdStateContext.js';
+import '../withSendbird.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../index-42dda0be.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+function UserListItem(_ref) {
+  let {
+    user,
+    className,
+    checked,
+    checkBox,
+    isOperator,
+    disabled,
+    disableMessaging,
+    currentUser,
+    action,
+    onChange,
+    avatarSize = '40px'
+  } = _ref;
+  const uniqueKey = user.userId;
+  const actionRef = React__default.useRef(null);
+  const parentRef = React__default.useRef(null);
+  const avatarRef = React__default.useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = useContext(UserProfileContext);
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-user-list-item'].join(' '),
+    ref: parentRef
+  }, (user === null || user === void 0 ? void 0 : user.isMuted) && /*#__PURE__*/React__default.createElement(MutedAvatarOverlay, {
+    height: 40,
+    width: 40
+  }), /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(Avatar, {
+      className: "sendbird-user-list-item__avatar",
+      ref: avatarRef,
+      src: user.profileUrl,
+      width: avatarSize,
+      height: avatarSize,
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
+        }
+      }
+    }),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+      openLeft: true,
+      parentRef: avatarRef
+      // for catching location(x, y) of MenuItems
+      ,
+      parentContainRef: avatarRef
+      // for toggling more options(menus & reactions)
+      ,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user,
+      currentUserId: currentUser,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+      disableMessaging: disableMessaging,
+      user: user,
+      currentUserId: currentUser,
+      onSuccess: closeDropdown
+    }))
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item__title",
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && ' (You)'),
+  // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item__subtitle",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, user.userId), checkBox && /*#__PURE__*/React__default.createElement("label", {
+    className: "sendbird-user-list-item__checkbox",
+    htmlFor: uniqueKey
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    id: uniqueKey,
+    checked: checked,
+    disabled: disabled,
+    onChange: event => onChange(event)
+  })), isOperator && /*#__PURE__*/React__default.createElement(Label, {
+    className: ['sendbird-user-list-item__operator', checkBox ? 'checkbox' : ''].join(' '),
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, "Operator"), action && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-user-list-item__action",
+    ref: actionRef
+  }, action({
+    actionRef,
+    parentRef
+  })));
+}
+
+export { UserListItem as default };
+//# sourceMappingURL=UserListItem.js.map