stream-chat-react 13.14.2 → 14.0.0-beta.1

package/dist/components/Dialog/FormDialog.js

@@ -1,76 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import clsx from 'clsx';
-import { FieldError } from '../Form/FieldError';
-import { useTranslationContext } from '../../context';
-export const FormDialog = ({ className, close, fields, onSubmit, shouldDisableSubmitButton, title, }) => {
-    const { t } = useTranslationContext();
-    const [fieldErrors, setFieldErrors] = useState({});
-    const [value, setValue] = useState(() => {
-        let acc = {};
-        for (const [id, config] of Object.entries(fields)) {
-            acc = { ...acc, [id]: config.props.value };
-        }
-        return acc;
-    });
-    const handleChange = useCallback((event) => {
-        const fieldId = event.target.id;
-        const fieldConfig = fields[fieldId];
-        if (!fieldConfig)
-            return;
-        const error = fieldConfig.validator?.(event.target.value);
-        if (error) {
-            setFieldErrors((prev) => ({ [fieldId]: error, ...prev }));
-        }
-        else {
-            setFieldErrors((prev) => {
-                delete prev[fieldId];
-                return prev;
-            });
-        }
-        setValue((prev) => ({ ...prev, [fieldId]: event.target.value }));
-        if (!fieldConfig.props.onChange)
-            return;
-        if (fieldConfig.element === 'input') {
-            fieldConfig.props.onChange(event);
-        }
-        else if (fieldConfig.element === 'textarea') {
-            fieldConfig.props.onChange(event);
-        }
-    }, [fields]);
-    const handleSubmit = async () => {
-        if (!Object.keys(value).length)
-            return;
-        const errors = {};
-        for (const [id, fieldValue] of Object.entries(value)) {
-            const thisFieldError = fields[id].validator?.(fieldValue);
-            if (thisFieldError) {
-                errors[id] = thisFieldError;
-            }
-        }
-        if (Object.keys(errors).length) {
-            setFieldErrors(errors);
-            return;
-        }
-        await onSubmit(value);
-        close();
-    };
-    return (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--form', className) },
-        React.createElement("div", { className: 'str-chat__dialog__body' },
-            title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
-            React.createElement("form", { autoComplete: 'off', onSubmit: (e) => {
-                    e.preventDefault();
-                    handleSubmit();
-                } },
-                Object.entries(fields).map(([id, fieldConfig]) => (React.createElement("div", { className: 'str-chat__dialog__field', key: `dialog-field-${id}` },
-                    fieldConfig.label && (React.createElement("label", { className: clsx(`str-chat__dialog__title str-chat__dialog__title--${id}`), htmlFor: id }, fieldConfig.label)),
-                    React.createElement(fieldConfig.element, {
-                        id,
-                        ...fieldConfig.props,
-                        onChange: handleChange,
-                        value: value[id],
-                    }),
-                    React.createElement(FieldError, { text: fieldErrors[id]?.message })))),
-                React.createElement("div", { className: 'str-chat__dialog__controls' },
-                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close, type: 'button' }, t('Cancel')),
-                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value), type: 'submit' }, t('Send')))))));
-};

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

@@ -1,9 +0,0 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
-export type ConfirmationDialogProps = {
-    actions: ComponentProps<'button'>[];
-    prompt: string;
-    className?: string;
-    title?: string;
-};
-export declare const PromptDialog: ({ actions, className, prompt, title, }: ConfirmationDialogProps) => React.JSX.Element;

package/dist/components/Dialog/PromptDialog.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-export const PromptDialog = ({ actions, className, prompt, title, }) => (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--prompt', className) },
-    React.createElement("div", { className: 'str-chat__dialog__body' },
-        title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
-        React.createElement("div", { className: 'str-chat__dialog__prompt' }, prompt)),
-    React.createElement("div", { className: 'str-chat__dialog__controls' }, actions.map(({ className, ...props }, i) => (React.createElement("button", { className: clsx(`str-chat__dialog__controls-button`, className), key: `prompt-dialog__controls-button--${i}`, ...props }))))));

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

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

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

