stream-chat-react 11.22.0 → 12.0.0-rc.2

package/dist/index.d.ts

@@ -3,4 +3,3 @@ export * from './context';
 export * from './i18n';
 export * from './types';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map

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

@@ -23,7 +23,7 @@
 // React SDK's version of Angular SDK's .dropup (mention-list)
 .str-chat__suggestion-list-container {
   position: absolute;
-  bottom: var(--str-chat__spacing-7);
+  bottom: calc(100% + var(--str-chat__spacing-2_5));
   width: 100%;
   padding: var(--str-chat__spacing-2) 0;
 

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

@@ -196,8 +196,10 @@
   @include utils.component-layer-overrides('suggestion-list-container');
 
   .str-chat__suggestion-list {
-    .str-chat__suggestion-list-item > a {
-      text-decoration: none;
+    .str-chat__suggestion-list-item {
+      > a {
+        text-decoration: none;
+      }
     }
 
     .str-chat__suggestion-item--selected {

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

@@ -1,30 +1,59 @@
 .str-chat {
-  /* The size of the avatar, only available in Angular v5+ */
   --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
 
+  .str-chat__avatar--autocomplete-item,
   .stream-chat__avatar--autocomplete-item {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
 
+  .str-chat__avatar--channel-header,
   .stream-chat__avatar--channel-header {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
   }
 
+  .str-chat__avatar--channel-preview,
   .stream-chat__avatar--channel-preview {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
   }
 
+  .str-chat__avatar--quoted-message-sender,
   .stream-chat__avatar--quoted-message-sender {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
   }
 
+  .str-chat__avatar--reaction,
   .stream-chat__avatar--reaction {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
   }
+
+  .str-chat__avatar--message-status,
+  .stream-chat__avatar--message-status {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
+  }
 }
 
 .str-chat__avatar {
   position: relative;
+  height: var(--str-chat__avatar-size);
+  line-height: var(--str-chat__avatar-size);
+  width: var(--str-chat__avatar-size);
+  min-width: var(--str-chat__avatar-size);
+
+  &.str-chat__avatar--one-letter,
+  &.stream-chat__avatar--one-letter {
+    font-size: calc(var(--str-chat__avatar-size) * 0.5);
+  }
+
+  &.str-chat__avatar--multiple-letters,
+  &.stream-chat__avatar--multiple-letters {
+    font-size: calc(var(--str-chat__avatar-size) * 0.3);
+  }
+
+  .str-chat__avatar-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;;
+  }
 
   .str-chat__avatar-fallback {
     text-align: center;
@@ -45,25 +74,4 @@
   flex-shrink: 0;
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
-}
-
-.str-chat-angular__avatar {
-  height: var(--str-chat__avatar-size);
-  line-height: var(--str-chat__avatar-size);
-  width: var(--str-chat__avatar-size);
-
-  &.stream-chat__avatar--one-letter {
-    font-size: calc(var(--str-chat__avatar-size) * 0.5);
-  }
-
-  &.stream-chat__avatar--multiple-letters {
-    font-size: calc(var(--str-chat__avatar-size) * 0.3);
-  }
-
-  .str-chat__avatar-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;;
-  }
-  
-}
+}

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

@@ -34,11 +34,6 @@
       @include utils.flex-row-center;
     }
   }
-
-  // This is displayed only in theme-v1
-  .str-chat__down-main {
-    display: none;
-  }
 }
 
 .str-chat__channel-list-react {

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

@@ -113,6 +113,7 @@
 
       .channel-search__result-text,
       .str-chat__channel-search-result--display-name {
+        @include utils.ellipsis-text;
         @include utils.prevent-glitch-text-overflow;
       }
     }

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

@@ -1,31 +1,31 @@
 @use '../utils';
 
 .str-chat {
-  /* The border radius used for the borders of the component */
+  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-radius: none;
 
-  /* The text color used for the send button */
+  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
 
-  /* The text color used for the cancel button */
+  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
 
-  /* The background color of the component */
+  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-background-color: transparent;
 
-  /* Top border of the component */
+  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-start: none;
 
-  /* Bottom border of the component */
+  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-end: none;
 
-  /* Left (right in RTL layout) border of the component */
+  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-start: none;
 
-  /* Right (left in RTL layout) border of the component */
+  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-end: none;
 
-  /* Box shadow applied to the component */
+  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-box-shadow: none;
 }
 

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

