stream-chat-react 11.10.0 → 11.12.0

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

@@ -170,6 +170,35 @@
   /* Box shadow applied to audio widget */
   --str-chat__audio-attachment-widget-box-shadow: none;
 
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* Text color used in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
+
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-start: none;
+
+  /* Bottom border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-end: none;
+
+  /* Left (right in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
+
+  /* Box shadow applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-box-shadow: none;
+
   /* Border radius applied to the play / pause button of audio widget */
   --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
 
@@ -315,7 +344,11 @@
   }
 
   .str-chat__message-attachment-audio-widget--progress-track {
-    background-color: var(--str-chat__disabled-color);
+    background: linear-gradient(
+      to right,
+      var(--str-chat__primary-color)  var(--str-chat__message-attachment-audio-widget-progress),
+      var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress)
+    );
     border-radius: calc(var(--str-chat__spacing-px) * 5);
 
     .str-chat__message-attachment-audio-widget--progress-indicator {
@@ -329,6 +362,44 @@
     @include utils.circle-fab-overrides('audio-attachment-controls-button');
   }
 
+  .str-chat__message-attachment__voice-recording-widget {
+    @include utils.component-layer-overrides('voice-recording-attachment-widget');
+
+    .str-chat__message-attachment__voice-recording-widget__title {
+      @include utils.ellipsis-text;
+      font: var(--str-chat__subtitle-medium-text);
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__timer {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__text-low-emphasis-color);
+      white-space: nowrap;
+    }
+
+    .str-chat__wave-progress-bar__amplitude-bar {
+      background: var(--str-chat__text-low-emphasis-color);
+      border-radius: var(--str-chat__border-radius-circle);
+    }
+
+    .str-chat__wave-progress-bar__amplitude-bar--active {
+      background: var(--str-chat__primary-color);
+    }
+
+    .str-chat__wave-progress-bar__progress-indicator {
+      background-color: #fff;
+      border-radius: var(--str-chat__border-radius-circle);
+      border: 1px solid var(--str-chat__secondary-overlay-color);
+      cursor: grab;
+    }
+  }
+
+  .str-chat__message_attachment__playback-rate-button {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: var(--str-chat__border-radius-circle);
+    background-color: #fff; // in design marked as static, excluded from theming
+    cursor: pointer;
+  }
+
   .str-chat__message-attachment--card {
     @include utils.component-layer-overrides('card-attachment');
     font: var(--str-chat__body-text);

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

@@ -23,7 +23,7 @@
   }
 }
 
-.str-chat__message {
+.str-chat-angular__edit-message-form {
   .str-chat__message-input-angular-host {
     max-height: 100%;
     min-height: 0;
@@ -32,21 +32,19 @@
     max-width: 100%;
   }
 
-  .str-chat__message-edit-in-progress {
-    .str-chat__modal--open {
-      .str-chat__modal__inner {
-        height: 40%;
-        max-height: 80%;
-        min-width: 90%;
-        max-width: 90%;
-        width: 90%;
-        flex-basis: min-content;
+  .str-chat__modal--open {
+    .str-chat__modal__inner {
+      height: 40%;
+      max-height: 80%;
+      min-width: 90%;
+      max-width: 90%;
+      width: 90%;
+      flex-basis: min-content;
 
-        @media only screen and (min-device-width: 768px) {
-          min-width: 40%;
-          max-width: 60%;
-          width: min-content;
-        }
+      @media only screen and (min-device-width: 768px) {
+        min-width: 40%;
+        max-width: 60%;
+        width: min-content;
       }
     }
   }

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

@@ -11,7 +11,7 @@
   --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
 
   /* The maximum allowed width of quoted messages inside the message component */
-  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
+  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 250);
 
   /* The maximum allowed width of quoted messages inside the message input component */
   --str-chat__quoted-message-inside-message-input-max-width: calc(
@@ -192,6 +192,7 @@
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     column-gap: var(--str-chat__spacing-1);
     margin-block-start: var(--str-chat__spacing-0_5);
@@ -199,6 +200,21 @@
     .str-chat__message-simple-name {
       @include utils.prevent-glitch-text-overflow;
     }
+
+    .str-chat__message-simple-time + .str-chat__mesage-simple-edited::before {
+      content: '•';
+      margin-right: var(--str-chat__spacing-1);
+    }
+
+    .str-chat__message-edited-timestamp {
+      --str-chat__message-edited-timestamp-height: 1rem;
+      flex-basis: 100%;
+    }
+  }
+
+  &.str-chat__message--me .str-chat__message-metadata {
+    justify-content: flex-end;
+    text-align: right;
   }
 
   .str-chat__message-status {
@@ -269,7 +285,8 @@
 .str-chat__ul:not(.str-chat__message-options-in-bubble),
 .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
   /* This rule won't be applied in browsers that don't support :has() */
-  .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
+  .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)),
+  .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
     .str-chat__message-options {
       display: flex;
     }
@@ -285,7 +302,8 @@
 
   /* Fallback for when :has() is unsupported */
   @supports not selector(:has(a, b)) {
-    .str-chat__li:hover {
+    .str-chat__li:hover,
+    .str-chat__li:focus-within {
       .str-chat__message-options {
         display: flex;
       }
@@ -326,7 +344,6 @@
     display: none;
   }
 
-  .str-chat__message-edit-in-progress.str-chat__message-options,
   .str-chat__message-actions-open.str-chat__message-options {
     display: flex;
   }
@@ -462,3 +479,30 @@
     }
   }
 }
+
+.str-chat-angular__message-bubble {
+  /* transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 */
+  transform: translate3d(0, 0, 0);
+
+  &.str-chat-angular__message-bubble--attachment-modal-open {
+    /* transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  */
+    transform: none;
+  }
+}
+
+.str-chat__message-edited-timestamp {
+  overflow: hidden;
+  transition: height 0.1s;
+
+  &--open {
+    height: var(--str-chat__message-edited-timestamp-height, 1rem);
+  }
+
+  &--collapsed {
+    height: 0;
+  }
+}
+
+.str-chat__message-text--pointer-cursor {
+  cursor: pointer;
+}

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

@@ -27,11 +27,3 @@
     display: block;
   }
 }