@@ -1 +0,0 @@
-export * from './useDialog';

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

@@ -1,16 +0,0 @@
-import type { GetOrCreateDialogParams } from '../DialogManager';
-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;
-export declare const useModalDialogIsOpen: () => boolean;
-export declare const useOpenedDialogCount: ({ dialogManagerId, }?: {
-    dialogManagerId?: string;
-}) => number;

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

@@ -1,41 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext, } from '../../../context';
-import { useStateStore } from '../../../store';
-export const useDialog = ({ dialogManagerId, id }) => {
-    const { dialogManager } = useDialogManager({ dialogManagerId });
-    useEffect(() => () => {
-        // Since this cleanup can run even if the component is still mounted
-        // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
-        // mark state as unused and only remove it after a timeout, rather than
-        // to remove it immediately.
-        dialogManager.markForRemoval(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) => {
-    const { dialogManager } = useDialogManager({ dialogManagerId });
-    const dialogIsOpenSelector = useCallback(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
-    return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
-};
-export const useModalDialogIsOpen = () => useDialogIsOpen(modalDialogId, modalDialogManagerId);
-const openedDialogCountSelector = (nextValue) => ({
-    openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
-        if (dialog.isOpen)
-            return count + 1;
-        return count;
-    }, 0),
-});
-export const useOpenedDialogCount = ({ dialogManagerId, } = {}) => {
-    const { dialogManager } = useDialogManager({ dialogManagerId });
-    return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
-};

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

@@ -1,68 +0,0 @@
-/// <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

@@ -1,54 +0,0 @@
-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/Dialog/index.d.ts

@@ -1,5 +0,0 @@
-export * from './ButtonWithSubmenu';
-export * from './DialogAnchor';
-export * from './DialogManager';
-export * from './DialogPortal';
-export * from './hooks';

package/dist/components/Dialog/index.js

@@ -1,5 +0,0 @@
-export * from './ButtonWithSubmenu';
-export * from './DialogAnchor';
-export * from './DialogManager';
-export * from './DialogPortal';
-export * from './hooks';

package/dist/components/DragAndDrop/DragAndDropContainer.d.ts

@@ -1,8 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export type DragAndDropContainerProps = PropsWithChildren<{
-    className?: string;
-    draggable?: boolean;
-    onSetNewOrder?: (newOrder: number[]) => void;
-}>;
-export declare const DragAndDropContainer: ({ children, className, draggable, onSetNewOrder, }: DragAndDropContainerProps) => React.JSX.Element;

package/dist/components/DragAndDrop/DragAndDropContainer.js

@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-export const DragAndDropContainer = ({ children, className, draggable, onSetNewOrder, }) => {
-    const [order, setOrder] = useState([]);
-    const [dragStartIndex, setDragStartIndex] = useState(null);
-    const [dragOverIndex, setDragOverIndex] = useState(null);
-    const [container, setContainer] = useState(null);
-    const moveDirection = dragStartIndex === null || dragOverIndex === null
-        ? undefined
-        : dragStartIndex <= dragOverIndex
-            ? 'down'
-            : 'up';
-    const childrenArray = React.Children.toArray(children);
-    useEffect(() => {
-        setOrder(React.Children.map(children, (_, index) => index) || []);
-    }, [children]);
-    useEffect(() => {
-        if (!container)
-            return;
-        const handleDragStart = (e) => {
-            const target = e.target;
-            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
-            if (e.dataTransfer) {
-                e.dataTransfer.effectAllowed = 'move';
-            }
-            if (draggableItem instanceof HTMLElement) {
-                const index = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
-                setDragStartIndex(index);
-                e.dataTransfer?.setData('text/plain', index.toString());
-                draggableItem.style.opacity = '0.3';
-            }
-        };
-        const handleDragOver = (e) => {
-            e.preventDefault();
-            const target = e.target;
-            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
-            if (draggableItem instanceof HTMLElement) {
-                const index = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
-                setDragOverIndex(index);
-            }
-        };
-        const handleDragLeave = () => {
-            setDragOverIndex(null);
-        };
-        const handleDrop = (e) => {
-            e.preventDefault();
-            const draggedIndex = parseInt(e.dataTransfer?.getData('text/plain') || '-1', 10);
-            const target = e.target;
-            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
-            if (draggableItem instanceof HTMLElement) {
-                const dropIndex = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
-                if (draggedIndex !== -1 && draggedIndex !== dropIndex) {
-                    setOrder((prevOrder) => {
-                        const newOrder = [...prevOrder];
-                        const [removed] = newOrder.splice(draggedIndex, 1);
-                        newOrder.splice(dropIndex, 0, removed);
-                        onSetNewOrder?.(newOrder);
-                        return newOrder;
-                    });
-                }
-            }
-            setDragStartIndex(null);
-            setDragOverIndex(null);
-        };
-        const handleDragEnd = (e) => {
-            const target = e.target;
-            if (target instanceof HTMLElement) {
-                target.style.opacity = '';
-            }
-            setDragStartIndex(null);
-            setDragOverIndex(null);
-        };
-        container.addEventListener('dragstart', handleDragStart);
-        container.addEventListener('dragover', handleDragOver);
-        container.addEventListener('dragleave', handleDragLeave);
-        container.addEventListener('drop', handleDrop);
-        container.addEventListener('dragend', handleDragEnd);
-        return () => {
-            container.removeEventListener('dragstart', handleDragStart);
-            container.removeEventListener('dragover', handleDragOver);
-            container.removeEventListener('dragleave', handleDragLeave);
-            container.removeEventListener('drop', handleDrop);
-            container.removeEventListener('dragend', handleDragEnd);
-        };
-    }, [container, onSetNewOrder]);
-    return (React.createElement("div", { className: clsx('str-chat__drag-and-drop-container', className), ref: setContainer }, order.map((originalIndex, currentIndex) => {
-        const child = childrenArray[originalIndex];
-        return (React.createElement("div", { className: clsx('str-chat__drag-and-drop-container__item', {
-                'str-chat__drag-and-drop-container__item--dragged-over-from-bottom': moveDirection === 'up' && dragOverIndex === currentIndex,
-                'str-chat__drag-and-drop-container__item--dragged-over-from-top': moveDirection === 'down' && dragOverIndex === currentIndex,
-            }), draggable: draggable, key: React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}` }, child));
-    })));
-};

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export type EmptyStateIndicatorProps = {
-    /** List Type: channel | message */
-    listType?: 'channel' | 'message' | 'thread';
-};
-export declare const EmptyStateIndicator: (props: EmptyStateIndicatorProps) => React.JSX.Element | null;

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { ChatBubble } from './icons';
-const UnMemoizedEmptyStateIndicator = (props) => {
-    const { listType } = props;
-    const { t } = useTranslationContext('EmptyStateIndicator');
-    if (listType === 'thread')
-        return null;
-    if (listType === 'channel') {
-        const text = t('You have no channels currently');
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: 'str-chat__channel-list-empty' },
-                React.createElement(ChatBubble, null),
-                React.createElement("p", { role: 'listitem' }, text))));
-    }
-    if (listType === 'message') {
-        const text = t('No chats here yet…');
-        return (React.createElement("div", { className: 'str-chat__empty-channel' },
-            React.createElement(ChatBubble, null),
-            React.createElement("p", { className: 'str-chat__empty-channel-text', role: 'listitem' }, text)));
-    }
-    return React.createElement("p", null, "No items exist");
-};
-export const EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);

package/dist/components/EmptyStateIndicator/icons.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ChatBubble: () => React.JSX.Element;

package/dist/components/EmptyStateIndicator/icons.js

@@ -1,3 +0,0 @@
-import React from 'react';
-export const ChatBubble = () => (React.createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' })));

package/dist/components/EmptyStateIndicator/index.d.ts

@@ -1 +0,0 @@
-export * from './EmptyStateIndicator';

package/dist/components/EmptyStateIndicator/index.js

@@ -1 +0,0 @@
-export * from './EmptyStateIndicator';

package/dist/components/EventComponent/EventComponent.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { Event, LocalMessage } from 'stream-chat';
-import type { AvatarProps } from '../Avatar';
-import type { TimestampFormatterOptions } from '../../i18n/types';
-export type EventComponentProps = TimestampFormatterOptions & {
-    /** Message object */
-    message: LocalMessage & {
-        event?: Event;
-    };
-    unsafeHTML?: boolean;
-    /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
-    Avatar?: React.ComponentType<AvatarProps>;
-};
-export declare const EventComponent: (props: EventComponentProps) => React.JSX.Element | null;

package/dist/components/EventComponent/EventComponent.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { getDateString } from '../../i18n/utils';
-/**
- * Component to display system and channel event messages
- */
-const UnMemoizedEventComponent = (props) => {
-    const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message, unsafeHTML = false, } = props;
-    const { t, tDateTimeParser } = useTranslationContext('EventComponent');
-    const { created_at = '', event, type } = message;
-    const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
-    if (type === 'system')
-        return (React.createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
-            React.createElement("div", { className: 'str-chat__message--system__text' },
-                React.createElement("div", { className: 'str-chat__message--system__line' }),
-                unsafeHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html || '' }, "data-unsafe-inner-html": true })) : (React.createElement("p", null, message.text)),
-                React.createElement("div", { className: 'str-chat__message--system__line' })),
-            React.createElement("div", { className: 'str-chat__message--system__date' },
-                React.createElement("strong", null, getDateString({
-                    ...getDateOptions,
-                    calendar,
-                    calendarFormats,
-                    format,
-                    t,
-                    timestampTranslationKey: 'timestamp/SystemMessage',
-                })))));
-    if (event?.type === 'member.removed' || event?.type === 'member.added') {
-        const name = event.user?.name || event.user?.id;
-        const sentence = `${name} ${event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat'}`;
-        return (React.createElement("div", { className: 'str-chat__event-component__channel-event' },
-            React.createElement(Avatar, { image: event.user?.image, name: name, user: event.user }),
-            React.createElement("div", { className: 'str-chat__event-component__channel-event__content' },
-                React.createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
-                React.createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString({ ...getDateOptions, format: 'LT' })))));
-    }
-    return null;
-};
-export const EventComponent = React.memo(UnMemoizedEventComponent);

package/dist/components/EventComponent/index.d.ts

@@ -1 +0,0 @@
-export * from './EventComponent';

package/dist/components/EventComponent/index.js

@@ -1 +0,0 @@
-export * from './EventComponent';

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

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

package/dist/components/Form/Dropdown.js

@@ -1,49 +0,0 @@
-import { useRef } from 'react';
-import { useEffect } from 'react';
-import React, { useState } from 'react';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
-import { DialogManagerProvider, useTranslationContext } from '../../context';
-const DropdownContext = React.createContext({
-    close: () => null,
-});
-const DropdownContextProvider = ({ children, ...props }) => (React.createElement(DropdownContext.Provider, { value: props }, children));
-export const useDropdownContext = () => React.useContext(DropdownContext);
-export const Dropdown = (props) => {
-    const dropdownDialogId = `dropdown`;
-    return (React.createElement("div", { className: 'str-chat__dropdown' },
-        React.createElement(DialogManagerProvider, { id: dropdownDialogId },
-            React.createElement(DropdownInner, { ...props, dialogId: dropdownDialogId }))));
-};
-const DropdownInner = ({ children, dialogId, openButtonProps, placement = 'bottom', }) => {
-    const { t } = useTranslationContext();
-    const [openButton, setOpenButton] = useState(null);
-    const [dropdownWidth, setDropdownWidth] = useState('');
-    const dropdownRef = useRef(null);
-    const dialog = useDialog({ id: dialogId });
-    const dropdownDialogIsOpen = useDialogIsOpen(dialogId);
-    useEffect(() => {
-        if (!openButton || typeof ResizeObserver === 'undefined')
-            return;
-        let timeout;
-        const observer = new ResizeObserver(([button]) => {
-            if (timeout)
-                clearTimeout(timeout);
-            timeout = setTimeout(() => {
-                const width = button.target.getBoundingClientRect().width + 'px';
-                if (!dropdownRef.current) {
-                    setDropdownWidth(width);
-                    return;
-                }
-                dropdownRef.current.style.width = width;
-            }, 100);
-        });
-        observer.observe(openButton);
-        return () => {
-            observer.disconnect();
-        };
-    }, [openButton]);
-    return (React.createElement(DropdownContextProvider, { close: dialog.close },
-        React.createElement("button", { "aria-expanded": dropdownDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Menu'), className: 'str-chat__dropdown__open-button', "data-testid": 'dropdown-open-button', ...openButtonProps, onClick: () => dialog?.toggle(), ref: setOpenButton }),
-        React.createElement(DialogAnchor, { allowFlip: false, id: dialogId, placement: placement, referenceElement: openButton, tabIndex: -1, trapFocus: true },
-            React.createElement("div", { className: 'str-chat__dropdown__items', ref: dropdownRef, style: { width: dropdownWidth } }, children))));
-};

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

@@ -1,7 +0,0 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
-type FieldErrorProps = ComponentProps<'div'> & {
-    text?: string;
-};
-export declare const FieldError: ({ className, text, ...props }: FieldErrorProps) => React.JSX.Element;
-export {};

package/dist/components/Form/FieldError.js

@@ -1,3 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-export const FieldError = ({ className, text, ...props }) => (React.createElement("div", { ...props, className: clsx('str-chat__form-field-error', className) }, text));

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

@@ -1,8 +0,0 @@
-import type { ComponentProps, PropsWithChildren } from 'react';
-import React from 'react';
-export type SwitchFieldProps = PropsWithChildren<ComponentProps<'input'>>;
-export declare const SwitchField: ({ children, ...props }: SwitchFieldProps) => React.JSX.Element;
-export type SimpleSwitchFieldProps = ComponentProps<'input'> & {
-    labelText: string;
-};
-export declare const SimpleSwitchField: ({ labelText, ...props }: SimpleSwitchFieldProps) => React.JSX.Element;

package/dist/components/Form/SwitchField.js

@@ -1,23 +0,0 @@
-import clsx from 'clsx';
-import React, { useRef } from 'react';
-export const SwitchField = ({ children, ...props }) => {
-    const inputRef = useRef(null);
-    const handleKeyUp = (event) => {
-        if (![' ', 'Enter'].includes(event.key) || !inputRef.current)
-            return;
-        event.preventDefault();
-        inputRef.current.click();
-    };
-    return (React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__switch-field', {
-            'str-chat__form__field str-chat__form__switch-field--disabled': props.disabled,
-        }) },
-        React.createElement("label", null,
-            React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field-content' }, children),
-            React.createElement("input", { type: 'checkbox', ...props, ref: inputRef }),
-            React.createElement("div", { className: clsx('str-chat__form__switch-field__switch', {
-                    'str-chat__form__switch-field__switch--on': props.checked,
-                }), onKeyUp: handleKeyUp, tabIndex: 0 },
-                React.createElement("div", { className: 'str-chat__form__switch-field__switch-handle' })))));
-};
-export const SimpleSwitchField = ({ labelText, ...props }) => (React.createElement(SwitchField, { ...props },
-    React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field__text' }, labelText)));

package/dist/components/Gallery/BaseImage.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export type BaseImageProps = React.ComponentPropsWithRef<'img'>;
-export declare const BaseImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;