@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/dist/index.css

@@ -609,7 +609,6 @@
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -1755,93 +1754,95 @@
 .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-text {
   color: var(--sendbird-dark-ondark-02);
 }
-/**
- * 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.
- */
-.sendbird-conversation__messages {
+.sendbird-ui-header {
   position: relative;
-}
-.sendbird-conversation__messages .sendbird-conversation__messages-padding {
-  position: relative;
-  height: 100%;
-  overflow-x: hidden;
-  padding: 0px 24px;
-}
-.sendbird--mobile-mode .sendbird-conversation__messages .sendbird-conversation__messages-padding {
-  padding: 0px 12px;
-}
-.sendbird-conversation__messages .sendbird-separator,
-.sendbird-conversation__messages .sendbird-admin-message {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.sendbird-conversation__messages__notification {
-  position: fixed;
-  top: 0px;
-  width: calc(100% - 50px);
-  margin-left: 25px;
-}
-
-.sendbird-conversation__scroll-bottom-button {
-  position: sticky;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  bottom: 30px;
-  left: calc(100% - 65px);
-  width: 40px;
-  height: 40px;
-  border-radius: 24px;
+  height: 64px;
+  min-height: 64px;
+  padding-left: 16px;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.sendbird-theme--light .sendbird-conversation__scroll-bottom-button {
+.sendbird-theme--light .sendbird-ui-header {
+  border-bottom: 1px solid var(--sendbird-light-onlight-04);
   background-color: var(--sendbird-light-background-50);
-  box-shadow: var(--sendbird-light-shadow-05);
-}
-.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button {
-  background-color: var(--sendbird-dark-background-400);
-  box-shadow: var(--sendbird-dark-shadow-05);
 }
-.sendbird-conversation__scroll-bottom-button:hover {
-  cursor: pointer;
+.sendbird-theme--dark .sendbird-ui-header {
+  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
+  background-color: var(--sendbird-dark-background-600);
 }
-.sendbird-theme--light .sendbird-conversation__scroll-bottom-button:hover {
-  background-color: var(--sendbird-light-background-100);
+
+.sendbird-ui-header--is-desktop {
+  max-width: 176px;
 }
-.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:hover {
-  background-color: var(--sendbird-dark-background-500);
+
+.sendbird-ui-header--is-mobile {
+  max-width: 80px;
 }
-.sendbird-theme--light .sendbird-conversation__scroll-bottom-button:active {
-  background-color: var(--sendbird-light-background-200);
+
+.sendbird-ui-header__left {
+  position: relative;
+  left: 0px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
 }
-.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:active {
-  background-color: var(--sendbird-dark-background-700);
+
+.sendbird-ui-header__middle {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.sendbird-conversation__scroll-bottom-button:focus {
-  outline: none;
+
+.sendbird-ui-header__middle__subtitle__container {
+  display: flex;
+  width: 100%;
 }
-.sendbird-separator {
+
+.sendbird-ui-header__middle__title,
+.sendbird-ui-header__middle__subtitle {
+  overflow: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
   width: 100%;
-  display: flex;
+}
+
+.sendbird-ui-header__right {
+  position: relative;
+  right: 0px;
+  flex: 0 0 auto;
+  display: inline-flex;
   align-items: center;
+  margin-left: 8px;
 }
-.sendbird-separator .sendbird-separator__left {
-  border: none;
-  height: 1px;
+.sendbird-textbutton {
+  text-decoration: underline;
+  cursor: pointer;
   display: inline-block;
-  width: 100%;
 }
-.sendbird-separator .sendbird-separator__right {
-  border: none;
-  height: 1px;
-  display: inline-block;
-  width: 100%;
+
+.sendbird-textbutton--not-underline {
+  text-decoration: none;
+  cursor: pointer;
 }
-.sendbird-separator .sendbird-separator__text {
-  margin: 0px 16px;
-  display: flex;
-  white-space: nowrap;
+
+.sendbird-textbutton--disabled {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-textbutton--disabled {
+  color: var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-textbutton--disabled {
+  color: var(--sendbird-dark-ondark-03);
 }
 .sendbird-theme--light .sendbird-color--onbackground-1 {
   color: var(--sendbird-light-onlight-01);
@@ -1933,6 +1934,94 @@
 .sendbird-theme--dark .sendbird-color--error--background-color {
   background-color: var(--sendbird-dark-error-300);
 }
+/**
+ * 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.
+ */
+.sendbird-conversation__messages {
+  position: relative;
+}
+.sendbird-conversation__messages .sendbird-conversation__messages-padding {
+  position: relative;
+  height: 100%;
+  overflow-x: hidden;
+  padding: 0 24px;
+}
+.sendbird--mobile-mode .sendbird-conversation__messages .sendbird-conversation__messages-padding {
+  padding: 0 12px;
+}
+.sendbird-conversation__messages .sendbird-separator,
+.sendbird-conversation__messages .sendbird-admin-message {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.sendbird-conversation__messages__notification {
+  position: fixed;
+  top: 0px;
+  width: calc(100% - 50px);
+  margin-left: 25px;
+}
+
+.sendbird-conversation__scroll-bottom-button {
+  position: sticky;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: 30px;
+  left: calc(100% - 65px);
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+}
+.sendbird-theme--light .sendbird-conversation__scroll-bottom-button {
+  background-color: var(--sendbird-light-background-50);
+  box-shadow: var(--sendbird-light-shadow-05);
+}
+.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button {
+  background-color: var(--sendbird-dark-background-400);
+  box-shadow: var(--sendbird-dark-shadow-05);
+}
+.sendbird-conversation__scroll-bottom-button:hover {
+  cursor: pointer;
+}
+.sendbird-theme--light .sendbird-conversation__scroll-bottom-button:hover {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:hover {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-conversation__scroll-bottom-button:active {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:active {
+  background-color: var(--sendbird-dark-background-700);
+}
+.sendbird-conversation__scroll-bottom-button:focus {
+  outline: none;
+}
+.sendbird-separator {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.sendbird-separator .sendbird-separator__left {
+  border: none;
+  height: 1px;
+  display: inline-block;
+  width: 100%;
+}
+.sendbird-separator .sendbird-separator__right {
+  border: none;
+  height: 1px;
+  display: inline-block;
+  width: 100%;
+}
+.sendbird-separator .sendbird-separator__text {
+  margin: 0px 16px;
+  display: flex;
+  white-space: nowrap;
+}
 .sendbird-message-input {
   display: inline-block;
   width: 100%;
@@ -2632,10 +2721,11 @@
 }
 
 .sendbird-bottomsheet__content {
-  z-index: 10001;
   position: fixed;
+  z-index: 10001;
   bottom: 0;
   left: 0;
+  width: 100%;
 }
 
 .sendbird-bottomsheet__backdrop {
@@ -2760,7 +2850,6 @@
   font-size: 22px;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -3639,26 +3728,6 @@ div.sendbird-text-message-item-body {
   position: relative;
   top: -6px;
 }
-.sendbird-textbutton {
-  text-decoration: underline;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.sendbird-textbutton--not-underline {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.sendbird-textbutton--disabled {
-  cursor: not-allowed;
-}
-.sendbird-theme--light .sendbird-textbutton--disabled {
-  color: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-textbutton--disabled {
-  color: var(--sendbird-dark-ondark-03);
-}
 .sendbird-image-grid-wrap {
   display: flex;
   justify-content: flex-end;
@@ -4477,15 +4546,38 @@ div.sendbird-text-message-item-body {
 .sendbird-suggested-replies {
   position: relative;
   display: flex;
+  margin-top: 8px;
+}
+.sendbird-suggested-replies.vertical {
   justify-content: flex-end;
   align-items: flex-end;
   flex-wrap: wrap;
-  -moz-column-gap: 10px;
-       column-gap: 10px;
-  row-gap: 8px;
-  margin-top: 16px;
   flex-direction: column;
 }
+.sendbird-suggested-replies.vertical .sendbird-suggested-replies__option:not(:first-child) {
+  margin-top: 8px;
+}
+.sendbird-suggested-replies.horizontal {
+  display: flex;
+  flex-direction: row;
+  overflow-x: scroll;
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.sendbird--mobile-mode .sendbird-suggested-replies.horizontal {
+  margin-left: -12px;
+  margin-right: -12px;
+  padding-left: 52px;
+  padding-right: 12px;
+}
+.sendbird-suggested-replies.horizontal .sendbird-suggested-replies__option:not(:last-child) {
+  margin-right: 8px;
+}
+.sendbird-suggested-replies::-webkit-scrollbar {
+  display: none;
+}
 .sendbird-theme--light .sendbird-suggested-replies {
   font-family: var(--sendbird-font-family-default);
 }
@@ -5244,7 +5336,8 @@ div.sendbird-text-message-item-body {
   height: 64px;
   min-height: 64px;
   width: 320px;
-  padding: 8px 64px 8px 8px;
+  padding-left: 8px;
+  padding-right: 16px;
   box-sizing: border-box;
 }
 .sendbird-theme--light .sendbird-channel-header {
@@ -5264,7 +5357,6 @@ div.sendbird-text-message-item-body {
 .sendbird-channel-header .sendbird-channel-header__title {
   display: flex;
   flex-direction: row;
-  width: 260px;
   height: 48px;
   border-radius: 4px;
 }
@@ -5645,9 +5737,6 @@ div.sendbird-text-message-item-body {
 }
 .sendbird-channel-settings .sendbird-channel-settings__header-icon {
   cursor: pointer;
-  position: absolute;
-  top: 16px;
-  right: 16px;
 }
 .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__header-icon .sendbird-channel-settings__close-icon path {
   fill: var(--sendbird-light-onlight-01);
@@ -5662,7 +5751,8 @@ div.sendbird-text-message-item-body {
   height: 64px;
   min-height: 64px;
   position: relative;
-  padding: 20px 24px;
+  padding-left: 24px;
+  padding-right: 20px;
   box-sizing: border-box;
 }
 .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__header {
@@ -6212,33 +6302,8 @@ div.sendbird-text-message-item-body {
   color: var(--sendbird-dark-ondark-01);
   background-color: var(--sendbird-dark-background-600);
 }
-.sendbird-message-search-pannel .sendbird-message-search-pannel__header {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 64px;
-  min-height: 64px;
-  box-sizing: border-box;
-}
-.sendbird-theme--light .sendbird-message-search-pannel .sendbird-message-search-pannel__header {
-  border-bottom: 1px solid var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-message-search-pannel .sendbird-message-search-pannel__header {
-  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
-}
-.sendbird-message-search-pannel .sendbird-message-search-pannel__header .sendbird-message-search-pannel__header__title {
-  position: absolute;
-  top: 20px;
-  left: 24px;
-  width: calc(100% - 74px);
-  overflow-x: hidden;
-  word-break: keep-all;
-  text-overflow: ellipsis;
-}
-.sendbird-message-search-pannel .sendbird-message-search-pannel__header .sendbird-message-search-pannel__header__close-button {
-  position: absolute;
-  top: 16px;
-  right: 16px;
+.sendbird-message-search-pannel .sendbird-message-search-pannel__header .sendbird-ui-header__middle__title {
+  margin-left: 4px;
 }
 .sendbird-message-search-pannel .sendbird-message-search-pannel__input {
   display: flex;
@@ -6494,7 +6559,7 @@ div.sendbird-text-message-item-body {
 }
 
 .sendbird-thread-ui__header {
-  width: 100%;
+  width: 320px;
 }
 .sendbird-theme--light .sendbird-thread-ui__header {
   border-top: 1px solid var(--sendbird-light-onlight-04);
@@ -6852,45 +6917,6 @@ div.sendbird-text-message-item-body {
   height: 50px;
   min-width: 136px;
 }
-.sendbird-thread-header {
-  position: relative;
-  min-width: 320px;
-  width: 320px;
-  min-height: 64px;
-  height: 64px;
-  display: inline;
-  padding: 13px 24px;
-  box-sizing: border-box;
-}
-
-.sendbird-thread-header__title {
-  position: relative;
-  max-width: 254px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sendbird-thread-header__channel-name {
-  position: relative;
-  max-width: 254px;
-  height: 12px;
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sendbird-thread-header__action {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 56px;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
 .sendbird-thread-list-item .sendbird-separator {
   margin: 4px 0px;
 }