@sendbird/uikit-react 3.14.0-beta.2 → 3.14.1

package/cjs/ui/UserProfile.js

@@ -1,20 +1,20 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
-var UserProfileContext = require('../chunks/bundle-BF04PgMH.js');
+var LocalizationContext = require('../chunks/bundle-C5nXYn9D.js');
+var UserProfileContext = require('../chunks/bundle-U2gOXD87.js');
 var sendbirdSelectors = require('../sendbirdSelectors.js');
-var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var ui_Avatar = require('../chunks/bundle-CKVCRcX8.js');
+var ui_Label = require('../chunks/bundle-BOcTTiW2.js');
 var ui_Button = require('./Button.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-1hCsXfVb.js');
-require('../chunks/bundle-BMsGwLym.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CbrvdaBm.js');
+require('../chunks/bundle-BBn6e1TE.js');
+require('../chunks/bundle-DMqilxSQ.js');
+require('../chunks/bundle-BN-LMdIM.js');
+require('../chunks/bundle-By-3k_MB.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-B-3hDIdO.js');
 require('./Icon.js');
 require('../withSendbird.js');
 

package/cjs/ui/VoiceMessageInput.js

@@ -5,15 +5,15 @@ require('./PlaybackTime.js');
 require('./ProgressBar.js');
 require('./TextButton.js');
 require('./Icon.js');
-require('../chunks/bundle-C88DsCNB.js');
-require('../chunks/bundle-CmFB08Wf.js');
-var ui_VoiceMessageInput = require('../chunks/bundle-BVLguSfh.js');
-require('../chunks/bundle-Dpu1gg5r.js');
-require('../chunks/bundle-Q5_I3n-8.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-SIHqK2VF.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-BOcTTiW2.js');
+require('../chunks/bundle-C5nXYn9D.js');
+var ui_VoiceMessageInput = require('../chunks/bundle-b2Ui6hpE.js');
+require('../chunks/bundle-DGw6pGp5.js');
+require('../chunks/bundle-By-3k_MB.js');
+require('../chunks/bundle-CbrvdaBm.js');
+require('../chunks/bundle-BX7oj4JP.js');
+require('../chunks/bundle-BN-LMdIM.js');
+require('../chunks/bundle-BBn6e1TE.js');
 
 
 

package/cjs/ui/VoiceMessageItemBody.js

