@sendbird/uikit-react 3.0.0-beta.5 → 3.0.0-rc.1

package/dist/index.css

@@ -1,6 +1,3 @@
-.sendbird-text {
-  color: var(--primary-1); }
-
 .sendbird-openchannel-conversation-header {
   position: relative;
   min-height: 64px;
@@ -50,50 +47,6 @@
   .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
     background-color: var(--sendbird-dark-background-300); }
 
-.sendbird-chat-header {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 64px;
-  min-height: 64px;
-  padding-left: 20px;
-  padding-right: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box; }
-  .sendbird-theme--light .sendbird-chat-header {
-    border-bottom: 1px solid var(--sendbird-light-onlight-04);
-    background-color: var(--sendbird-light-background-50); }
-  .sendbird-theme--dark .sendbird-chat-header {
-    border-bottom: 1px solid var(--sendbird-dark-ondark-04);
-    background-color: var(--sendbird-dark-background-600); }
-  .sendbird-chat-header__left {
-    margin-right: 24px; }
-  .sendbird-chat-header__left, .sendbird-chat-header__right {
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    align-items: center; }
-  .sendbird-chat-header .sendbird-chat-header__left__title {
-    margin-left: 8px;
-    margin-right: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 780px; }
-  .sendbird-chat-header .sendbird-chat-header__left__subtitle {
-    max-width: 240px;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .sendbird-chat-header .sendbird-chat-header__right__mute {
-    margin-right: 26px; }
-  .sendbird-chat-header .sendbird-iconbutton--pressed {
-    background-color: inherit; }
-  .sendbird-chat-header .sendbird-chat-header__right__info {
-    margin-left: 16px; }
-
 .sendbird__offline .sendbird-channel-preview {
   cursor: not-allowed; }
 
@@ -193,6 +146,50 @@
   .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
     color: var(--sendbird-dark-primary-200); }
 
+.sendbird-chat-header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 64px;
+  min-height: 64px;
+  padding-left: 20px;
+  padding-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box; }
+  .sendbird-theme--light .sendbird-chat-header {
+    border-bottom: 1px solid var(--sendbird-light-onlight-04);
+    background-color: var(--sendbird-light-background-50); }
+  .sendbird-theme--dark .sendbird-chat-header {
+    border-bottom: 1px solid var(--sendbird-dark-ondark-04);
+    background-color: var(--sendbird-dark-background-600); }
+  .sendbird-chat-header__left {
+    margin-right: 24px; }
+  .sendbird-chat-header__left, .sendbird-chat-header__right {
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center; }
+  .sendbird-chat-header .sendbird-chat-header__left__title {
+    margin-left: 8px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 780px; }
+  .sendbird-chat-header .sendbird-chat-header__left__subtitle {
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+  .sendbird-chat-header .sendbird-chat-header__right__mute {
+    margin-right: 26px; }
+  .sendbird-chat-header .sendbird-iconbutton--pressed {
+    background-color: inherit; }
+  .sendbird-chat-header .sendbird-chat-header__right__info {
+    margin-left: 16px; }
+
 .sendbird-dropdown {
   position: relative;
   display: inline-block; }
@@ -233,6 +230,7 @@
   --sendbird-light-secondary-200: #69c085;
   --sendbird-light-secondary-100: #a8e2ab;
   --sendbird-light-information-100: #adc9ff;
+  --sendbird-highlight-100: #fff2b6;
   --sendbird-light-error-500: #9d091e;
   --sendbird-light-error-400: #bf0711;
   --sendbird-light-error-300: #de360b;
@@ -275,6 +273,7 @@
   --sendbird-dark-secondary-200: #69c085;
   --sendbird-dark-secondary-100: #a8e2ab;
   --sendbird-dark-information-100: #adc9ff;
+  --sendbird-highlight-100: #fff2b6;
   --sendbird-dark-error-500: #9d091e;
   --sendbird-dark-error-400: #bf0711;
   --sendbird-dark-error-300: #de360b;
@@ -367,7 +366,7 @@
 
 .sendbird-label--subtitle-2 {
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.14;
@@ -1209,12 +1208,6 @@
   width: 100%;
   height: 100%; }
 
-.sendbird-reactions--pressed {
-  display: block !important; }
-
-.sendbird-icon--pressed {
-  display: block !important; }
-
 .sendbird-sort-by-row {
   display: flex;
   justify-content: flex-start;
@@ -1344,6 +1337,10 @@
         align-items: center;
         margin-left: 8px;
         margin-bottom: 12px; }
+        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count .sendbird-channel-preview__content__lower__unread-message-count__mention {
+          display: inline-flex;
+          align-items: center;
+          margin-right: 4px; }
   .sendbird-channel-preview .sendbird-channel-preview__action {
     position: absolute;
     top: 12px;
@@ -2021,12 +2018,6 @@
       background-color: var(--sendbird-light-background-50); }
     .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
       background-color: var(--sendbird-dark-background-600); }
