stream-chat-react 12.0.0-rc.9 → 12.1.0

package/dist/scss/v2/ThreadList/ThreadList-layout.scss

@@ -0,0 +1,152 @@
+.str-chat__thread-list-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.str-chat__unseen-threads-banner {
+  font-size: 16px;
+  font-weight: 400;
+
+  margin: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__button {
+    --str-chat-icon-width: 16px;
+    --str-chat-icon-heigh: 22px;
+
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.str-chat__thread-list {
+  .str-chat__thread-list-item {
+    align-items: stretch;
+    box-sizing: border-box;
+    padding-block: 14px;
+    padding-inline: 8px;
+    gap: 6px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    .str-chat__thread-list-item__channel {
+      --str-chat-icon-height: 14px;
+      --str-chat-icon-width: 14px;
+
+      display: flex;
+      gap: 5px;
+
+      .str-chat__icon {
+        margin-top: 2px;
+        flex-shrink: 0;
+      }
+    }
+
+    .str-chat__thread-list-item__thread-status-symbol {
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__channel-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__parent-message {
+      display: flex;
+      gap: 3px;
+      justify-content: space-between;
+      align-items: center;
+      height: 15px;
+    }
+
+    .str-chat__thread-list-item__parent-message-text {
+      font-size: 12px;
+      font-weight: 400;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply {
+      --str-chat__avatar-size: 49px;
+
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-details {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 4px;
+      width: 0;
+    }
+
+    .str-chat__thread-list-item__latest-reply-created-by {
+      font-weight: 500;
+      font-size: 16px;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow-x: hidden;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+      display: flex;
+      font-size: 14px;
+      font-weight: 400;
+      justify-content: space-between;
+      align-items: baseline;
+      line-height: 16px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply-timestamp {
+      white-space: nowrap;
+    }
+  }
+
+  .str-chat__thread-list-loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 14px;
+    padding-inline: 8px;
+  }
+}
+
+.str-chat__thread-list-empty-placeholder {
+  --str-chat-icon-height: 95px;
+  --str-chat-icon-width: 95px;
+
+  font-size: 20px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 16px;
+}

package/dist/scss/v2/ThreadList/ThreadList-theme.scss

@@ -0,0 +1,75 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-thread-list-border-color: var(--str-chat__surface-color);
+  --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color);
+
+  --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color);
+  --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color);
+
+  --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color);
+  --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color);
+
+  --str-chat-thread-list-item-text-color: var(--str-chat__text-color);
+  --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color);
+
+  --str-chat-thread-list-empty-placeholder-background-color: var(
+    --str-chat__secondary-background-color
+  );
+  --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color);
+}
+
+.str-chat__thread-list-container {
+  background-color: var(--str-chat-thread-list-container-background-color);
+}
+
+.str-chat__unseen-threads-banner {
+  border-radius: 16px;
+  background: var(--str-chat-unseen-threads-banner-background-color);
+  color: var(--str-chat-unseen-threads-banner-color);
+
+  &__button {
+    --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color);
+  }
+}
+
+.str-chat__thread-list {
+  
+  border-right: 1px solid var(--str-chat-thread-list-border-color);
+  
+  .str-chat__thread-list-item {
+    --str-chat-icon-color: var(--str-chat-thread-list-item-text-color);
+    
+    border: none;
+    background-color: var(--str-chat-thread-list-item-background-color-default);
+    color: var(--str-chat-thread-list-item-text-color);
+
+    &[aria-selected='true'] {
+      background-color: var(--str-chat-thread-list-item-background-color-selected);
+
+      .str-chat__thread-list-item__parent-message-text,
+      .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+        color: inherit;
+      }
+    }
+
+    .str-chat__thread-list-item__parent-message-text {
+      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
+    }
+
+    .str-chat__thread-list-item__latest-reply {
+      --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color);
+      --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color);
+    }
+
+    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
+    }
+  }
+}
+
+.str-chat__thread-list-empty-placeholder {
+  --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color);
+
+  background-color: var(--str-chat-thread-list-empty-placeholder-background-color);
+  color: var(--str-chat-thread-list-empty-placeholder-color);
+}

package/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-layout.scss

