@sendbird/uikit-react 3.12.1 → 3.13.0

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-QauQilHV.js');
+require('./chunks/bundle-9l41IWgC.js');
 
 /**
  * Example:

package/cjs/utils/message/isVoiceMessage.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('../../chunks/bundle-opmIFrXg.js');
-require('../../chunks/bundle-QauQilHV.js');
+var index = require('../../chunks/bundle-Gw-7KmmG.js');
+require('../../chunks/bundle-9l41IWgC.js');
 require('@sendbird/chat/groupChannel');
 require('./getOutgoingMessageState.js');
-require('../../chunks/bundle-7pGAEUaG.js');
+require('../../chunks/bundle-SWOq3kxG.js');
 
 var isVoiceMessage = index.isVoiceMessage;
 

package/cjs/withSendbird.js

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

package/dist/index.css

@@ -378,6 +378,7 @@
   --sendbird-light-onlight-02: rgba(0, 0, 0, 0.50);
   --sendbird-light-onlight-03: rgba(0, 0, 0, 0.38);
   --sendbird-light-onlight-04: rgba(0, 0, 0, 0.12);
+  --sendbird-light-onlight-05: rgba(0, 0, 0, 0.44);
   --sendbird-light-ondark-01: rgba(255, 255, 255, 0.88);
   --sendbird-light-ondark-02: rgba(255, 255, 255, 0.50);
   --sendbird-light-ondark-03: rgba(255, 255, 255, 0.38);
@@ -426,6 +427,7 @@
   --sendbird-dark-ondark-02: rgba(255, 255, 255, 0.50);
   --sendbird-dark-ondark-03: rgba(255, 255, 255, 0.38);
   --sendbird-dark-ondark-04: rgba(255, 255, 255, 0.12);
+  --sendbird-dark-ondark-05: rgba(255, 255, 255, 0.44);
   --sendbird-dark-shadow-01: 0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12);
   --sendbird-dark-shadow-02: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12);
   --sendbird-dark-shadow-03: 0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12);
@@ -1139,6 +1141,20 @@
   color: var(--sendbird-dark-onlight-02);
 }
 
+.sendbird-theme--light .sendbird-label--color-oncontent-inverse-1 {
+  color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-label--color-oncontent-inverse-1 {
+  color: var(--sendbird-dark-ondark-01);
+}
+
+.sendbird-theme--light .sendbird-label--color-oncontent-inverse-5 {
+  color: var(--sendbird-light-onlight-05);
+}
+.sendbird-theme--dark .sendbird-label--color-oncontent-inverse-5 {
+  color: var(--sendbird-dark-ondark-05);
+}
+
 .sendbird-theme--light .sendbird-label--color-primary {
   color: var(--sendbird-light-primary-300);
 }
@@ -1212,6 +1228,13 @@
   fill: var(--sendbird-dark-ondark-01);
 }
 
+.sendbird-theme--light .sendbird-icon-color--content-inverse-5 [class*=fill] {
+  fill: var(--sendbird-light-onlight-05);
+}
+.sendbird-theme--dark .sendbird-icon-color--content-inverse-5 [class*=fill] {
+  fill: var(--sendbird-dark-ondark-05);
+}
+
 .sendbird-icon-color--white [class*=fill] {
   fill: #ffffff;
 }
@@ -1318,32 +1341,6 @@
   padding: 0px 0px 24px 0px;
 }
 
-@keyframes sbHighlight {
-  0% {
-    background-color: #FFF2B6;
-  }
-  99% {
-    background-color: #FFF2B6;
-  }
-}
-@keyframes sbTextHighlight {
-  0% {
-    color: var(--sendbird-dark-onlight-01);
-  }
-  99% {
-    color: var(--sendbird-dark-onlight-01);
-  }
-}
-@keyframes sbHighlightBlock {
-  0% {
-    opacity: 0.5;
-    background-color: #FFF2B6;
-  }
-  99% {
-    opacity: 0.5;
-    background-color: #FFF2B6;
-  }
-}
 .sendbird-msg-hoc__animated .sendbird-message-content {
   animation: bounce 1s ease;
 }
@@ -1362,42 +1359,6 @@
   }
 }
 
-.sendbird-msg-hoc__highlighted .sendbird-text-message-item-body,
-.sendbird-msg-hoc__highlighted .sendbird-file-message-item-body {
-  animation-name: sbHighlight;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-.sendbird-msg-hoc__highlighted .sendbird-text-message-item-body__message,
-.sendbird-msg-hoc__highlighted .sendbird-file-message-item-body__file-name__text {
-  animation-name: sbTextHighlight;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-.sendbird-msg-hoc__highlighted .sendbird-voice-message-item-body {
-  display: block;
-  animation-name: sbHighlightBlock;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-.sendbird-msg-hoc__highlighted .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__image-cover {
-  display: block;
-  animation-name: sbHighlightBlock;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-.sendbird-msg-hoc__highlighted .sendbird-og-message-item-body .sendbird-og-message-item-body__cover {
-  display: block;
-  animation-name: sbHighlightBlock;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-.sendbird-msg-hoc__highlighted .sendbird-message-content-reactions {
-  animation-name: sbHighlight;
-  animation-duration: 1.6s;
-  animation-fill-mode: forwards;
-}
-
 .sendbird-conversation__scroll-container {
   display: flex;
   height: 100%;
@@ -2306,6 +2267,10 @@
 .sendbird-message-content__middle__body-container__feedback-buttons-container_with-thread-replies {
   bottom: calc(-1 * (var(--sendbird-feedback-buttons-container-height) + var(--sendbird-feedback-buttons-container-margin-top) + var(--sendbird-thread-replies-height) + var(--sendbird-thread-replies-margin-top)));
 }
+
+.sendbird-message-content__middle__for_template_message {
+  width: 100%;
+}
 .sendbird-message-status {
   position: relative;
   display: inline-flex;
@@ -4103,6 +4068,186 @@ div.sendbird-text-message-item-body {
 .sendbird-unknown-message-item-body .sendbird-unknown-message-item-body__description {
   display: block;
 }
+.sendbird-template-message-item-body {
+  position: relative;
+  display: inline-block;
+  box-sizing: content-box;
+  background-color: transparent;
+  white-space: pre-line;
+  word-break: break-word;
+}
+
+.sendbird-template-message-item-body__fallback_message {
+  position: relative;
+  display: inline-block;
+  box-sizing: content-box;
+  padding: 8px 12px;
+  border-radius: 16px;
+  white-space: pre-line;
+  word-break: break-word;
+}
+.sendbird-theme--light .sendbird-template-message-item-body__fallback_message.incoming {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-template-message-item-body__fallback_message.incoming {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-template-message-item-body__fallback_message.outgoing {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-template-message-item-body__fallback_message.outgoing {
+  background-color: var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-template-message-item-body__fallback_message.mouse-hover.incoming, .sendbird-theme--light .sendbird-template-message-item-body__fallback_message:hover.incoming {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-template-message-item-body__fallback_message.mouse-hover.incoming, .sendbird-theme--dark .sendbird-template-message-item-body__fallback_message:hover.incoming {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-template-message-item-body__fallback_message.mouse-hover.outgoing, .sendbird-theme--light .sendbird-template-message-item-body__fallback_message:hover.outgoing {
+  background-color: var(--sendbird-light-primary-400);
+}
+.sendbird-theme--dark .sendbird-template-message-item-body__fallback_message.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-template-message-item-body__fallback_message:hover.outgoing {
+  background-color: var(--sendbird-dark-primary-300);
+}
+.sendbird-template-message-item-body__fallback_message .sendbird-template-message-item-body__fallback_message__header {
+  display: block;
+}
+.sendbird-template-message-item-body__fallback_message .sendbird-template-message-item-body__fallback_message__description {
+  display: block;
+}
+
+.sendbird-template-loading-message-item-body {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  border-radius: 16px;
+  height: 274px;
+  width: 100%;
+}
+.sendbird-theme--light .sendbird-template-loading-message-item-body.incoming {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-template-loading-message-item-body.incoming {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-template-loading-message-item-body.outgoing {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-template-loading-message-item-body.outgoing {
+  background-color: var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-template-loading-message-item-body.mouse-hover.incoming, .sendbird-theme--light .sendbird-template-loading-message-item-body:hover.incoming {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-template-loading-message-item-body.mouse-hover.incoming, .sendbird-theme--dark .sendbird-template-loading-message-item-body:hover.incoming {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-template-loading-message-item-body.mouse-hover.outgoing, .sendbird-theme--light .sendbird-template-loading-message-item-body:hover.outgoing {
+  background-color: var(--sendbird-light-primary-400);
+}
+.sendbird-theme--dark .sendbird-template-loading-message-item-body.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-template-loading-message-item-body:hover.outgoing {
+  background-color: var(--sendbird-dark-primary-300);
+}
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap');
+
+.sb-message-template__border{
+  position: relative;
+}
+
+.sb-message-template__border::after {
+  content:'';
+  position: absolute;
+  top: 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--dark
+.sb-message-template__box {
+  background-color: #2c2c2c;
+}
+
+.sendbird-theme--light
+.sb-message-template__text {
+  color: rgba(0, 0, 0, 0.88);
+}
+.sendbird-theme--dark
+.sb-message-template__text {
+  color: rgba(255, 255, 255, 0.88);
+}
+.sb-message-template__text {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.sendbird-theme--light
+.sb-message-template__text-button {
+  background-color: #e0e0e0;
+  color: #742ddd;
+}
+.sendbird-theme--dark
+.sb-message-template__text-button {
+  background-color: #393939;
+  color: #c2a9fa;
+}
+.sb-message-template__text-button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: center;
+  /* opacity: 0.8; */
+}
+
+.sb-message-template__text-button:hover {
+  opacity: 1;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+}
+
+.sb-message-template__text-button,
+.sb-message-template__image-button {
+  cursor: pointer;
+  border-style: none;
+}
+
+.sb-message-template__parent {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+
+.sendbird-message-template__root * {
+  box-sizing: border-box;
+}
 .sendbird-iconbutton__feedback {
   display: flex;
   justify-content: center;