stream-chat-react 12.13.1 → 13.0.0-rc.1

package/dist/types/types.d.ts

@@ -1,57 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
-import type { APIErrorResponse, Attachment, ErrorFromResponse, Event, ExtendableGenerics, LiteralStringForUnion, Mute, ChannelState as StreamChannelState } from 'stream-chat';
+import type { Attachment, ChannelState as StreamChannelState } from 'stream-chat';
 export type UnknownType = Record<string, unknown>;
 export type PropsWithChildrenOnly = PropsWithChildren<Record<never, never>>;
-export type CustomTrigger = {
-    [key: string]: {
-        componentProps: UnknownType;
-        data: UnknownType;
-    };
-};
 export type CustomMessageType = 'channel.intro' | 'message.date';
-export type DefaultAttachmentType = UnknownType & {
-    asset_url?: string;
-    file_size?: number;
-    id?: string;
-    images?: Array<{
-        image_url?: string;
-        thumb_url?: string;
-    }>;
-};
-export type DefaultChannelType = UnknownType & {
-    frozen?: boolean;
-    image?: string;
-    member_count?: number;
-    subtitle?: string;
-};
-export type DefaultMessageType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & {
-    customType?: CustomMessageType;
-    date?: string | Date;
-    error?: ErrorFromResponse<APIErrorResponse>;
-    errorStatusCode?: number;
-    event?: Event<StreamChatGenerics>;
-    unread?: boolean;
-};
-export type DefaultUserTypeInternal = {
-    image?: string;
-    status?: string;
-};
-export type DefaultUserType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UnknownType & DefaultUserTypeInternal & {
-    mutes?: Array<Mute<StreamChatGenerics>>;
-};
-export type DefaultStreamChatGenerics = ExtendableGenerics & {
-    attachmentType: DefaultAttachmentType;
-    channelType: DefaultChannelType;
-    commandType: LiteralStringForUnion;
-    eventType: UnknownType;
-    memberType: UnknownType;
-    messageType: DefaultMessageType;
-    pollOptionType: UnknownType;
-    pollType: UnknownType;
-    reactionType: UnknownType;
-    userType: DefaultUserType;
-};
 export type GiphyVersions = 'original' | 'fixed_height' | 'fixed_height_still' | 'fixed_height_downsampled' | 'fixed_width' | 'fixed_width_still' | 'fixed_width_downsampled';
 export type PaginatorProps = {
     /** callback to load the next page */
@@ -91,19 +43,7 @@ export type VideoAttachmentConfiguration = ImageAttachmentConfiguration & {
 };
 export type ImageAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement) => ImageAttachmentConfiguration;
 export type VideoAttachmentSizeHandler = (attachment: Attachment, element: HTMLElement, shouldGenerateVideoThumbnail: boolean) => VideoAttachmentConfiguration;
-export type ChannelUnreadUiState<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<ValuesType<StreamChannelState<StreamChatGenerics>['read']>, 'user'>;
-export type SendMessageOptions = {
-    force_moderation?: boolean;
-    is_pending_message?: boolean;
-    keep_channel_hidden?: boolean;
-    pending?: boolean;
-    pending_message_metadata?: Record<string, string>;
-    skip_enrich_url?: boolean;
-    skip_push?: boolean;
-};
-export type UpdateMessageOptions = {
-    skip_enrich_url?: boolean;
-};
+export type ChannelUnreadUiState = Omit<ValuesType<StreamChannelState['read']>, 'user'>;
 export type Readable<T> = {
     [key in keyof T]: T[key];
 } & {};

package/dist/utils/getChannel.d.ts

@@ -1,11 +1,10 @@
 import type { Channel, ChannelQueryOptions, StreamChat } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../types/types';
-type GetChannelParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    client: StreamChat<StreamChatGenerics>;
-    channel?: Channel<StreamChatGenerics>;
+type GetChannelParams = {
+    client: StreamChat;
+    channel?: Channel;
     id?: string;
     members?: string[];
-    options?: ChannelQueryOptions<StreamChatGenerics>;
+    options?: ChannelQueryOptions;
     type?: string;
 };
 /**
@@ -17,5 +16,5 @@ type GetChannelParams<StreamChatGenerics extends DefaultStreamChatGenerics = Def
  * @param id
  * @param channel
  */
