@sendbird/uikit-react 3.17.12 → 3.18.1

package/dist/index.css

@@ -924,6 +924,14 @@
   margin-bottom: 16px;
 }
 
+[dir="ltr"] .sendbird-modal__content .sendbird-modal__header {
+  padding-right: 40px;
+}
+
+[dir="rtl"] .sendbird-modal__content .sendbird-modal__header {
+  padding-left: 40px;
+}
+
 .sendbird-modal__content .sendbird-modal__body {
   height: calc(100% - 116px);
   overflow: auto;
@@ -2926,18 +2934,24 @@
 .sendbird-message-input .sendbird-message-input--placeholder {
   position: absolute;
   pointer-events: none;
-  top: 18px;
+  bottom: 12px;
+  height: 32px;
   font-family: var(--sendbird-font-family-default);
   font-size: 14px;
-  line-height: 1.43;
+  line-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 [dir="ltr"] .sendbird-message-input .sendbird-message-input--placeholder {
   left: 16px;
+  right: 56px;
 }
 
 [dir="rtl"] .sendbird-message-input .sendbird-message-input--placeholder {
   right: 16px;
+  left: 56px;
 }
 
 .sendbird-message-input .sendbird-message-input--attach {
@@ -3048,6 +3062,236 @@
   cursor: not-allowed;
 }
 
+.sendbird-message-input--composer {
+  position: relative;
+}
+
+.sendbird-message-input__pending-preview {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 8px;
+  margin-bottom: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.sendbird-message-input__pending-preview::-webkit-scrollbar {
+  display: none;
+}
+
+.sendbird-message-input__pending-file {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  position: relative;
+}
+
+.sendbird-message-input__pending-file .sendbird-message-input__pending-file__thumbnail {
+  position: relative;
+  width: 72px;
+  height: 72px;
+}
+
+.sendbird-message-input__pending-file .sendbird-message-input__pending-file__image {
+  position: absolute;
+  bottom: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+[dir="ltr"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image {
+  left: 0;
+}
+
+[dir="rtl"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image {
+  right: 0;
+}
+
+.sendbird-message-input__pending-file .sendbird-message-input__pending-file__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sendbird-message-input__pending-file .sendbird-message-input__pending-file__image-placeholder {
+  align-items: center;
+  border-radius: 8px;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  height: 64px;
+  justify-content: center;
+  position: absolute;
+  width: 64px;
+}
+
+[dir="ltr"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image-placeholder {
+  left: 0;
+}
+
+[dir="rtl"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image-placeholder {
+  right: 0;
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image-placeholder {
+  background-color: var(--sendbird-light-background-100);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-file .sendbird-message-input__pending-file__image-placeholder {
+  background-color: var(--sendbird-dark-background-400);
+  border: 1px solid var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-message-input__pending-file .sendbird-message-input__pending-file__remove {
+  position: absolute;
+  top: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[dir="ltr"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__remove {
+  right: 0;
+}
+
+[dir="rtl"] .sendbird-message-input__pending-file .sendbird-message-input__pending-file__remove {
+  left: 0;
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-file .sendbird-message-input__pending-file__remove .sendbird-icon [class*=fill] {
+  fill: var(--sendbird-light-onlight-02);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-file .sendbird-message-input__pending-file__remove .sendbird-icon [class*=fill] {
+  fill: var(--sendbird-dark-ondark-01);
+}
+
+.sendbird-message-input__pending-card {
+  flex-shrink: 0;
+  height: 72px;
+  position: relative;
+  width: 188px;
+}
+
+.sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  align-items: center;
+  border-radius: 12px;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  height: 64px;
+  padding: 8px 12px;
+  position: absolute;
+  width: 180px;
+}
+
+[dir="ltr"] .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  left: 0;
+}
+
+[dir="rtl"] .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  right: 0;
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  border: 1px solid var(--sendbird-light-onlight-04);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  border: 1px solid var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  background-color: var(--sendbird-light-background-100);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-card .sendbird-message-input__pending-card__body {
+  background-color: var(--sendbird-dark-background-400);
+}
+
+.sendbird-message-input__pending-card .sendbird-message-input__pending-card__icon {
+  align-items: center;
+  border-radius: 8px;
+  display: flex;
+  flex-shrink: 0;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-card .sendbird-message-input__pending-card__icon {
+  background-color: var(--sendbird-light-background-50);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-card .sendbird-message-input__pending-card__icon {
+  background-color: var(--sendbird-dark-background-600);
+}
+
+.sendbird-message-input__pending-card .sendbird-message-input__pending-card__meta {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  width: 108px;
+}
+
+.sendbird-message-input__pending-card .sendbird-message-input__pending-card__name {
+  font-weight: 700;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sendbird-message-input__pending-card .sendbird-message-input__pending-card__remove {
+  position: absolute;
+  top: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[dir="ltr"] .sendbird-message-input__pending-card .sendbird-message-input__pending-card__remove {
+  right: 0;
+}
+
+[dir="rtl"] .sendbird-message-input__pending-card .sendbird-message-input__pending-card__remove {
+  left: 0;
+}
+
+.sendbird-theme--light .sendbird-message-input__pending-card .sendbird-message-input__pending-card__remove .sendbird-icon [class*=fill] {
+  fill: var(--sendbird-light-onlight-02);
+}
+
+.sendbird-theme--dark .sendbird-message-input__pending-card .sendbird-message-input__pending-card__remove .sendbird-icon [class*=fill] {
+  fill: var(--sendbird-dark-ondark-01);
+}
+
 .sendbird-message-input__disabled {
   pointer-events: none;
   cursor: not-allowed;
@@ -3062,6 +3306,80 @@
   color: var(--sendbird-dark-ondark-04);
   border: 1px solid var(--sendbird-dark-ondark-04);
 }
+
+.sendbird-theme--light .sendbird-message-input--textarea-locked {
+  color: var(--sendbird-light-onlight-03);
+}
+
+.sendbird-theme--dark .sendbird-message-input--textarea-locked {
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-message-input--has-pending .sendbird-message-input--textarea {
+  height: 126px;
+  max-height: 126px;
+  min-height: 126px;
+  overflow-y: hidden;
+}
+
+.sendbird-theme--light .sendbird-message-input--has-pending .sendbird-message-input--textarea {
+  border-color: var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--dark .sendbird-message-input--has-pending .sendbird-message-input--textarea {
+  border-color: var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--light .sendbird-message-input--has-pending .sendbird-message-input--textarea:focus {
+  border-color: var(--sendbird-light-primary-300);
+  box-shadow: none;
+}
+
+.sendbird-theme--dark .sendbird-message-input--has-pending .sendbird-message-input--textarea:focus {
+  border-color: var(--sendbird-dark-primary-200);
+  box-shadow: none;
+}
+
+.sendbird-theme--light .sendbird-message-input--has-pending .sendbird-message-input--textarea:active {
+  border-color: var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--dark .sendbird-message-input--has-pending .sendbird-message-input--textarea:active {
+  border-color: var(--sendbird-dark-primary-200);
+}
+
+.sendbird-message-input--has-pending .sendbird-message-input__pending-preview {
+  margin-bottom: 0;
+  position: absolute;
+  top: 12px;
+}
+
+[dir="ltr"] .sendbird-message-input--has-pending .sendbird-message-input__pending-preview {
+  left: 16px;
+  right: 56px;
+}
+
+[dir="rtl"] .sendbird-message-input--has-pending .sendbird-message-input__pending-preview {
+  right: 16px;
+  left: 56px;
+}
+
+.sendbird-message-input--has-pending .sendbird-message-input--placeholder {
+  bottom: 12px;
+  height: auto;
+  line-height: 1.43;
+  top: 94px;
+}
+
+.sendbird-message-input--has-pending .sendbird-message-input--send {
+  bottom: 12px;
+}
+
+.sendbird--mobile-mode .sendbird-message-input--has-pending .sendbird-message-input--send {
+  bottom: auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .sendbird-message-content {
   display: inline-flex;
   flex-direction: row;

package/hooks/useConnectionState.js

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { ConnectionHandler, ConnectionState } from '@sendbird/chat';
-import { u as uuidv4 } from '../chunks/bundle-B9eInLCQ.js';
-import { u as useSendbird } from '../chunks/bundle-N4pYliV4.js';
-import '../chunks/bundle-Rf2YUo_V.js';
-import '../chunks/bundle-Do4xiOif.js';
-import '../chunks/bundle-C8L0rqDO.js';
+import { u as uuidv4 } from '../chunks/bundle-DnjdXo2G.js';
+import { u as useSendbird } from '../chunks/bundle-CsMoZtyW.js';
+import '../chunks/bundle-ybWGQIGZ.js';
+import '../chunks/bundle-CpRenMkE.js';
+import '../chunks/bundle-CVZalWDz.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/openChannel';
 

package/hooks/useLocalization.js

@@ -1,8 +1,8 @@
-import { u as useLocalization } from '../chunks/bundle-D-RwYEMS.js';
-import '../chunks/bundle-Rf2YUo_V.js';
+import { u as useLocalization } from '../chunks/bundle-BRfCkqhH.js';
+import '../chunks/bundle-ybWGQIGZ.js';
 import 'react';
-import '../chunks/bundle-DKXmeTpK.js';
-import '../chunks/bundle-V2GjRdnC.js';
+import '../chunks/bundle-BrSeZGBM.js';
+import '../chunks/bundle-CZkVELoW.js';
 
 /**
  * This file is only for re-exporting the `useLocalization` hook.

package/hooks/useModal.js

@@ -1,22 +1,22 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-Rf2YUo_V.js';
-import React__default, { createContext, useState, useCallback, useMemo, useContext } from 'react';
-import { K } from '../chunks/bundle-DSBzIeUm.js';
-import { n as noop, c as classnames } from '../chunks/bundle-D7HOrOoM.js';
-import { M as Modal } from '../chunks/bundle-7U4PQody.js';
-export { a as MODAL_ROOT, b as ModalRoot } from '../chunks/bundle-7U4PQody.js';
+import { e as __spreadArray, _ as __assign } from '../chunks/bundle-ybWGQIGZ.js';
+import React__default, { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { K } from '../chunks/bundle-CH68GQ1g.js';
+import { n as noop, c as classnames } from '../chunks/bundle-BHlB_i0L.js';
+import { a as Modal } from '../chunks/bundle-CPv8kS7Z.js';
+export { M as MODAL_ROOT, e as ModalRoot } from '../chunks/bundle-CPv8kS7Z.js';
 import 'react-dom';
-import '../chunks/bundle-D-RwYEMS.js';
-import '../chunks/bundle-DKXmeTpK.js';
-import '../chunks/bundle-V2GjRdnC.js';
-import '../chunks/bundle-CA3QA8D9.js';
+import '../chunks/bundle-BRfCkqhH.js';
+import '../chunks/bundle-BrSeZGBM.js';
+import '../chunks/bundle-CZkVELoW.js';
+import '../chunks/bundle-BRgACRFj.js';
 import '../ui/IconButton.js';
 import '../ui/Button.js';
-import '../chunks/bundle-C0kbt3jK.js';
+import '../chunks/bundle-BPmYBX7K.js';
 import '../ui/Icon.js';
-import '../chunks/bundle-B9eInLCQ.js';
-import '../chunks/bundle-N4pYliV4.js';
-import '../chunks/bundle-Do4xiOif.js';
-import '../chunks/bundle-C8L0rqDO.js';
+import '../chunks/bundle-DnjdXo2G.js';
+import '../chunks/bundle-CsMoZtyW.js';
+import '../chunks/bundle-CpRenMkE.js';
+import '../chunks/bundle-CVZalWDz.js';
 import '@sendbird/chat';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/openChannel';