-    .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
-      cursor: pointer; }
-      .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
-        background-color: var(--sendbird-light-background-100); }
-      .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
-        background-color: var(--sendbird-dark-background-500); }
     .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
       background-color: var(--sendbird-light-background-100); }
     .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
@@ -2037,11 +2028,19 @@
     .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__nickname {
       position: relative;
       display: inline-block;
-      margin-left: 16px; }
+      margin-left: 16px;
+      max-width: calc(100% - 250px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
     .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
       position: absolute;
       display: inline-block;
-      right: 16px; }
+      right: 16px;
+      max-width: 180px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
   .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
     position: relative;
     display: flex;
@@ -2333,12 +2332,11 @@
   .sendbird-message-content__middle__body-container .sendbird-message-content__middle__message-item-body {
     width: 100%;
     box-sizing: border-box; }
-  .sendbird-message-content__middle__body-container .sendbird-message-content-reactions {
-    width: 100%; }
 
 .sendbird-message-content-reactions {
   position: relative;
   width: 100%;
+  max-width: 400px;
   border-radius: 0px 0px 16px 16px; }
   .sendbird-theme--light .sendbird-message-content-reactions {
     background-color: var(--sendbird-light-background-100); }
@@ -2543,7 +2541,7 @@
     display: inline;
     margin: 0px 2px; }
 
