stream-chat-react 11.11.0 → 11.12.1

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-timestamp + .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.11.0";
+export declare const version = "11.12.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.11.0';
+export var version = '11.12.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.11.0",
+  "version": "11.12.1",
   "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.1",
     "@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",

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"}