stream-chat-react 13.8.1 → 13.10.0

package/dist/components/Channel/Channel.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { ChannelQueryOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
+import type { ChannelQueryOptions, DeleteMessageOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
 import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
@@ -19,7 +19,7 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
      */
     channelQueryOptions?: ChannelQueryOptions;
     /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-    doDeleteMessageRequest?: (message: LocalMessage) => Promise<MessageResponse>;
+    doDeleteMessageRequest?: (message: LocalMessage, options?: DeleteMessageOptions) => Promise<MessageResponse>;
     /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
     doMarkReadRequest?: (channel: StreamChannel, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse> | void;
     /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */

package/dist/components/Channel/Channel.js

@@ -500,16 +500,16 @@ const ChannelInner = (props) => {
         t,
         channelUnreadUiState,
     ]);
-    const deleteMessage = useCallback(async (message) => {
+    const deleteMessage = useCallback(async (message, options) => {
         if (!message?.id) {
             throw new Error('Cannot delete a message - missing message ID.');
         }
         let deletedMessage;
         if (doDeleteMessageRequest) {
-            deletedMessage = await doDeleteMessageRequest(message);
+            deletedMessage = await doDeleteMessageRequest(message, options);
         }
         else {
-            const result = await client.deleteMessage(message.id);
+            const result = await client.deleteMessage(message.id, options);
             deletedMessage = result.message;
         }
         return deletedMessage;

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -16,10 +16,12 @@ export const useCreateChannelStateContext = (value) => {
     channelCapabilitiesArray.forEach((capability) => {
         channelCapabilities[capability] = true;
     });
+    // FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
+    // of this serialization has been changed. A great example of memoization gone wrong.
     const memoizedMessageData = skipMessageDataMemoization
         ? messages
         : messages
-            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, updated_at, user, }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, type, updated_at, user, }) => `${type}${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
             ? updated_at.toISOString()
             : updated_at || ''}${user?.updated_at}`)
             .join();

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.d.ts

@@ -1,5 +1,6 @@
 import type { Channel, LocalMessage } from 'stream-chat';
 export declare enum MessageDeliveryStatus {
+    SENT = "sent",
     DELIVERED = "delivered",
     READ = "read"
 }

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -2,53 +2,70 @@ import { useCallback, useEffect, useState } from 'react';
 import { useChatContext } from '../../../context';
 export var MessageDeliveryStatus;
 (function (MessageDeliveryStatus) {
+    MessageDeliveryStatus["SENT"] = "sent";
     MessageDeliveryStatus["DELIVERED"] = "delivered";
     MessageDeliveryStatus["READ"] = "read";
 })(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
 export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
     const { client } = useChatContext();
     const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
-    const isOwnMessage = useCallback((message) => client.user && message?.user?.id === client.user.id, [client]);
+    const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
     useEffect(() => {
+        // empty channel
+        if (!lastMessage) {
+            setMessageDeliveryStatus(undefined);
+        }
         const lastMessageIsOwn = isOwnMessage(lastMessage);
         if (!lastMessage?.created_at || !lastMessageIsOwn)
             return;
-        const lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
-            ? new Date(lastMessage.created_at)
-            : lastMessage.created_at;
-        const channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(({ last_read: channelLastMarkedReadDate, user }) => {
-            const ignoreOwnReadStatus = client.user && user.id !== client.user.id;
-            return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
-        });
-        setMessageDeliveryStatus(channelReadByOthersAfterLastMessageUpdate
+        const msgRef = {
+            msgId: lastMessage.id,
+            timestampMs: lastMessage.created_at.getTime(),
+        };
+        const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+        const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
+        setMessageDeliveryStatus(readersForMessage.length > 1 ||
+            (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)
             ? MessageDeliveryStatus.READ
-            : MessageDeliveryStatus.DELIVERED);
-    }, [channel.state.read, client, isOwnMessage, lastMessage]);
+            : deliveredForMessage.length > 1 ||
+                (deliveredForMessage.length === 1 &&
+                    deliveredForMessage[0].id !== client.user?.id)
+                ? MessageDeliveryStatus.DELIVERED
+                : MessageDeliveryStatus.SENT);
+    }, [channel, client, isOwnMessage, lastMessage]);
     useEffect(() => {
         const handleMessageNew = (event) => {
             // the last message is not mine, so do not show the delivery status
             if (!isOwnMessage(event.message)) {
                 return setMessageDeliveryStatus(undefined);
             }
-            return setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
+            return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);
         };
         channel.on('message.new', handleMessageNew);
         return () => {
             channel.off('message.new', handleMessageNew);
         };
-    }, [channel, client, isOwnMessage]);
+    }, [channel, isOwnMessage]);
     useEffect(() => {
         if (!isOwnMessage(lastMessage))
             return;
+        const handleMessageDelivered = (event) => {
+            if (event.user?.id !== client.user?.id &&
+                lastMessage &&
+                lastMessage.id === event.last_delivered_message_id)
+                setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
+        };
         const handleMarkRead = (event) => {
             if (event.user?.id !== client.user?.id)
                 setMessageDeliveryStatus(MessageDeliveryStatus.READ);
         };
+        channel.on('message.delivered', handleMessageDelivered);
         channel.on('message.read', handleMarkRead);
         return () => {
+            channel.off('message.delivered', handleMessageDelivered);
             channel.off('message.read', handleMarkRead);
         };
-    }, [channel, client, lastMessage, isOwnMessage]);
+    }, [channel, client, isOwnMessage, lastMessage]);
     return {
         messageDeliveryStatus,
     };

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.8.1";
+        const version = "13.10.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Dialog/ButtonWithSubmenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ComponentProps, ComponentType } from 'react';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from './hooks';
 type ButtonWithSubmenu = ComponentProps<'button'> & {
     children: React.ReactNode;
-    placement: Placement;
+    placement: PopperLikePlacement;
     Submenu: ComponentType;
     submenuContainerProps?: ComponentProps<'div'>;
 };

