@sendbird/uikit-react 3.4.8 → 3.5.0-mobile-web-0

package/dist/index.css

@@ -70,125 +70,6 @@
   color: inherit;
   word-break: break-all;
 }
-.sendbird-open-channel-preview {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  width: 264px;
-  height: 58px;
-  min-width: 264px;
-  min-height: 58px;
-  box-sizing: border-box;
-}
-.sendbird--mobile-mode .sendbird-open-channel-preview {
-  width: 100%;
-}
-.sendbird-theme--light .sendbird-open-channel-preview {
-  background-color: var(--sendbird-light-background-50);
-  border-bottom: solid 1px var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview {
-  background-color: var(--sendbird-dark-background-600);
-  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
-}
-.sendbird-theme--light .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-theme--light .sendbird-open-channel-preview.selected {
-  background-color: var(--sendbird-light-primary-100);
-  border-left: solid 4px var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview.selected {
-  background-color: var(--sendbird-dark-primary-300);
-  border-left: solid 4px var(--sendbird-dark-primary-200);
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
-  position: relative;
-  margin-top: 8px;
-  margin-left: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar,
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar--default {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context {
-  position: relative;
-  margin-top: 8px;
-  margin-left: 16px;
-  display: inline-flex;
-  flex-direction: column;
-  max-width: 178px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  height: 16px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
-  max-width: calc(100% - 20px);
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
-  position: relative;
-  margin-left: 4px;
-  display: inline-flex;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
-  position: relative;
-  margin-top: 8px;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  height: 14px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__icon {
-  position: relative;
-  display: inline-flex;
-  width: 14px;
-  height: 14px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
-  position: relative;
-  margin-left: 4px;
-  display: inline-flex;
-  width: 160px;
-  max-width: 160px;
-  height: 12px;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
 .sendbird-open-channel-list,
 .sendbird-open-channel-list-ui {
   position: relative;
@@ -336,6 +217,125 @@
   display: inline-flex;
   flex-direction: row;
 }
+.sendbird-open-channel-preview {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  width: 264px;
+  height: 58px;
+  min-width: 264px;
+  min-height: 58px;
+  box-sizing: border-box;
+}
+.sendbird--mobile-mode .sendbird-open-channel-preview {
+  width: 100%;
+}
+.sendbird-theme--light .sendbird-open-channel-preview {
+  background-color: var(--sendbird-light-background-50);
+  border-bottom: solid 1px var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-open-channel-preview {
+  background-color: var(--sendbird-dark-background-600);
+  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
+}
+.sendbird-theme--light .sendbird-open-channel-preview:hover {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-open-channel-preview:hover {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-open-channel-preview.selected {
+  background-color: var(--sendbird-light-primary-100);
+  border-left: solid 4px var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-open-channel-preview.selected {
+  background-color: var(--sendbird-dark-primary-300);
+  border-left: solid 4px var(--sendbird-dark-primary-200);
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
+  position: relative;
+  margin-top: 8px;
+  margin-left: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar,
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar--default {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context {
+  position: relative;
+  margin-top: 8px;
+  margin-left: 16px;
+  display: inline-flex;
+  flex-direction: column;
+  max-width: 178px;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 16px;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
+  max-width: calc(100% - 20px);
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
+  position: relative;
+  margin-left: 4px;
+  display: inline-flex;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
+  position: relative;
+  margin-top: 8px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 14px;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__icon {
+  position: relative;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
+  position: relative;
+  margin-left: 4px;
+  display: inline-flex;
+  width: 160px;
+  max-width: 160px;
+  height: 12px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
   --sendbird-light-primary-500: #491389;
@@ -530,6 +530,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);
 }
@@ -3148,60 +3153,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 +3246,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;
@@ -3999,35 +4070,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;
@@ -6419,6 +6461,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%;