-p.sendbird-text-message-item-body {
+div.sendbird-text-message-item-body {
   margin: 0px; }
 
 .sendbird-word {
@@ -2552,9 +2550,6 @@ p.sendbird-text-message-item-body {
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content; }
-  .sendbird-word .sendbird-word__mention:hover {
-    cursor: pointer; }
-  .sendbird-word .sendbird-word__mention,
   .sendbird-word .sendbird-word__url,
   .sendbird-word .sendbird-word__normal {
     display: inline-block; }
@@ -2617,6 +2612,19 @@ p.sendbird-text-message-item-body {
 .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-secondary-3 {
   color: var(--sendbird-dark-secondary-200); }
 
+.sendbird-word .sendbird-word__mention {
+  display: inline-block; }
+  .sendbird-word .sendbird-word__mention:hover {
+    cursor: pointer; }
+  .sendbird-theme--light .sendbird-word .sendbird-word__mention.sendbird-word__mention--me {
+    background-color: var(--sendbird-highlight-100); }
+  .sendbird-theme--dark .sendbird-word .sendbird-word__mention.sendbird-word__mention--me {
+    background-color: var(--sendbird-highlight-100); }
+  .sendbird-theme--light .sendbird-word .sendbird-word__mention.sendbird-word__mention--me .sendbird-label {
+    color: var(--sendbird-light-onlight-01); }
+  .sendbird-theme--dark .sendbird-word .sendbird-word__mention.sendbird-word__mention--me .sendbird-label {
+    color: var(--sendbird-dark-onlight-01); }
+
 .sendbird-file-message-item-body {
   position: relative;
   display: inline-block;
@@ -2817,7 +2825,7 @@ p.sendbird-text-message-item-body {
     height: 100%;
     border-radius: 16px 16px 0px 0px; }
 
-p.sendbird-og-message-item-body__text-bubble {
+div.sendbird-og-message-item-body__text-bubble {
   margin: 0px; }
 
 .sendbird-unknown-message-item-body {
@@ -3887,43 +3895,47 @@ p.sendbird-og-message-item-body__text-bubble {
     position: sticky;
     width: 100%;
     bottom: 0px;
-    height: 100%; }
+    height: 100%;
+    overflow: hidden; }
     .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__padding {
       height: 8px; }
-    .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
-      position: -webkit-sticky;
-      position: sticky;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      bottom: 8px;
-      left: calc(50% - 20px);
-      width: 40px;
-      height: 40px;
-      border-radius: 24px;
-      z-index: 1; }
-      .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
-        background-color: var(--sendbird-light-primary-300);
-        box-shadow: var(--sendbird-light-shadow-05); }
-      .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
-        background-color: var(--sendbird-dark-primary-200);
-        box-shadow: var(--sendbird-dark-shadow-05); }
-      .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
-        cursor: pointer; }
-        .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
-          background-color: var(--sendbird-light-primary-400); }
-        .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
-          background-color: var(--sendbird-dark-primary-300); }
-      .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
-        background-color: var(--sendbird-light-primary-500); }
-      .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
-        background-color: var(--sendbird-dark-primary-400); }
-    .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container--no-messages {
+    .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container {
+      width: 100%;
+      height: 100%;
+      overflow: scroll; }
+    .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container.no-messages {
       width: 100%;
-      height: calc(100% - 8px); }
-      .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container--no-messages .sendbird-openchannel-conversation-scroll__container__place-holder {
+      height: 100%; }
+      .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container.no-messages .sendbird-openchannel-conversation-scroll__container__place-holder {
         width: 100%;
         height: 100%; }
+  .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 8px;
+    left: calc(50% - 20px);
+    width: 40px;
+    height: 40px;
+    border-radius: 24px;
+    z-index: 1; }
+    .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
+      background-color: var(--sendbird-light-primary-300);
+      box-shadow: var(--sendbird-light-shadow-05); }
+    .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
+      background-color: var(--sendbird-dark-primary-200);
+      box-shadow: var(--sendbird-dark-shadow-05); }
+    .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
+      cursor: pointer; }
+      .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
+        background-color: var(--sendbird-light-primary-400); }
+      .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
+        background-color: var(--sendbird-dark-primary-300); }
+    .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
+      background-color: var(--sendbird-light-primary-500); }
+    .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
+      background-color: var(--sendbird-dark-primary-400); }
 
 .sendbird-openchannel-user-message {
   position: relative;
@@ -4289,7 +4301,8 @@ p.sendbird-og-message-item-body__text-bubble {
     display: flex;
     flex-direction: column;
     margin-left: 12px;
-    margin-bottom: 4px; }
+    margin-bottom: 4px;
+    width: calc(100% - 64px); }
     .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__title {
       position: relative;
       display: flex;
@@ -4331,7 +4344,8 @@ p.sendbird-og-message-item-body__text-bubble {
         overflow: hidden;
         height: 20px;
         max-height: 20px;
-        text-overflow: ellipsis; }
+        text-overflow: ellipsis;
+        white-space: nowrap; }
   .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu {
     position: absolute;
     display: none;
@@ -4434,6 +4448,131 @@ p.sendbird-og-message-item-body__text-bubble {
       justify-content: center;
       align-items: center; }
 
+.sendbird-openchannel-settings {
+  height: 100%;
+  width: 320px;
+  display: inline-block;
+  overflow-y: scroll;
+  position: relative; }
+  .sendbird-theme--light .sendbird-openchannel-settings {
+    background-color: var(--sendbird-light-background-50);
+    border-left: 1px solid var(--sendbird-light-onlight-04); }
+  .sendbird-theme--dark .sendbird-openchannel-settings {
+    background-color: var(--sendbird-dark-background-600);
+    border-left: 1px solid var(--sendbird-dark-ondark-04); }
+  .sendbird-openchannel-settings .sendbird-participants-accordion__footer {
+    text-align: left;
+    padding-top: 16px;
+    padding-left: 16px; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__operator-accordion-icon {
+    position: absolute;
+    left: 14px; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__accordion-icon,
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-icon__delete {
+    position: absolute;
+    left: 16px; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__participant {
+    height: 100%; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__participants-list {
+      padding-top: 64px;
+      height: calc(100% - 64px);
+      overflow-y: scroll; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__header {
+      display: block;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0; }
+      .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__header {
+        background-color: var(--sendbird-light-background-50); }
+      .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__header {
+        background-color: var(--sendbird-dark-background-600); }
+  .sendbird-openchannel-settings .sendbird-participants-accordion,
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__delete-channel {
+    text-align: left; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__members .sendbird-badge__text {
+    margin-top: -2px; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__header {
+    height: 64px;
+    min-height: 64px;
+    position: relative;
+    padding: 20px 24px;
+    box-sizing: border-box;
+    text-align: left; }
+    .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__header {
+      border-bottom: solid 1px var(--sendbird-light-onlight-04); }
+    .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__header {
+      border-bottom: solid 1px var(--sendbird-dark-ondark-04); }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__close-icon {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 16px; }
+    .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__close-icon path {
+      fill: var(--sendbird-light-onlight-01); }
+    .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__close-icon path {
+      fill: var(--sendbird-dark-ondark-01); }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__placeholder {
+    margin-top: 40%; }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__url {
+    padding: 16px;
+    box-sizing: border-box;
+    position: relative; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__url:hover .sendbird-openchannel-settings__copy-icon {
+      display: inline-block; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__copy-icon {
+      cursor: pointer;
+      position: absolute;
+      display: none;
+      top: 10px;
+      right: 18px; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value {
+      margin-top: 8px; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value,
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-label {
+      text-align: left;
+      display: block;
+      word-wrap: break-word; }
+  .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__url {
+    background-color: var(--sendbird-light-background-50);
+    border-bottom: 1px solid var(--sendbird-light-onlight-04); }
+  .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__url {
+    background-color: var(--sendbird-dark-background-600);
+    border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
+  .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-item {
+    display: block;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    padding: 12px 22px 10px 56px; }
+    .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-item {
+      background-color: var(--sendbird-light-background-50);
+      border-bottom: 1px solid var(--sendbird-light-onlight-04); }
+    .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-item {
+      background-color: var(--sendbird-dark-background-600);
+      border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-item:focus {
+      outline: none; }
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__panel-item.sendbird-channel-settings__panel-item__disabled {
+      cursor: not-allowed; }
+  .sendbird-openchannel-settings .sendbird-participants-accordion__member {
+    position: relative;
+    padding: 12px 0px 12px 56px;
+    height: 40px;
+    box-sizing: border-box;
+    text-align: left; }
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-label {
+      max-width: 240px;
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
+  .sendbird-openchannel-settings .sendbird-participants-accordion__member-avatar {
+    position: absolute;
+    left: 16px;
+    top: 10px;
+    cursor: pointer; }
+
 .sendbird-openchannel-profile {
   position: relative;
   text-align: center;
@@ -4450,6 +4589,7 @@ p.sendbird-og-message-item-body__text-bubble {
     margin-bottom: 16px;
     text-align: center; }
   .sendbird-openchannel-profile .sendbird-openchannel-profile__title {
+    display: inline-block;
     max-width: 240px;
     white-space: nowrap;
     overflow-x: hidden;