@@ -8,18 +8,18 @@ var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
 var ui_PlaybackTime = require('./PlaybackTime.js');
 var ui_Loader = require('./Loader.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
-var VoicePlayer_context = require('../chunks/bundle-BwO19Jro.js');
-require('../chunks/bundle-Dpu1gg5r.js');
+var ui_Label = require('../chunks/bundle-BOcTTiW2.js');
+var VoicePlayer_context = require('../chunks/bundle-_ouF-COo.js');
+require('../chunks/bundle-DGw6pGp5.js');
 require('../VoiceRecorder/context.js');
-require('../chunks/bundle-CmFB08Wf.js');
-require('../chunks/bundle-CqF06THu.js');
-require('../chunks/bundle-1hCsXfVb.js');
-require('../chunks/bundle-dNtU9_eg.js');
-require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-C5nXYn9D.js');
+require('../chunks/bundle-CbrvdaBm.js');
+require('../chunks/bundle-BBn6e1TE.js');
+require('../chunks/bundle-DwFtclQP.js');
+require('../chunks/bundle-By-3k_MB.js');
 require('react-dom');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-CsvKRjaK.js');
+require('../chunks/bundle-BN-LMdIM.js');
+require('../chunks/bundle-Cv9f4q9i.js');
 require('./IconButton.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');

package/cjs/ui/Word.js

@@ -1,31 +1,31 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var ui_Label = require('../chunks/bundle-BOcTTiW2.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var index = require('../chunks/bundle-B1Nml3ap.js');
+var index = require('../chunks/bundle-DRrLQVHb.js');
 var ui_MentionLabel = require('./MentionLabel.js');
-require('../chunks/bundle-Q5_I3n-8.js');
-require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-By-3k_MB.js');
+require('../chunks/bundle-CbrvdaBm.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-CCI24NOf.js');
 require('./ContextMenu.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-DfYperTC.js');
+require('../chunks/bundle-gGCaMzPZ.js');
 require('./UserProfile.js');
-require('../chunks/bundle-CmFB08Wf.js');
-require('../chunks/bundle-1hCsXfVb.js');
-require('../chunks/bundle-BF04PgMH.js');
+require('../chunks/bundle-C5nXYn9D.js');
+require('../chunks/bundle-BBn6e1TE.js');
+require('../chunks/bundle-U2gOXD87.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-BMsGwLym.js');
-require('../chunks/bundle-CDBTt08y.js');
-require('../chunks/bundle-BsGXZt6G.js');
+require('../chunks/bundle-DMqilxSQ.js');
+require('../chunks/bundle-BN-LMdIM.js');
+require('../chunks/bundle-CKVCRcX8.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-B-3hDIdO.js');
 require('./Icon.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');

package/cjs/useSendbirdStateContext.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var withSendbird = require('./withSendbird.js');
-require('./chunks/bundle-Q5_I3n-8.js');
+require('./chunks/bundle-By-3k_MB.js');
 
 /**
  * Example:

package/cjs/utils/message/isVoiceMessage.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('../../chunks/bundle-B1Nml3ap.js');
-require('../../chunks/bundle-Q5_I3n-8.js');
+var index = require('../../chunks/bundle-DRrLQVHb.js');
+require('../../chunks/bundle-By-3k_MB.js');
 require('@sendbird/chat/groupChannel');
 require('./getOutgoingMessageState.js');
-require('../../chunks/bundle-Cmmi9pdk.js');
+require('../../chunks/bundle-CCI24NOf.js');
 
 var isVoiceMessage = index.isVoiceMessage;
 

package/cjs/withSendbird.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('./chunks/bundle-Q5_I3n-8.js');
+var _tslib = require('./chunks/bundle-By-3k_MB.js');
 var React = require('react');
 
 var SendbirdSdkContext = React.createContext(null);

package/dist/index.css

@@ -1297,6 +1297,95 @@
 .sendbird-theme--dark .sendbird-icon-color--error [class*=fill] {
   fill: var(--sendbird-dark-error-200);
 }
+.sendbird-context-menu {
+  display: inline;
+}
+
+.sendbird__offline .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
+  cursor: not-allowed;
+}
+.sendbird__offline .sendbird-message-item-menu__list__menu-item.menu-item-delete {
+  cursor: pointer;
+}
+
+.sendbird-dropdown__menu {
+  z-index: 99999;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 140px;
+  margin: 0px;
+  padding: 8px 0px;
+  border-radius: 4px;
+  list-style: none;
+}
+.sendbird-theme--light .sendbird-dropdown__menu {
+  box-shadow: var(--sendbird-light-shadow-02);
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-dropdown__menu {
+  box-shadow: var(--sendbird-dark-shadow-02);
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-dropdown__menu .sendbird-dropdown__menu-item {
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 8px 16px;
+}
+.sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
+  background-color: var(--sendbird-dark-background-400);
+}
+
+.sendbird-dropdown__reaction-bar {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 44px;
+  max-width: 352px;
+  max-height: 208px;
+  overflow-y: scroll;
+  margin: 0px;
+  padding: 8px;
+  border-radius: 8px;
+  list-style: none;
+}
+.sendbird-theme--light .sendbird-dropdown__reaction-bar {
+  box-shadow: var(--sendbird-light-shadow-02);
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-dropdown__reaction-bar {
+  box-shadow: var(--sendbird-dark-shadow-02);
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button, .sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button--selected {
+  margin: 4px;
+}
+
+.sendbird-dropdown__menu-backdrop {
+  background-color: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.sendbird-sort-by-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
 /**
  * We operate the CSS files for Channel&GroupChannel modules in the GroupChannel.
  * So keep in mind that you should consider both components when you make changes in this file.
@@ -1320,7 +1409,6 @@
 .sendbird-conversation__messages {
   overflow: hidden;
   flex: 1 1 0;
-  order: 2;
 }
 
 .sendbird-conversation__messages-list {
@@ -1332,7 +1420,6 @@
 
 .sendbird-conversation__footer {
   width: 100%;
-  order: 3;
   padding: 0px 0px 24px 0px;
 }
 
@@ -1679,7 +1766,6 @@
   position: relative;
   height: 100%;
   overflow-x: hidden;
-  overflow-y: scroll;
 }
 .sendbird-conversation__messages .sendbird-separator,
 .sendbird-conversation__messages .sendbird-admin-message {
@@ -1981,11 +2067,6 @@
   color: var(--sendbird-dark-ondark-04);
   border: 1px solid var(--sendbird-dark-ondark-04);
 }
-.sendbird--mobile-mode .sendbird-msg-hoc > .ui_container_type__full {
-  padding: 0;
-  width: 100%;
-}
-
 .sendbird-message-content {
   display: inline-flex;
   flex-direction: row;
@@ -2008,9 +2089,6 @@
 .sendbird--mobile-mode .sendbird-message-content .ui_container_type__wide {
   max-width: 100%;
 }
-.sendbird--mobile-mode .sendbird-message-content .ui_container_type__full {
-  max-width: 100%;
-}
 .sendbird-message-content .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.use-quote {
   bottom: -8px;
   margin-top: -8px;
@@ -2064,24 +2142,18 @@
   min-width: -moz-fit-content;
   min-width: fit-content;
   bottom: -16px;
-  right: 0px;
+  left: 2px;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .ui_container_type__wide {
   min-width: -moz-fit-content;
   min-width: fit-content;
   bottom: -16px;
-  right: 0px;
-}
-.sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .ui_container_type__full {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  bottom: -16px;
-  right: 0px;
+  right: 2px;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__sender-name {
   margin-bottom: 4px;
   margin-left: 12px;
-  overflow-x: hidden;
+  overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
   width: 100%;
@@ -2204,19 +2276,13 @@
   min-width: -moz-fit-content;
   min-width: fit-content;
   bottom: -20px;
-  left: 0px;
+  left: 2px;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .ui_container_type__wide {
   min-width: -moz-fit-content;
   min-width: fit-content;
   bottom: -20px;
-  left: 0px;
-}
-.sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .ui_container_type__full {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  bottom: -20px;
-  left: 0px;
+  left: 2px;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__right {
   display: none;
@@ -2338,95 +2404,6 @@
 .sendbird-message-item-menu__list__menu-item:focus-visible {
   outline: none;
 }
-.sendbird-context-menu {
-  display: inline;
-}
-
-.sendbird__offline .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
-  cursor: not-allowed;
-}
-.sendbird__offline .sendbird-message-item-menu__list__menu-item.menu-item-delete {
-  cursor: pointer;
-}
-
-.sendbird-dropdown__menu {
-  z-index: 99999;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 140px;
-  margin: 0px;
-  padding: 8px 0px;
-  border-radius: 4px;
-  list-style: none;
-}
-.sendbird-theme--light .sendbird-dropdown__menu {
-  box-shadow: var(--sendbird-light-shadow-02);
-  background-color: var(--sendbird-light-background-50);
-}
-.sendbird-theme--dark .sendbird-dropdown__menu {
-  box-shadow: var(--sendbird-dark-shadow-02);
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-dropdown__menu .sendbird-dropdown__menu-item {
-  cursor: pointer;
-  white-space: nowrap;
-  padding: 8px 16px;
-}
-.sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable {
-  cursor: not-allowed;
-}
-.sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
-  background-color: var(--sendbird-light-background-50);
-}
-.sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
-  background-color: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
-  background-color: var(--sendbird-dark-background-400);
-}
-
-.sendbird-dropdown__reaction-bar {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 44px;
-  max-width: 352px;
-  max-height: 208px;
-  overflow-y: scroll;
-  margin: 0px;
-  padding: 8px;
-  border-radius: 8px;
-  list-style: none;
-}
-.sendbird-theme--light .sendbird-dropdown__reaction-bar {
-  box-shadow: var(--sendbird-light-shadow-02);
-  background-color: var(--sendbird-light-background-50);
-}
-.sendbird-theme--dark .sendbird-dropdown__reaction-bar {
-  box-shadow: var(--sendbird-dark-shadow-02);
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button, .sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button--selected {
-  margin: 4px;
-}
-
-.sendbird-dropdown__menu-backdrop {
-  background-color: transparent;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.sendbird-sort-by-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
 .sendbird-text {
   color: var(--primary-1);
 }
@@ -2695,12 +2672,14 @@
   top: 8px;
   left: 0px;
   cursor: pointer;
+  z-index: 0;
 }
 .sendbird-user-list-item .sendbird-muted-avatar {
   position: absolute;
   top: 8px;
   left: 0px;
   pointer-events: none;
+  z-index: 1;
 }
 .sendbird-user-list-item .sendbird-user-list-item__title {
   position: absolute;
@@ -3268,9 +3247,6 @@
   padding: 4px 10px;
   gap: 4px;
   border-radius: 16px;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
 }
 .sendbird-theme--light .sendbird-ui-thread-replies {
   background-color: var(--sendbird-light-background-50);
@@ -3354,9 +3330,9 @@
 .sendbird-og-message-item-body {
   position: relative;
   display: inline-block;
-  width: 100%;
+  width: 320px;
   min-width: 320px;
-  max-width: 400px;
+  max-width: 320px;
 }
 .sendbird--mobile-mode .sendbird-og-message-item-body {
   min-width: 160px;
@@ -4185,46 +4161,42 @@ div.sendbird-text-message-item-body {
 }
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap');
 
-.sb-message-template__border{
+.sb-message-template__border {
   position: relative;
 }
 
 .sb-message-template__border::after {
-  content:'';
+  content: '';
   position: absolute;
   top: 0;
-  bottom:0;
-  left:0;
+  bottom: 0;
+  left: 0;
   right: 0;
   z-index: 1;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-radius: var(--border-radius);
 }
 
-
 .sb-message-template__action {
   cursor: pointer;
 }
+
 .sb-message-template__parent {
   font-family: 'Roboto';
 }
-.sendbird-theme--light
-.sb-message-template__box {
-  background-color: #eee;
+
+.sendbird-theme--light .sb-message-template__box {
 }
-.sendbird-theme--dark
-.sb-message-template__box {
-  background-color: #2c2c2c;
+
+.sendbird-theme--dark .sb-message-template__box {
 }
 
-.sendbird-theme--light
-.sb-message-template__text {
-  color: rgba(0, 0, 0, 0.88);
+.sendbird-theme--light .sb-message-template__text {
 }
-.sendbird-theme--dark
-.sb-message-template__text {
-  color: rgba(255, 255, 255, 0.88);
+
+.sendbird-theme--dark .sb-message-template__text {
 }
+
 .sb-message-template__text {
   font-family: inherit;
   font-size: 14px;
@@ -4236,16 +4208,12 @@ div.sendbird-text-message-item-body {
   text-align: left;
 }
 
-.sendbird-theme--light
-.sb-message-template__text-button {
-  background-color: #e0e0e0;
-  color: #742ddd;
+.sendbird-theme--light .sb-message-template__text-button {
 }
-.sendbird-theme--dark
-.sb-message-template__text-button {
-  background-color: #393939;
-  color: #c2a9fa;
+
+.sendbird-theme--dark .sb-message-template__text-button {
 }
+
 .sb-message-template__text-button {
   padding: 10px 20px;
   border-radius: 6px;
@@ -4272,11 +4240,25 @@ div.sendbird-text-message-item-body {
 }
 
 .sb-message-template__parent {
-  border-radius: 8px;
+  border-radius: unset;
+  background-color: transparent;
   overflow: hidden;
 }
 
+.sb-message-template__parent * {
+  box-sizing: border-box;
+}
+
+.sb-message-template__carousel {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  touch-action: pan-y;
+}
 
+.sb-message-template__parent.sb-message-template__parent_for_carousel {
+  overflow: visible;
+}
 .sendbird-message-template__root * {
   box-sizing: border-box;
 }
@@ -4285,10 +4267,6 @@ div.sendbird-text-message-item-body {
   border-radius: 0;
   font-family: var(--sendbird-font-family-default);
 }
-.sendbird-carousel-items-wrapper {
-  display: flex;
-  box-sizing: border-box;
-}
 .sendbird-iconbutton__feedback {
   display: flex;
   justify-content: center;
@@ -5876,8 +5854,14 @@ div.sendbird-text-message-item-body {
 .sendbird-theme--dark .sendbird-channel-settings__members .sendbird-badge .sendbird-label {
   color: var(--sendbird-dark-ondark-02);
 }
+.sendbird-theme--light .sendbird-accordion.sendbird-accordion--closed {
+  border-bottom: 0px;
+}
+.sendbird-theme--dark .sendbird-accordion.sendbird-accordion--closed {
+  border-bottom: 0px;
+}
+
 .sendbird-accordion {
-  padding: 8px 0px 16px 0px;
   position: relative;
   box-sizing: border-box;
 }
@@ -5901,6 +5885,11 @@ div.sendbird-text-message-item-body {
   margin-top: 8px;
 }
 
+.sendbird-accordion__list {
+  padding-top: 8px;
+  padding-bottom: 16px;
+}
+
 .sendbird-accordion__panel-header {
   cursor: pointer;
   position: relative;
@@ -7324,11 +7313,9 @@ div.sendbird-text-message-item-body {
 .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll {
   overflow-y: auto;
   flex: 1 1 0;
-  order: 2;
   width: 100%;
 }
 .sendbird-openchannel-conversation .sendbird-openchannel-footer {
-  order: 3;
   padding: 12px 24px 24px 24px;
 }
 .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll-container {