@@ -1,7 +1,7 @@
 @use '../utils';
 
 .str-chat {
-  /* The width/height of the message options buttons */
+  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
   --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
 
   /* The maximum allowed width of the message component */
@@ -26,6 +26,12 @@
 }
 
 .str-chat__message {
+  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+
+  &.str-chat__message-without-touch-support {
+    --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
+  }
+
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
   }
@@ -127,7 +133,7 @@
       align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
-      width: calc(3 * var(--str-chat__message-options-button-size));
+      width: var(--str-chat-message-options-size);
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -287,8 +293,8 @@
 }
 
 // Message options display - default mode: they appear when .str-chat__li is hovered
-.str-chat__ul:not(.str-chat__message-options-in-bubble),
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
+.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support),
+.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
   /* 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:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
@@ -355,11 +361,11 @@
 }
 
 .str-chat__message--other .str-chat__message-inner {
-  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-end: var(--str-chat-message-options-size);
 }
 
 .str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-start: var(--str-chat-message-options-size);
 }
 
 .str-chat__li--middle,
@@ -512,3 +518,28 @@
 .str-chat__message-text--pointer-cursor {
   cursor: pointer;
 }
+
+.str-chat__message-with-touch-support {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &.str-chat__message-menu-opened {
+    .str-chat__attachments-container,
+    .str-chat__message-text-inner {
+      pointer-events: none;
+    }
+  }
+
+  .str-chat__message-inner {
+    margin-inline: 0;
+  }
+
+  .str-chat__message-options {
+    display: none;
+  }
+
+  .stream-chat-angular__image-modal-host {
+    -webkit-touch-callout: default;
+  }
+}

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-layout.scss

@@ -6,6 +6,17 @@
   position: absolute;
   inset-block-end: 100%;
 
+  &.str-chat-angular-v5__reaction-selector {
+    position: static;
+
+    .str-chat__message-reactions-options {
+      max-width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: none;
+    }
+  }
+
   .str-chat__message-reactions-options {
     list-style: none;
     display: flex;

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-theme.scss

@@ -62,6 +62,11 @@
 
   /* Box shadow applied to the component */
   --str-chat__message-reactions-option-box-shadow: none;