-
-.str-chat__message-edit-in-progress {
-  .ngxp__container {
-    transform: initial !important;
-    will-change: initial !important;
-    z-index: initial;
-  }
-}

package/dist/scss/v2/_base.scss

@@ -14,8 +14,7 @@
     border-color: transparent !important;
 
     .ngxp__arrow {
-      color: transparent;
-      width: 100%;
+      display: none;
     }
   }
 }

package/dist/scss/v2/_utils.scss

@@ -63,7 +63,6 @@
 }
 
 @mixin button-reset {
-  outline: none;
   background: none;
   border: none;
 }

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { DefaultStreamChatGenerics, ChannelUnreadUiState } from './types';
+export type { DefaultStreamChatGenerics, ChannelUnreadUiState } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.10.0";
+export declare const version = "11.12.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.10.0';
+export var version = '11.12.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.10.0",
+  "version": "11.12.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -102,7 +102,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.15.0"
+    "stream-chat": "^8.21.0"
   },
   "peerDependenciesMeta": {
     "emoji-mart": {
@@ -135,7 +135,7 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@ladle/react": "^0.16.0",
-    "@playwright/test": "^1.29.1",
+    "@playwright/test": "^1.42.1",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-image": "^2.1.1",
@@ -146,7 +146,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": "^4.7.1",
+    "@stream-io/stream-chat-css": "^4.9.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -223,7 +223,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.15.0",
+    "stream-chat": "^8.21.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",
@@ -258,8 +258,8 @@
     "e2e": "playwright test",
     "e2e-fixtures": "node e2e/fixtures/fixtures.mjs",
     "e2e-container": "./e2e/scripts/run_in_container.sh",
-    "docs-copy-css-docs": "scripts/merge-stream-chat-css-docs.sh node_modules/@stream-io/stream-chat-css/docs",
-    "docs-run": "yarn docs-copy-css-docs && stream-chat-docusaurus -s"
+    "docs:copy-css-docs": "scripts/merge-stream-chat-css-docs.sh node_modules/@stream-io/stream-chat-css/docs",
+    "docs:run": "yarn docs:copy-css-docs && stream-chat-docusaurus -s"
   },
   "resolutions": {
     "ast-types": "^0.14.0",

package/dist/components/Attachment/DownloadButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/DownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,sBAS/D,CAAC"}

package/dist/components/Attachment/FileSizeIndicator.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type FileSizeIndicatorProps = {
-    fileSize?: number;
-};
-export declare const FileSizeIndicator: ({ fileSize }: FileSizeIndicatorProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=FileSizeIndicator.d.ts.map

package/dist/components/Attachment/FileSizeIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileSizeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/FileSizeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,6BAMrE,CAAC"}