stream-chat-react 13.9.0 → 13.10.0

package/dist/components/MessageInput/AttachmentSelector.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
 import { Modal as DefaultModal } from '../Modal';
 import { ShareLocationDialog as DefaultLocationDialog } from '../Location';
@@ -16,6 +16,7 @@ import clsx from 'clsx';
 import { useMessageComposer } from './hooks';
 export const SimpleAttachmentSelector = () => {
     const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
+    const { channelCapabilities } = useChannelStateContext();
     const inputRef = useRef(null);
     const [labelElement, setLabelElement] = useState(null);
     const id = useStableId();
@@ -33,6 +34,8 @@ export const SimpleAttachmentSelector = () => {
             labelElement.removeEventListener('keyup', handleKeyUp);
         };
     }, [labelElement]);
+    if (!channelCapabilities['upload-file'])
+        return null;
     return (React.createElement("div", { className: 'str-chat__file-input-container', "data-testid": 'file-upload-button' },
         React.createElement(UploadFileInput, { id: id, ref: inputRef }),
         React.createElement("label", { className: 'str-chat__file-input-label', htmlFor: id, ref: setLabelElement, tabIndex: 0 }, AttachmentSelectorInitiationButtonContents ? (React.createElement(AttachmentSelectorInitiationButtonContents, null)) : (React.createElement(FileUploadIcon, null)))));
@@ -119,8 +122,10 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
     const messageComposer = useMessageComposer();
     const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);
     const menuDialogId = `attachment-actions-menu${messageComposer.threadId ? '-thread' : ''}`;