+
+  .str-chat-angular-v5__reaction-selector {
+    --str-chat__message-reactions-options-box-shadow: none;
+    --str-chat__message-reactions-options-border-radius: 0;
+  }
 }
 
 .str-chat__reaction-selector {

package/dist/scss/v2/_emoji-replacement.scss

@@ -21,7 +21,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 .str-chat--windows-flags {
   // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
-  .str-chat__textarea__textarea,
+  .str-chat__textarea__textarea, // class name from theme v1
+  .str-chat__message-textarea,
   .str-chat__message-text-inner *,
   .str-chat__emoji-item--entity,
   .emoji-mart-emoji-native * {
@@ -32,7 +33,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 @-moz-document url-prefix('') {
   .str-chat--windows-flags {
-    .str-chat__textarea__textarea,
+    .str-chat__textarea__textarea, // class name from theme v1
+    .str-chat__message-textarea,
     .str-chat__message-text-inner *,
     .str-chat__emoji-item--entity,
     .emoji-mart-emoji-native * {

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

@@ -105,4 +105,3 @@ export type Readable<T> = {
     [key in keyof T]: T[key];
 } & {};
 export type ValuesType<T> = T[keyof T];
-//# sourceMappingURL=types.d.ts.map

package/dist/utils/browsers.d.ts

@@ -1,2 +1 @@
 export declare const isSafari: () => boolean;
-//# sourceMappingURL=browsers.d.ts.map

package/dist/utils/browsers.js

@@ -1,4 +1,4 @@
-export var isSafari = function () {
+export const isSafari = () => {
     if (typeof navigator === 'undefined')
         return false;
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');

package/dist/utils/deprecationWarning.d.ts

@@ -1,2 +1 @@
 export declare const deprecationAndReplacementWarning: <P extends Record<string, unknown>[][]>(pairs: P, component: string) => void;
-//# sourceMappingURL=deprecationWarning.d.ts.map

package/dist/utils/deprecationWarning.js

@@ -1,12 +1,12 @@
-export var deprecationAndReplacementWarning = function (pairs, component) {
-    pairs.forEach(function (data) {
-        var _a = [
+export const deprecationAndReplacementWarning = (pairs, component) => {
+    pairs.forEach((data) => {
+        const [[oldName, oldValue], [newName, newValue]] = [
             Object.entries(data[0])[0],
             Object.entries(data[1])[0],
-        ], _b = _a[0], oldName = _b[0], oldValue = _b[1], _c = _a[1], newName = _c[0], newValue = _c[1];
+        ];
         if ((typeof oldValue !== 'undefined' && typeof newValue === 'undefined') ||
             (typeof oldValue !== 'undefined' && typeof newValue !== 'undefined')) {
-            console.warn("[Deprecation notice (".concat(component, ")]: prefer using prop ").concat(newName, " instead of ").concat(oldName));
+            console.warn(`[Deprecation notice (${component})]: prefer using prop ${newName} instead of ${oldName}`);
         }
     });
 };

package/dist/utils/getChannel.d.ts

@@ -19,4 +19,3 @@ type GetChannelParams<StreamChatGenerics extends DefaultStreamChatGenerics = Def
  */
 export declare const getChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel, client, id, members, options, type, }: GetChannelParams<StreamChatGenerics>) => Promise<Channel<StreamChatGenerics>>;
 export {};
-//# sourceMappingURL=getChannel.d.ts.map

package/dist/utils/getChannel.js

@@ -1,9 +1,8 @@
-import { __awaiter, __generator, __spreadArray } from "tslib";
 /**
  * prevent from duplicate invocation of channel.watch()
  * when events 'notification.message_new' and 'notification.added_to_channel' arrive at the same time
  */
-var WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL = {};
+const WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL = {};
 /**
  * Calls channel.watch() if it was not already recently called. Waits for watch promise to resolve even if it was invoked previously.
  * @param client
@@ -13,47 +12,37 @@ var WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL = {};
  * @param id
  * @param channel
  */
-export var getChannel = function (_a) {
-    var channel = _a.channel, client = _a.client, id = _a.id, members = _a.members, options = _a.options, type = _a.type;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var theChannel, originalCid, queryPromise;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    if (!channel && !type) {
-                        throw new Error('Channel or channel type have to be provided to query a channel.');
-                    }
-                    theChannel = channel || client.channel(type, id, { members: members });
-                    originalCid = (theChannel === null || theChannel === void 0 ? void 0 : theChannel.id)
-                        ? theChannel.cid
-                        : members && members.length
-                            ? generateChannelTempCid(theChannel.type, members)
-                            : undefined;
-                    if (!originalCid) {
-                        throw new Error('Channel ID or channel members array have to be provided to query a channel.');
-                    }
-                    queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
-                    if (!queryPromise) return [3 /*break*/, 2];
-                    return [4 /*yield*/, queryPromise];
-                case 1:
-                    _b.sent();
-                    return [3 /*break*/, 4];
-                case 2:
-                    WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid] = theChannel.watch(options);
-                    return [4 /*yield*/, WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid]];
-                case 3:
-                    _b.sent();
-                    delete WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
-                    _b.label = 4;
-                case 4: return [2 /*return*/, theChannel];
-            }
-        });
-    });
+export const getChannel = async ({ channel, client, id, members, options, type, }) => {
+    if (!channel && !type) {
+        throw new Error('Channel or channel type have to be provided to query a channel.');
+    }
+    // unfortunately typescript is not able to infer that if (!channel && !type) === false, then channel or type has to be truthy
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const theChannel = channel || client.channel(type, id, { members });
+    // need to keep as with call to channel.watch the id can be changed from undefined to an actual ID generated server-side
+    const originalCid = theChannel?.id
+        ? theChannel.cid
+        : members && members.length
+            ? generateChannelTempCid(theChannel.type, members)
+            : undefined;
+    if (!originalCid) {
+        throw new Error('Channel ID or channel members array have to be provided to query a channel.');
+    }
+    const queryPromise = WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
+    if (queryPromise) {
+        await queryPromise;
+    }
+    else {
+        WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid] = theChannel.watch(options);
+        await WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
+        delete WATCH_QUERY_IN_PROGRESS_FOR_CHANNEL[originalCid];
+    }
+    return theChannel;
 };
 // Channels created without ID need to be referenced by an identifier until the back-end generates the final ID.
-var generateChannelTempCid = function (channelType, members) {
+const generateChannelTempCid = (channelType, members) => {
     if (!members)
         return;
-    var membersStr = __spreadArray([], members, true).sort().join(',');
-    return "".concat(channelType, ":!members-").concat(membersStr);
+    const membersStr = [...members].sort().join(',');
+    return `${channelType}:!members-${membersStr}`;
 };

package/dist/utils/getWholeChar.d.ts

@@ -1,2 +1 @@
 export declare const getWholeChar: (str: string, i: number) => string;
-//# sourceMappingURL=getWholeChar.d.ts.map

package/dist/utils/getWholeChar.js

@@ -1,6 +1,6 @@
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
-export var getWholeChar = function (str, i) {
-    var code = str.charCodeAt(i);
+export const getWholeChar = (str, i) => {
+    const code = str.charCodeAt(i);
     if (Number.isNaN(code))
         return '';
     if (code < 0xd800 || code > 0xdfff)
@@ -9,7 +9,7 @@ export var getWholeChar = function (str, i) {
         if (str.length <= i + 1) {
             throw 'High surrogate without following low surrogate';
         }
-        var next = str.charCodeAt(i + 1);
+        const next = str.charCodeAt(i + 1);
         if (0xdc00 > next || next > 0xdfff) {
             throw 'High surrogate without following low surrogate';
         }
@@ -18,7 +18,7 @@ export var getWholeChar = function (str, i) {
     if (i === 0) {
         throw 'Low surrogate without preceding high surrogate';
     }
-    var prev = str.charCodeAt(i - 1);
+    const prev = str.charCodeAt(i - 1);
     if (0xd800 > prev || prev > 0xdbff) {
         throw 'Low surrogate without preceding high surrogate';
     }

package/dist/utils/index.d.ts

@@ -1,4 +1,2 @@
-export * from './generateRandomId';
 export * from './getChannel';
 export * from './getWholeChar';
-//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.js

@@ -1,3 +1,2 @@
-export * from './generateRandomId';
 export * from './getChannel';
 export * from './getWholeChar';

package/dist/utils/mergeDeep.d.ts

@@ -1,4 +1,3 @@
 import { UR } from 'stream-chat';
 export declare const mergeDeep: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
 export declare const mergeDeepUndefined: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
-//# sourceMappingURL=mergeDeep.d.ts.map

package/dist/utils/mergeDeep.js

@@ -1,5 +1,5 @@
 import mergeWith from 'lodash.mergewith';
-var overrideEverything = function (_, source) { return source; };
-export var mergeDeep = function (target, source) { return mergeWith(target, source, overrideEverything); };
-var overrideUndefinedOnly = function (object, source) { return object !== null && object !== void 0 ? object : source; };
-export var mergeDeepUndefined = function (target, source) { return mergeWith(target, source, overrideUndefinedOnly); };
+const overrideEverything = (_, source) => source;
+export const mergeDeep = (target, source) => mergeWith(target, source, overrideEverything);
+const overrideUndefinedOnly = (object, source) => object ?? source;
+export const mergeDeepUndefined = (target, source) => mergeWith(target, source, overrideUndefinedOnly);

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.22.0';
+export const version = '0.0.0-development';