-export declare const getChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel, client, id, members, options, type, }: GetChannelParams<StreamChatGenerics>) => Promise<Channel<StreamChatGenerics>>;
+export declare const getChannel: ({ channel, client, id, members, options, type, }: GetChannelParams) => Promise<Channel>;
 export {};

package/dist/utils/mergeDeep.d.ts

@@ -1,3 +1,2 @@
-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;
+export declare const mergeDeep: <TObject, TSource>(target: TObject, source: TSource) => TObject & TSource;
+export declare const mergeDeepUndefined: <TObject, TSource>(target: TObject, source: TSource) => TObject & TSource;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "12.13.1",
+  "version": "13.0.0-rc.1",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -145,7 +145,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
-    "stream-chat": "^8.55.0"
+    "stream-chat": "^9.0.0-rc.13"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -185,9 +185,8 @@
     "@ladle/react": "^0.16.0",
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/exec": "^7.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/stream-chat-css": "^5.7.2",
+    "@stream-io/stream-chat-css": "^5.9.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -220,7 +219,6 @@
     "dotenv": "^8.6.0",
     "emoji-mart": "^5.5.2",
     "esbuild": "^0.23.1",
-    "esbuild-plugin-replace": "^1.4.0",
     "eslint": "^9.16.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",
@@ -237,11 +235,11 @@
     "jsdom": "^24.1.1",
     "lint-staged": "^15.2.1",
     "moment-timezone": "^0.5.43",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^8.55.0",
+    "stream-chat": "^9.0.0-rc.13",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"
@@ -255,14 +253,14 @@
     "lint-fix": "yarn prettier-fix && yarn eslint-fix",
     "eslint": "eslint --max-warnings 0",
     "eslint-fix": "eslint --fix",
-    "prettier": "prettier 'src/**/*.{js,ts,jsx,tsx,md,json}' .prettierrc babel.config.js eslint.config.mjs",
+    "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
     "start": "tsc --watch --sourceMap --declarationMap",
     "prepare": "husky install",
     "preversion": "yarn install",
     "test": "jest",
-    "types": "tsc --noEmit --skipLibCheck false",
+    "types": "tsc --noEmit",
     "validate-translations": "node scripts/validate-translations.js",
     "validate-cjs": "concurrently 'node scripts/validate-cjs-node-bundle.cjs' 'node scripts/validate-cjs-browser-bundle.cjs'",
     "semantic-release": "semantic-release",
@@ -270,8 +268,7 @@
     "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"
