@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/dist/index.css

@@ -70,6 +70,100 @@
   color: inherit;
   word-break: break-all;
 }
+.sendbird-open-channel-list,
+.sendbird-open-channel-list-ui {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 256px;
+  min-width: 256px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.sendbird--mobile-mode .sendbird-open-channel-list,
+.sendbird--mobile-mode .sendbird-open-channel-list-ui {
+  width: 100%;
+}
+.sendbird-theme--light .sendbird-open-channel-list,
+.sendbird-theme--light .sendbird-open-channel-list-ui {
+  border-right: solid 1px var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-open-channel-list,
+.sendbird-theme--dark .sendbird-open-channel-list-ui {
+  border-right: solid 1px var(--sendbird-dark-ondark-04);
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+  box-sizing: border-box;
+}
+.sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+  background-color: var(--sendbird-light-background-50);
+  border-bottom: solid 1px var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+  background-color: var(--sendbird-dark-background-600);
+  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
+  position: relative;
+  margin-left: 24px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
+  position: absolute;
+  top: 16px;
+  right: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100% - 64px);
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+
+.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+  position: relative;
+  min-height: 62px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+  background-color: var(--sendbird-dark-background-500);
+}
 .sendbird-open-channel-preview {
   position: relative;
   display: inline-flex;
@@ -189,98 +283,6 @@
   text-overflow: ellipsis;
   word-break: keep-all;
 }
-.sendbird-open-channel-list,
-.sendbird-open-channel-list-ui {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  width: 256px;
-  min-width: 256px;
-  height: 100%;
-  box-sizing: border-box;
-}
-.sendbird--mobile-mode .sendbird-open-channel-list,
-.sendbird--mobile-mode .sendbird-open-channel-list-ui {
-  width: 100%;
-}
-.sendbird-theme--light .sendbird-open-channel-list,
-.sendbird-theme--light .sendbird-open-channel-list-ui {
-  border-right: solid 1px var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-open-channel-list,
-.sendbird-theme--dark .sendbird-open-channel-list-ui {
-  border-right: solid 1px var(--sendbird-dark-ondark-04);
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  height: 64px;
-  box-sizing: border-box;
-}
-.sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
-  border-bottom: solid 1px var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
-  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
-  position: relative;
-  margin-left: 24px;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
-  position: absolute;
-  top: 16px;
-  right: 56px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100% - 64px);
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-
-.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
-  position: relative;
-  min-height: 62px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
-  background-color: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
-  background-color: var(--sendbird-dark-background-500);
-}
 .sendbird-create-open-channel-ui {
   position: relative;
   display: inline-flex;
@@ -530,6 +532,11 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+.sendbird-label {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
 [class*=sendbird-label] {
   font-family: var(--sendbird-font-family-default);
 }
@@ -2854,6 +2861,10 @@
   bottom: -8px;
 }
 
+.sendbird-message-content__middle__quote-message__quote {
+  width: 100%;
+}
+
 .sendbird-message-content.incoming .sendbird-message-content__left {
   position: relative;
   display: inline-flex;
@@ -2889,6 +2900,9 @@
   position: relative;
   margin-left: 12px;
   margin-bottom: 4px;
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
   position: relative;
@@ -2935,6 +2949,9 @@
 .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   display: none;
 }
+.sendbird--mobile-mode .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
+  display: inline-flex;
+}
 
 .sendbird-message-content.outgoing .sendbird-message-content__left {
   position: relative;
@@ -3007,6 +3024,9 @@
 .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   display: none;
 }