package/dist/components/Dialog/ButtonWithSubmenu.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDialog, useDialogIsOpen } from './hooks';
+import { useDialogIsOpen, useDialogOnNearestManager } from './hooks';
 import { useDialogAnchor } from './DialogAnchor';
 export const ButtonWithSubmenu = ({ children, className, placement, Submenu, submenuContainerProps, ...buttonProps }) => {
     const buttonRef = useRef(null);
@@ -8,9 +8,9 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
     const keepSubmenuOpen = useRef(false);
     const dialogCloseTimeout = useRef(null);
     const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
-    const dialog = useDialog({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId);
-    const { attributes, setPopperElement, styles } = useDialogAnchor({
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+    const { setPopperElement, styles } = useDialogAnchor({
         open: dialogIsOpen,
         placement,
         referenceElement: buttonRef.current,
@@ -66,7 +66,7 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
                 keepSubmenuOpen.current = false;
                 closeDialogLazily();
             }, ref: buttonRef, role: 'option', ...buttonProps }, children),
-        dialogIsOpen && (React.createElement("div", { ...attributes.popper, onBlur: (event) => {
+        dialogIsOpen && (React.createElement("div", { onBlur: (event) => {
                 const isBlurredDescendant = event.relatedTarget instanceof Node &&
                     dialogContainer?.contains(event.relatedTarget);
                 if (isBlurredDescendant)
@@ -83,6 +83,6 @@ export const ButtonWithSubmenu = ({ children, className, placement, Submenu, sub
             }, ref: (element) => {
                 setPopperElement(element);
                 setDialogContainer(element);
-            }, style: styles.popper, tabIndex: -1, ...submenuContainerProps },
+            }, style: styles, tabIndex: -1, ...submenuContainerProps },
             React.createElement(Submenu, null)))));
 };

package/dist/components/Dialog/DialogAnchor.d.ts

@@ -1,26 +1,20 @@
-import type { Placement } from '@popperjs/core';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import type { PopperLikePlacement } from './hooks';
 export interface DialogAnchorOptions {
     open: boolean;
-    placement: Placement;
+    placement: PopperLikePlacement;
     referenceElement: HTMLElement | null;
     allowFlip?: boolean;
 }
 export declare function useDialogAnchor<T extends HTMLElement>({ allowFlip, open, placement, referenceElement, }: DialogAnchorOptions): {
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        } | undefined;
-    };
     setPopperElement: React.Dispatch<React.SetStateAction<T | null>>;
-    styles: {
-        [key: string]: React.CSSProperties;
-    };
+    styles: React.CSSProperties;
 };
 export type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
     id: string;
+    dialogManagerId?: string;
     focus?: boolean;
     trapFocus?: boolean;
 } & ComponentProps<'div'>;
-export declare const DialogAnchor: ({ allowFlip, children, className, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
+export declare const DialogAnchor: ({ allowFlip, children, className, dialogManagerId, focus, id, placement, referenceElement, tabIndex, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;

package/dist/components/Dialog/DialogAnchor.js

@@ -1,29 +1,22 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
-import { usePopper } from 'react-popper';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from './hooks';
+import { usePopoverPosition } from './hooks/usePopoverPosition';
 export function useDialogAnchor({ allowFlip, open, placement, referenceElement, }) {
     const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles, update } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            {
-                enabled: !!allowFlip, // Prevent flipping
-                name: 'flip',
-            },
-            {
-                name: 'eventListeners',
-                options: {
-                    // It's not safe to update popper position on resize and scroll, since popper's
-                    // reference element might not be visible at the time.
-                    resize: false,
-                    scroll: false,
-                },
-            },
-        ],
+    const { refs, strategy, update, x, y } = usePopoverPosition({
+        allowFlip,
+        freeze: true,
         placement,
     });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    useEffect(() => {
+        refs.setFloating(popperElement);
+    }, [popperElement, refs]);
     useEffect(() => {
         if (open && popperElement) {
             // Since the popper's reference element might not be (and usually is not) visible
@@ -31,20 +24,23 @@ export function useDialogAnchor({ allowFlip, open, placement, referenceElement,
             // update is non-null only if popperElement is non-null
             update?.();
         }
-    }, [open, popperElement, update]);
+    }, [open, placement, popperElement, update]);
     if (popperElement && !open) {
         setPopperElement(null);
     }
     return {
-        attributes,
         setPopperElement,
-        styles,
+        styles: {
+            left: x ?? 0,
+            position: strategy,
+            top: y ?? 0,
+        },
     };
 }
-export const DialogAnchor = ({ allowFlip = true, children, className, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
-    const dialog = useDialog({ id });
-    const open = useDialogIsOpen(id);
-    const { attributes, setPopperElement, styles } = useDialogAnchor({
+export const DialogAnchor = ({ allowFlip = true, children, className, dialogManagerId, focus = true, id, placement = 'auto', referenceElement = null, tabIndex, trapFocus, ...restDivProps }) => {
+    const dialog = useDialog({ dialogManagerId, id });
+    const open = useDialogIsOpen(id, dialogManagerId);
+    const { setPopperElement, styles } = useDialogAnchor({
         allowFlip,
         open,
         placement,
@@ -67,7 +63,7 @@ export const DialogAnchor = ({ allowFlip = true, children, className, focus = tr
     if (!open) {
         return null;
     }
-    return (React.createElement(DialogPortalEntry, { dialogId: id },
+    return (React.createElement(DialogPortalEntry, { dialogId: id, dialogManagerId: dialogManagerId },
         React.createElement(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true },
-            React.createElement("div", { ...restDivProps, ...attributes.popper, className: clsx('str-chat__dialog-contents', className), "data-testid": 'str-chat__dialog-contents', ref: setPopperElement, style: styles.popper, tabIndex: typeof tabIndex !== 'undefined' ? tabIndex : 0 }, children))));
+            React.createElement("div", { ...restDivProps, className: clsx('str-chat__dialog-contents', className), "data-testid": 'str-chat__dialog-contents', ref: setPopperElement, style: styles, tabIndex: typeof tabIndex !== 'undefined' ? tabIndex : 0 }, children))));
 };

package/dist/components/Dialog/DialogPortal.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export declare const DialogPortalDestination: () => React.JSX.Element | null;
 type DialogPortalEntryProps = {
     dialogId: string;
+    dialogManagerId?: string;
 };
-export declare const DialogPortalEntry: ({ children, dialogId, }: PropsWithChildren<DialogPortalEntryProps>) => React.JSX.Element;
+export declare const DialogPortalEntry: ({ children, dialogId, dialogManagerId, }: PropsWithChildren<DialogPortalEntryProps>) => React.JSX.Element;
 export {};

package/dist/components/Dialog/DialogPortal.js

@@ -1,19 +1,35 @@
 import React, { useCallback } from 'react';
 import { useDialogIsOpen, useOpenedDialogCount } from './hooks';
 import { Portal } from '../Portal/Portal';
-import { useDialogManager } from '../../context';
+import { useDialogManager, useNearestDialogManagerContext } from '../../context';
 export const DialogPortalDestination = () => {
-    const { dialogManager } = useDialogManager();
-    const openedDialogCount = useOpenedDialogCount();
+    const { dialogManager } = useNearestDialogManagerContext() ?? {};
+    const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+    // const [destinationRoot, setDestinationRoot] = useState<HTMLDivElement | null>(null);
+    // todo: allow to configure and then enable
+    // useEffect(() => {
+    //   if (!destinationRoot) return;
+    //   const handleClickOutside = (event: MouseEvent) => {
+    //     if (!destinationRoot?.contains(event.target as Node)) {
+    //       dialogManager?.closeAll();
+    //     }
+    //   };
+    //   document.addEventListener('click', handleClickOutside, { capture: true });
+    //   return () => {
+    //     document.removeEventListener('click', handleClickOutside, { capture: true });
+    //   };
+    // }, [destinationRoot, dialogManager]);
     if (!openedDialogCount)
         return null;
-    return (React.createElement("div", { className: 'str-chat__dialog-overlay', "data-str-chat__portal-id": dialogManager.id, "data-testid": 'str-chat__dialog-overlay', onClick: () => dialogManager.closeAll(), style: {
+    return (React.createElement("div", { className: 'str-chat__dialog-overlay', "data-str-chat__portal-id": dialogManager?.id, "data-testid": 'str-chat__dialog-overlay', onClick: () => dialogManager?.closeAll(), 
+        // ref={setDestinationRoot}
+        style: {
             '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',
         } }));
 };
-export const DialogPortalEntry = ({ children, dialogId, }) => {
-    const { dialogManager } = useDialogManager({ dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
+export const DialogPortalEntry = ({ children, dialogId, dialogManagerId, }) => {
+    const { dialogManager } = useDialogManager({ dialogId, dialogManagerId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
     const getPortalDestination = useCallback(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]);
     return (React.createElement(Portal, { getPortalDestination: getPortalDestination, isOpen: dialogIsOpen }, children));
 };

package/dist/components/Dialog/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useDialog';
+export type { PopperLikePlacement } from './usePopoverPosition';

package/dist/components/Dialog/hooks/useDialog.d.ts

@@ -3,6 +3,10 @@ export type UseDialogParams = GetOrCreateDialogParams & {
     dialogManagerId?: string;
 };
 export declare const useDialog: ({ dialogManagerId, id }: UseDialogParams) => import("../DialogManager").Dialog;
+export declare const useDialogOnNearestManager: ({ id }: Pick<UseDialogParams, 'id'>) => {
+    dialog: import("../DialogManager").Dialog;
+    dialogManager: import("../DialogManager").DialogManager | undefined;
+};
 export declare const modalDialogId: "modal-dialog";
 export declare const useModalDialog: () => import("../DialogManager").Dialog;
 export declare const useDialogIsOpen: (id: string, dialogManagerId?: string) => boolean;

package/dist/components/Dialog/hooks/useDialog.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { modalDialogManagerId, useDialogManager } from '../../../context';
+import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext, } from '../../../context';
 import { useStateStore } from '../../../store';
 export const useDialog = ({ dialogManagerId, id }) => {
     const { dialogManager } = useDialogManager({ dialogManagerId });
@@ -12,6 +12,14 @@ export const useDialog = ({ dialogManagerId, id }) => {
     }, [dialogManager, id]);
     return dialogManager.getOrCreate({ id });
 };
+export const useDialogOnNearestManager = ({ id }) => {
+    const { dialogManager } = useNearestDialogManagerContext() ?? {};
+    const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });
+    return {
+        dialog,
+        dialogManager,
+    };
+};
 export const modalDialogId = 'modal-dialog';
 export const useModalDialog = () => useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });
 export const useDialogIsOpen = (id, dialogManagerId) => {

package/dist/components/Dialog/hooks/usePopoverPosition.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { autoUpdate, type Placement } from '@floating-ui/react';
+export type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';
+type OffsetOpt = number | {
+    mainAxis?: number;
+    crossAxis?: number;
+    alignmentAxis?: number;
+} | [crossAxis: number, mainAxis: number];
+export type UsePopoverParams = {
+    placement?: PopperLikePlacement;
+    /** Add flip() when placement is not 'auto*' */
+    allowFlip?: boolean;
+    /** Keep in viewport; default true to match common popper setups */
+    allowShift?: boolean;
+    /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */
+    fitAvailableSpace?: boolean;
+    /** Offset (number, object, or [crossAxis, mainAxis] tuple) */
+    offset?: OffsetOpt;
+    /**
+     * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.
+     * If true → no autoUpdate (you can call `update()` manually).
+     */
+    freeze?: boolean;
+    /**
+     * Fine-grained control of autoUpdate triggers (only if freeze=false).
+     * Defaults match Popper's "disabled" example when all set to false.
+     */
+    autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;
+};
+export declare function usePopoverPosition({ allowFlip, allowShift, autoUpdateOptions, fitAvailableSpace, freeze, offset, placement, }: UsePopoverParams): {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    y: number;
+    x: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        y: number;
+        x: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+};
+export {};

package/dist/components/Dialog/hooks/usePopoverPosition.js

@@ -0,0 +1,54 @@
+import { autoPlacement, autoUpdate, flip as flipMw, offset as offsetMw, shift as shiftMw, size as sizeMw, useFloating, } from '@floating-ui/react';
+const hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;
+function autoMiddlewareFor(p) {
+    if (!String(p).startsWith('auto'))
+        return null;
+    const alignment = p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;
+    return autoPlacement({ alignment });
+}
+function toOffsetMw(opt) {
+    if (opt == null)
+        return null;
+    if (Array.isArray(opt)) {
+        const [crossAxis, mainAxis] = opt;
+        return offsetMw({ crossAxis, mainAxis });
+    }
+    if (typeof opt === 'number')
+        return offsetMw(opt);
+    return offsetMw(opt);
+}
+export function usePopoverPosition({ allowFlip = true, allowShift = true, autoUpdateOptions, fitAvailableSpace = false, freeze = false, offset, placement = 'bottom-start', }) {
+    const autoMw = autoMiddlewareFor(placement);
+    const offsetMiddleware = toOffsetMw(offset);
+    const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');
+    const middleware = [
+        // offset first (mirrors common Popper setups)
+        ...(offsetMiddleware ? [offsetMiddleware] : []),
+        // choose between autoPlacement (Popper's "auto*") OR flip()
+        // only allow flip when not explicitly 'left*' or 'right*'
+        ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),
+        // viewport collision adjustments
+        ...(allowShift ? [shiftMw({ padding: 8 })] : []),
+        // optional size constraining
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        ...(fitAvailableSpace ? [sizeMw({ apply: () => { } })] : []),
+    ];
+    // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one
+    const seedPlacement = String(placement).startsWith('auto')
+        ? 'bottom'
+        : placement;
+    return useFloating({
+        middleware,
+        placement: seedPlacement,
+        strategy: 'fixed',
+        whileElementsMounted: freeze
+            ? undefined
+            : (reference, floating, update) => autoUpdate(reference, floating, update, {
+                ancestorResize: true,
+                ancestorScroll: true,
+                animationFrame: false,
+                elementResize: hasResizeObserver,
+                ...autoUpdateOptions,
+            }),
+    });
+}

package/dist/components/Form/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from '../Dialog';
 type DropdownContextValue = {
     close(): void;
 };
@@ -8,7 +8,7 @@ export declare const useDropdownContext: () => DropdownContextValue;
 export type DropdownProps = PropsWithChildren<{
     className?: string;
     openButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
-    placement?: Placement;
+    placement?: PopperLikePlacement;
 }>;
 export declare const Dropdown: (props: DropdownProps) => React.JSX.Element;
 export {};

package/dist/components/Message/Message.js

@@ -116,5 +116,5 @@ export const Message = (props) => {
         notify: addNotification,
     });
     const highlighted = highlightedMessageId === message.id;
-    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, deliveredTo: props.deliveredTo, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

package/dist/components/Message/MessageRepliesCountButton.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useChannelStateContext } from '../../context';
 const UnMemoizedMessageRepliesCountButton = (props) => {
     const { labelPlural, labelSingle, onClick, reply_count = 0 } = props;
+    const { channelCapabilities } = useChannelStateContext();
     const { t } = useTranslationContext('MessageRepliesCountButton');
     if (!reply_count)
         return null;
@@ -13,6 +15,6 @@ const UnMemoizedMessageRepliesCountButton = (props) => {
         replyCountText = `1 ${labelSingle}`;
     }
     return (React.createElement("div", { className: 'str-chat__message-replies-count-button-wrapper' },
-        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick }, replyCountText)));
+        React.createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', disabled: !channelCapabilities['send-reply'], onClick: onClick }, replyCountText)));
 };
 export const MessageRepliesCountButton = React.memo(UnMemoizedMessageRepliesCountButton);

package/dist/components/Message/MessageStatus.d.ts

@@ -6,6 +6,7 @@ export type MessageStatusProps = {
     MessageDeliveredStatus?: React.ComponentType;
     MessageReadStatus?: React.ComponentType;
     MessageSendingStatus?: React.ComponentType;
+    MessageSentStatus?: React.ComponentType;
     messageType?: string;
     tooltipUserNameMapper?: TooltipUsernameMapper;
 };