-    const menuDialog = useDialog({ id: menuDialogId });
-    const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
+    const { dialog: menuDialog, dialogManager } = useDialogOnNearestManager({
+        id: menuDialogId,
+    });
+    const menuDialogIsOpen = useDialogIsOpen(menuDialogId, dialogManager?.id);
     const [modalContentAction, setModalContentActionAction] = useState();
     const openModal = useCallback((actionType) => {
         const action = actions.find((a) => a.type === actionType);
@@ -143,7 +148,7 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
             channelCapabilities['upload-file'] && React.createElement(UploadFileInput, { ref: setFileInput }),
             React.createElement("button", { "aria-expanded": menuDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Attachment Selector'), className: 'str-chat__attachment-selector__menu-button', "data-testid": 'invoke-attachment-selector-button', onClick: () => menuDialog?.toggle(), ref: menuButtonRef },
                 React.createElement(AttachmentSelectorMenuInitButtonIcon, null)),
-            React.createElement(DialogAnchor, { id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
+            React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
                 React.createElement("div", { className: 'str-chat__attachment-selector-actions-menu str-chat__dialog-menu', "data-testid": 'attachment-selector-actions-menu' }, actions.map(({ ActionButton, type }) => (React.createElement(ActionButton, { closeMenu: menuDialog.close, key: `attachment-selector-item-${type}`, openModalForAction: openModal }))))),
             React.createElement(Portal, { getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination, isOpen: modalIsOpen },
                 React.createElement(Modal, { className: clsx({

package/dist/components/MessageList/hooks/useLastDeliveredData.js

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 export const useLastDeliveredData = (props) => {
     const { channel, messages, returnAllReadData } = props;
-    return useMemo(() => returnAllReadData
+    const calculate = useCallback(() => returnAllReadData
         ? messages.reduce((acc, msg) => {
             acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({
                 msgId: msg.id,
@@ -10,4 +10,7 @@ export const useLastDeliveredData = (props) => {
             return acc;
         }, {})
         : channel.messageReceiptsTracker.groupUsersByLastDeliveredMessage(), [channel, messages, returnAllReadData]);
+    const [deliveredTo, setDeliveredTo] = useState(calculate);
+    useEffect(() => channel.on('message.delivered', () => setDeliveredTo(calculate)).unsubscribe, [channel, calculate]);
+    return deliveredTo;
 };

package/dist/components/Modal/GlobalModal.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { CloseIconRound } from './icons';
-import { useTranslationContext } from '../../context';
+import { modalDialogManagerId, useTranslationContext } from '../../context';
 import { DialogPortalEntry, modalDialogId, useModalDialog, useModalDialogIsOpen, } from '../Dialog';
 export const GlobalModal = ({ children, className, onClose, onCloseAttempt, open, }) => {
     const { t } = useTranslationContext('Modal');
@@ -48,7 +48,7 @@ export const GlobalModal = ({ children, className, onClose, onCloseAttempt, open
     }, [dialog, open]);
     if (!open || !isOpen)
         return null;
-    return (React.createElement(DialogPortalEntry, { dialogId: modalDialogId },
+    return (React.createElement(DialogPortalEntry, { dialogId: modalDialogId, dialogManagerId: modalDialogManagerId },
         React.createElement("div", { className: clsx('str-chat str-chat__modal str-chat-react__modal str-chat__modal--open', className), onClick: handleClick },
             React.createElement(FocusScope, { autoFocus: true, contain: true },
                 React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeButtonRef, title: t('Close'), type: 'button' },

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 /**
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
@@ -13,10 +13,10 @@ export const ReactionSelectorWithButton = ({ ReactionIcon, }) => {
     const buttonRef = useRef(null);
     const dialogIdNamespace = threadList ? '-thread-' : '';
     const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
-    const dialog = useDialog({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId);
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DialogAnchor, { id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
+        React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
             React.createElement(ReactionSelector, null)),
         React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: 'str-chat__message-reactions-button', "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
             React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' }))));

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
-import type { PopperProps } from 'react-popper';
+import type { PopperLikePlacement } from '../Dialog';
 export declare const Tooltip: ({ children, ...rest }: ComponentProps<'div'>) => React.JSX.Element;
 export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{
     /** Reference element to which the tooltip should attach to */
@@ -8,7 +8,7 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
     /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
     offset?: [number, number];
     /** Popper's placement property defining default position of the tooltip, default 'top' */
-    placement?: PopperProps<unknown>['placement'];
+    placement?: PopperLikePlacement;
     /** Tells component whether to render its contents */
     visible?: boolean;
 }>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,20 +1,19 @@
-import React, { useState } from 'react';
-import { usePopper } from 'react-popper';
+import React, { useEffect, useState } from 'react';
+import { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';
 export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
 export const PopperTooltip = ({ children, offset = [0, 10], placement = 'top', referenceElement, visible = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset,
-                },
-            },
-        ],
+    const { placement: resolvedPlacement, refs, strategy, x, y, } = usePopoverPosition({
+        offset,
         placement,
     });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    useEffect(() => {
+        refs.setFloating(popperElement);
+    }, [popperElement, refs]);
     if (!visible)
         return null;
-    return (React.createElement("div", { className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper, ...attributes.popper }, children));
+    return (React.createElement("div", { className: 'str-chat__tooltip', "data-placement": resolvedPlacement, ref: setPopperElement, style: { left: x ?? 0, position: strategy, top: y ?? 0 } }, children));
 };

package/dist/context/DialogManagerContext.d.ts

@@ -25,4 +25,5 @@ export declare const useDialogManager: ({ dialogId, dialogManagerId, }?: UseDial
 export declare const modalDialogManagerId: "modal-dialog-manager";
 export declare const ModalDialogManagerProvider: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;
 export declare const useModalDialogManager: () => DialogManager | undefined;
+export declare const useNearestDialogManagerContext: () => DialogManagerProviderContextValue | undefined;
 export {};

package/dist/context/DialogManagerContext.js

@@ -121,3 +121,4 @@ export const useDialogManager = ({ dialogId, dialogManagerId, } = {}) => {
 export const modalDialogManagerId = 'modal-dialog-manager';
 export const ModalDialogManagerProvider = ({ children }) => (React.createElement(DialogManagerProvider, { id: modalDialogManagerId }, children));
 export const useModalDialogManager = () => useMemo(() => getDialogManager(modalDialogManagerId), []);
+export const useNearestDialogManagerContext = () => useContext(DialogManagerProviderContext);