+    "prepack": "yarn build"
   },
   "resolutions": {
     "ast-types": "^0.14.0",

package/dist/components/AutoCompleteTextarea/Item.d.ts

@@ -1,2 +0,0 @@
-export const Item: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';

package/dist/components/AutoCompleteTextarea/Item.js

@@ -1,10 +0,0 @@
-import React, { useCallback } from 'react';
-import clsx from 'clsx';
-export const Item = React.forwardRef(function Item(props, innerRef) {
-    const { className, component: Component, item, onClickHandler, onSelectHandler, selected, style, } = props;
-    const handleSelect = useCallback(() => onSelectHandler(item), [item, onSelectHandler]);
-    const handleClick = useCallback((event) => onClickHandler(event, item), [item, onClickHandler]);
-    return (React.createElement("li", { className: clsx(className, { 'str-chat__suggestion-item--selected': selected }), style: style },
-        React.createElement("a", { href: '', onClick: handleClick, onFocus: handleSelect, onMouseEnter: handleSelect, ref: innerRef },
-            React.createElement(Component, { entity: item, selected: selected }))));
-});

package/dist/components/AutoCompleteTextarea/List.d.ts

@@ -1,17 +0,0 @@
-export function List({ className, component, currentTrigger, dropdownScroll, getSelectedItem, getTextToReplace, itemClassName, itemStyle, onSelect, selectionEnd, style, SuggestionItem: PropSuggestionItem, value: propValue, values, }: {
-    className: any;
-    component: any;
-    currentTrigger: any;
-    dropdownScroll: any;
-    getSelectedItem: any;
-    getTextToReplace: any;
-    itemClassName: any;
-    itemStyle: any;
-    onSelect: any;
-    selectionEnd: any;
-    style: any;
-    SuggestionItem: any;
-    value: any;
-    values: any;
-}): React.JSX.Element;
-import React from 'react';

package/dist/components/AutoCompleteTextarea/List.js

@@ -1,89 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import clsx from 'clsx';
-import { useComponentContext } from '../../context/ComponentContext';
-import { Item } from './Item';
-import { escapeRegExp } from '../Message/renderText';
-export const List = ({ className, component, currentTrigger, dropdownScroll, getSelectedItem, getTextToReplace, itemClassName, itemStyle, onSelect, selectionEnd, style, SuggestionItem: PropSuggestionItem, value: propValue, values, }) => {
-    const { AutocompleteSuggestionItem } = useComponentContext('SuggestionList');
-    const SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item;
-    const [selectedItemIndex, setSelectedItemIndex] = useState(undefined);
-    const itemsRef = [];
-    const isSelected = (item) => selectedItemIndex === values.findIndex((value) => getId(value) === getId(item));
-    const getId = (item) => {
-        const textToReplace = getTextToReplace(item);
-        if (textToReplace.key) {
-            return textToReplace.key;
-        }
-        if (typeof item === 'string' || !item.key) {
-            return textToReplace.text;
-        }
-        return item.key;
-    };
-    const findItemIndex = useCallback((item) => values.findIndex((value) => value.id ? value.id === item.id : value.name === item.name), [values]);
-    const modifyText = (value) => {
-        if (!value)
-            return;
-        onSelect(getTextToReplace(value));
-        if (getSelectedItem)
-            getSelectedItem(value);
-    };
-    const handleClick = useCallback((e, item) => {
-        e?.preventDefault();
-        const index = findItemIndex(item);
-        modifyText(values[index]);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [modifyText, findItemIndex]);
-    const selectItem = useCallback((item) => {
-        const index = findItemIndex(item);
-        setSelectedItemIndex(index);
-    }, [findItemIndex]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === 'ArrowUp') {
-            setSelectedItemIndex((prevSelected) => {
-                if (prevSelected === undefined)
-                    return 0;
-                const newIndex = prevSelected === 0 ? values.length - 1 : prevSelected - 1;
-                dropdownScroll(itemsRef[newIndex]);
-                return newIndex;
-            });
-        }
-        if (event.key === 'ArrowDown') {
-            setSelectedItemIndex((prevSelected) => {
-                if (prevSelected === undefined)
-                    return 0;
-                const newIndex = prevSelected === values.length - 1 ? 0 : prevSelected + 1;
-                dropdownScroll(itemsRef[newIndex]);
-                return newIndex;
-            });
-        }
-        if ((event.key === 'Enter' || event.key === 'Tab') &&
-            selectedItemIndex !== undefined) {
-            handleClick(event, values[selectedItemIndex]);
-        }
-        return null;
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedItemIndex, values]);
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown, false);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [handleKeyDown]);
-    useEffect(() => {
-        if (values?.length)
-            selectItem(values[0]);
-    }, [values]); // eslint-disable-line
-    const restructureItem = useCallback((item) => {
-        const matched = item.name || item.id;
-        const textBeforeCursor = propValue.slice(0, selectionEnd);
-        const triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
-        const editedPropValue = escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
-        const parts = matched.split(new RegExp(`(${editedPropValue})`, 'gi'));
-        const itemNameParts = { match: editedPropValue, parts };
-        return { ...item, itemNameParts };
-    }, [propValue, selectionEnd, currentTrigger]);
-    const restructuredValues = useMemo(() => values.map(restructureItem), [values, restructureItem]);
-    return (React.createElement("ul", { className: clsx('str-chat__suggestion-list', className), style: style }, restructuredValues.map((item, i) => (React.createElement(SuggestionItem, { className: itemClassName, component: component, item: item, key: getId(item), onClickHandler: handleClick, onSelectHandler: selectItem, ref: (ref) => {
-            itemsRef[i] = ref;
-        }, selected: isSelected(item), style: itemStyle, value: propValue })))));
-};

package/dist/components/AutoCompleteTextarea/Textarea.d.ts