+.sendbird--mobile-mode .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
+  display: inline-flex;
+}
 
 .sendbird-message-content__middle__body-container {
   position: relative;
@@ -3148,60 +3168,6 @@
 .sendbird-emoji-reactions .sendbird-context-menu {
   margin-left: 2px;
 }
-.sendbird-tooltip {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  max-width: 200px;
-  border-radius: 8px;
-  padding: 8px 16px;
-}
-.sendbird-theme--light .sendbird-tooltip {
-  background-color: var(--sendbird-light-background-700);
-}
-.sendbird-theme--dark .sendbird-tooltip {
-  background-color: var(--sendbird-dark-background-300);
-}
-.sendbird-tooltip::after {
-  content: "";
-  position: absolute;
-  bottom: -4px;
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-}
-.sendbird-theme--light .sendbird-tooltip::after {
-  background-color: var(--sendbird-light-background-700);
-}
-.sendbird-theme--dark .sendbird-tooltip::after {
-  background-color: var(--sendbird-dark-background-300);
-}
-.sendbird-tooltip__text {
-  font-family: var(--sendbird-font-family-default);
-  font-size: 12px;
-  font-weight: bold;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.33;
-  letter-spacing: normal;
-  word-break: keep-all;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sendbird-tooltip-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-.sendbird-tooltip-wrapper__hover-tooltip {
-  position: absolute;
-  display: inline-flex;
-  width: 200px;
-}
-.sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container {
-  position: relative;
-  display: inline-flex;
-}
 .sendbird-reaction-badge {
   display: inline-block;
   border-radius: 15px;
@@ -3295,6 +3261,126 @@
 .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__count {
   margin-left: 4px;
 }
+.sendbird-message__bottomsheet__reacted-members {
+  position: relative;
+  padding: 0px 16px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 46px;
+  overflow-x: scroll;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 16px;
+}
+
+.sendbird-message__bottomsheet__reacted-members__item {
+  position: relative;
+  height: 100%;
+  display: inline-flex;
+  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+}
+
+.sendbird-message__bottomsheet__reactor-list {
+  position: relative;
+  padding: 0px 16px;
+  width: 100%;
+  height: 216px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+.sendbird-message__bottomsheet__reactor-list__item.sendbird-user-list-item {
+  border-bottom: 0px;
+  min-height: 48px;
+}
+.sendbird-bottomsheet {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sendbird-bottomsheet__content {
+  z-index: 10001;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.sendbird-bottomsheet__backdrop {
+  position: fixed;
+  z-index: 10000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.sendbird-theme--light .sendbird-bottomsheet__backdrop {
+  background-color: var(--sendbird-light-overlay-02);
+}
+.sendbird-theme--dark .sendbird-bottomsheet__backdrop {
+  background-color: var(--sendbird-dark-overlay-02);
+}
+.sendbird-tooltip {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  max-width: 200px;
+  border-radius: 8px;
+  padding: 8px 16px;
+}
+.sendbird-theme--light .sendbird-tooltip {
+  background-color: var(--sendbird-light-background-700);
+}
+.sendbird-theme--dark .sendbird-tooltip {
+  background-color: var(--sendbird-dark-background-300);
+}
+.sendbird-tooltip::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+.sendbird-theme--light .sendbird-tooltip::after {
+  background-color: var(--sendbird-light-background-700);
+}
+.sendbird-theme--dark .sendbird-tooltip::after {
+  background-color: var(--sendbird-dark-background-300);
+}
+.sendbird-tooltip__text {
+  font-family: var(--sendbird-font-family-default);
+  font-size: 12px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  word-break: keep-all;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sendbird-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+.sendbird-tooltip-wrapper__hover-tooltip {
+  position: absolute;
+  display: inline-flex;
+  width: 200px;
+}
+.sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container {
+  position: relative;
+  display: inline-flex;
+}
 .sendbird-admin-message {
   display: flex;
   justify-content: center;
@@ -3302,6 +3388,8 @@
 }
 .sendbird-admin-message .sendbird-admin-message__text {
   display: flex;
+  width: 100%;
+  word-break: break-word;
 }
 .sendbird-text-message-item-body {
   position: relative;
@@ -3748,6 +3836,7 @@ div.sendbird-og-message-item-body__text-bubble {
   display: inline-flex;
   box-sizing: border-box;
   flex-direction: column;
+  width: 100%;
   max-width: 400px;
 }
 .sendbird-quote-message.incoming {
@@ -3763,6 +3852,7 @@ div.sendbird-og-message-item-body__text-bubble {
   align-items: center;
   height: 16px;
   padding: 0px 12px;
+  width: 100%;
 }
 .sendbird-quote-message .sendbird-quote-message__replied-to .sendbird-quote-message__replied-to__icon {
   position: relative;
@@ -3999,35 +4089,6 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-message__bottomsheet--action-disabled {
   background-color: var(--sendbird-dark-background-500);
 }
-.sendbird-bottomsheet {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.sendbird-bottomsheet__content {
-  z-index: 10001;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-}
-
-.sendbird-bottomsheet__backdrop {
-  position: fixed;
-  z-index: 10000;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-.sendbird-theme--light .sendbird-bottomsheet__backdrop {
-  background-color: var(--sendbird-light-overlay-02);
-}
-.sendbird-theme--dark .sendbird-bottomsheet__backdrop {
-  background-color: var(--sendbird-dark-overlay-02);
-}
 .sendbird-ui-thread-replies {
   position: relative;
   width: -moz-fit-content;
@@ -5620,9 +5681,11 @@ div.sendbird-og-message-item-body__text-bubble {
 
 .sendbird-theme--light .sendbird-thread-ui__parent-message-info {
   border-top: 1px solid var(--sendbird-light-onlight-04);
+  border-bottom: 1px solid var(--sendbird-light-onlight-04);
 }
 .sendbird-theme--dark .sendbird-thread-ui__parent-message-info {
   border-top: 1px solid var(--sendbird-dark-ondark-04);
+  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
 }
 .sendbird-theme--light .sendbird-thread-ui__parent-message-info .sendbird-word__mention .sendbird-label {
   color: var(--sendbird-light-onlight-01);
@@ -5795,6 +5858,10 @@ div.sendbird-og-message-item-body__text-bubble {
   background-color: var(--sendbird-dark-background-500);
 }
 
+.sendbird--mobile-mode .sendbird-parent-message-info.sendbird-thread-ui__parent-message-info:hover {
+  background-color: transparent;
+}
+
 .sendbird-theme--light .sendbird-parent-message-info:hover .sendbird-emoji-reactions {
   border: 1px solid var(--sendbird-light-background-100);
   background-color: var(--sendbird-light-background-100);
@@ -6175,9 +6242,6 @@ div.sendbird-og-message-item-body__text-bubble {
   flex-direction: column;
   align-items: flex-start;
 }
-.sendbird-thread-list-item-content.incoming .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container .sendbird-thread-list-item-content__middle__message-item-body {
-  max-width: 198px;
-}
 .sendbird-thread-list-item-content.incoming .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container .sendbird-thread-list-item-content__middle__body-container__created-at {
   position: absolute;
   bottom: 6px;
@@ -6289,9 +6353,6 @@ div.sendbird-og-message-item-body__text-bubble {
   width: -moz-fit-content;
   width: fit-content;
 }
-.sendbird-thread-list-item-content.outgoing .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container .sendbird-thread-list-item-content__middle__message-item-body {
-  max-width: 200px;
-}
 .sendbird-thread-list-item-content.outgoing .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container .sendbird-thread-list-item-content__middle__body-container__created-at {
   position: absolute;
   bottom: 2px;
@@ -6419,6 +6480,17 @@ div.sendbird-og-message-item-body__text-bubble {
 .sb-show-main {
   padding: 0 !important;
 }
+
+.sb_mobile__panelwrap .sendbird-thread {
+  width: 100%;
+  height: 100%;
+}
+.sb_mobile__panelwrap .sendbird-thread .sendbird-thread-ui {
+  max-width: 100%;
+}
+.sb_mobile__panelwrap .sendbird-thread .sendbird-thread-ui .sendbird-thread-ui__header {
+  width: 100%;
+}
 .sendbird-app__wrap {
   width: 100%;
   height: 100%;