@@ -0,0 +1,49 @@
+.str-chat {
+  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
+  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
+}
+
+.str-chat__unread-count-badge-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.str-chat__unread-count-badge {
+  font-size: 12px;
+  min-width: 22px;
+  min-height: 22px;
+  line-height: 8px;
+  font-weight: 700;
+  padding: 7px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+
+  &--top-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+
+  &--bottom-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--bottom-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--top-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+}

package/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-theme.scss

@@ -0,0 +1,11 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
+  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
+}
+
+.str-chat__unread-count-badge {
+  background-color: var(--str-chat-unread-count-badge-background-color);
+  color: var(--str-chat-unread-count-badge-color);
+  border-radius: 9999px;
+}

package/dist/scss/v2/_base.scss

@@ -28,3 +28,34 @@ stream-icon-placeholder {
   justify-content: center;
   align-items: center;
 }
+
+.stream-chat__paginated-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  max-height: 100%;
+  min-height: 0;
+  gap: var(--str-chat__spacing-2);
+
+  .str-chat__loading-indicator {
+    margin: auto;
+  }
+}
+
+stream-paginated-list {
+  height: 100%;
+  max-height: 100%;
+}
+
+stream-user-list {
+  height: 100%;
+  max-height: 100%;
+
+  .str-chat__user-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-2);
+  }
+}

package/dist/scss/v2/index.layout.scss

@@ -15,6 +15,7 @@
 @use 'ChannelSearch/ChannelSearch-layout';
 @use 'common/CTAButton/CTAButton-layout';
 @use 'common/CircleFAButton/CircleFAButton-layout';
+@use 'Dialog/Dialog-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
 @use 'Icon/Icon-layout';
@@ -35,3 +36,6 @@
 @use 'Thread/Thread-layout';
 @use 'Tooltip/Tooltip-layout';
 @use 'TypingIndicator/TypingIndicator-layout';
+@use 'ThreadList/ThreadList-layout';
+@use 'ChatView/ChatView-layout';
+@use 'UnreadCountBadge/UnreadCountBadge-layout';

package/dist/scss/v2/index.scss

@@ -37,3 +37,6 @@
 @use 'Thread/Thread-theme';
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';
+@use 'ThreadList/ThreadList-theme';
+@use 'ChatView/ChatView-theme';
+@use 'UnreadCountBadge/UnreadCountBadge-theme';

package/dist/store/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useStateStore';

package/dist/store/hooks/index.js

@@ -0,0 +1 @@
+export * from './useStateStore';

package/dist/store/hooks/useStateStore.d.ts

@@ -0,0 +1,3 @@
+import type { StateStore } from 'stream-chat';
+export declare function useStateStore<T extends Record<string, unknown>, O extends readonly unknown[]>(store: StateStore<T>, selector: (v: T) => O): O;
+export declare function useStateStore<T extends Record<string, unknown>, O extends readonly unknown[]>(store: StateStore<T> | undefined, selector: (v: T) => O): O | undefined;

package/dist/store/hooks/useStateStore.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export function useStateStore(store, selector) {
+    const [state, setState] = useState(() => {
+        if (!store)
+            return undefined;
+        return selector(store.getLatestValue());
+    });
+    useEffect(() => {
+        if (!store)
+            return;
+        const unsubscribe = store.subscribeWithSelector(selector, setState);
+        return unsubscribe;
+    }, [store, selector]);
+    return state;
+}

package/dist/store/index.d.ts

@@ -0,0 +1 @@
+export * from './hooks';

package/dist/store/index.js

@@ -0,0 +1 @@
+export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "12.0.0-rc.9",
+  "version": "12.1.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -74,7 +74,8 @@
     }
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/i18n/Streami18n.js"
   ],
   "keywords": [
     "chat",
@@ -129,7 +130,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^8.33.1"
+    "stream-chat": "^8.40.8"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -170,7 +171,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "5.0.0-rc.2",
+    "@stream-io/stream-chat-css": "^5.0.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -204,7 +205,7 @@
     "core-js": "^3.6.5",
     "dotenv": "^8.6.0",
     "emoji-mart": "^5.5.2",
-    "esbuild": "^0.20.2",
+    "esbuild": "^0.23.1",
     "eslint": "7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
@@ -239,7 +240,7 @@
     "react-dom": "^18.1.0",
     "react-test-renderer": "^18.1.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "8.39.0",
+    "stream-chat": "^8.40.8",
     "ts-jest": "^29.1.4",
     "typescript": "^5.4.5"
   },