@@ -1,114 +0,0 @@
-export class ReactTextareaAutocomplete extends React.Component<any, any, any> {
-    static defaultProps: {
-        closeOnClickOutside: boolean;
-        maxRows: number;
-        minChar: number;
-        movePopupAsYouType: boolean;
-        scrollToItem: boolean;
-        value: string;
-    };
-    /**
-     * setup to emulate the UNSAFE_componentWillReceiveProps
-     */
-    static getDerivedStateFromProps(props: any, state: any): {
-        propsValue: any;
-        value: any;
-    } | null;
-    constructor(props: any);
-    state: {
-        actualToken: string;
-        component: null;
-        currentTrigger: null;
-        data: null;
-        dataLoading: boolean;
-        isComposing: boolean;
-        left: null;
-        selectionEnd: number;
-        selectionStart: number;
-        top: null;
-        value: any;
-    };
-    getSelectionPosition: () => {
-        selectionEnd: number;
-        selectionStart: number;
-    } | null;
-    getSelectedText: () => any;
-    setCaretPosition: (position?: number) => void;
-    getCaretPosition: () => number;
-    /**
-     * isComposing prevents double submissions in Korean and other languages.
-     * starting point for a read:
-     * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
-     * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
-     * @param event React.KeyboardEvent
-     */
-    _defaultShouldSubmit: (event: any) => boolean;
-    _handleKeyDown: (event: any) => void | Promise<void>;
-    _onEnter: (event: any) => Promise<void>;
-    _onSpace: () => void;
-    _replaceWord: () => Promise<void>;
-    _onSelect: (newToken: any) => void;
-    _getItemOnSelect: (paramTrigger: any) => ((item: any) => any) | null;
-    _getTextToReplace: (paramTrigger: any) => ((item: any) => any) | null;
-    _getCurrentTriggerSettings: (paramTrigger: any) => any;
-    _getValuesFromProvider: () => void;
-    _getSuggestions: (paramTrigger: any) => null;
-    /**
-     * Close autocomplete, also clean up trigger (to avoid slow promises)
-     */
-    _closeAutocomplete: () => void;
-    _cleanUpProps: () => {
-        [x: string]: any;
-    };
-    _isCommand: (text: any) => boolean;
-    _changeHandler: (e: any) => void;
-    _selectHandler: (e: any) => void;
-    _onClickAndBlurHandler: (e: any) => void;
-    _onScrollHandler: () => void;
-    _dropdownScroll: (item: any) => void;
-    getTriggerProps: () => {
-        component: null;
-        currentTrigger: null;
-        getSelectedItem: ((item: any) => any) | null;
-        getTextToReplace: ((item: any) => any) | null;
-        selectionEnd: number;
-        value: any;
-        values: null;
-    };
-    setDropdownRef: (element: any) => void;
-    dropdownRef: any;
-    renderSuggestionListContainer(): React.JSX.Element | null;
-    render(): React.JSX.Element;
-    textareaRef: HTMLTextAreaElement | null | undefined;
-}
-export namespace ReactTextareaAutocomplete {
-    namespace propTypes {
-        export let className: PropTypes.Requireable<string>;
-        export let closeOnClickOutside: PropTypes.Requireable<boolean>;
-        export let containerClassName: PropTypes.Requireable<string>;
-        export let containerStyle: PropTypes.Requireable<object>;
-        export let disableMentions: PropTypes.Requireable<boolean>;
-        export let dropdownClassName: PropTypes.Requireable<string>;
-        export let dropdownStyle: PropTypes.Requireable<object>;
-        export let itemClassName: PropTypes.Requireable<string>;
-        export let itemStyle: PropTypes.Requireable<object>;
-        export let listClassName: PropTypes.Requireable<string>;
-        export let listStyle: PropTypes.Requireable<object>;
-        export let loaderClassName: PropTypes.Requireable<string>;
-        export let loaderStyle: PropTypes.Requireable<object>;
-        export let loadingComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export let minChar: PropTypes.Requireable<number>;
-        export let onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onCaretPositionChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export let onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        export let shouldSubmit: PropTypes.Requireable<(...args: any[]) => any>;
-        export let style: PropTypes.Requireable<object>;
-        export let SuggestionList: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { triggerPropsCheck as trigger };
-        export let value: PropTypes.Requireable<string>;
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';
-import { triggerPropsCheck } from './utils';