stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/Chat/hooks/useSplitActionSet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitActionSet.mjs","names":[],"sources":["../../../../../src/components/Chat/hooks/useSplitActionSet.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport const useSplitActionSet = <\n  T extends\n    | { placement: 'quick' }\n    | { placement: 'dropdown' }\n    | { placement: 'quick-dropdown-toggle' },\n>(\n  actionSet: T[],\n) =>\n  useMemo(() => {\n    const quickActionSet: Extract<T, { placement: 'quick' }>[] = [];\n    const dropdownActionSet: Extract<T, { placement: 'dropdown' }>[] = [];\n    let quickDropdownToggleAction:\n      | Extract<T, { placement: 'quick-dropdown-toggle' }>\n      | undefined;\n\n    for (const action of actionSet) {\n      if (action.placement === 'quick')\n        quickActionSet.push(action as (typeof quickActionSet)[number]);\n      if (action.placement === 'dropdown')\n        dropdownActionSet.push(action as (typeof dropdownActionSet)[number]);\n      if (action.placement === 'quick-dropdown-toggle') {\n        quickDropdownToggleAction ??= action as Extract<\n          T,\n          { placement: 'quick-dropdown-toggle' }\n        >;\n      }\n    }\n\n    return { dropdownActionSet, quickActionSet, quickDropdownToggleAction } as const;\n  }, [actionSet]);\n"],"mappings":";;AAEA,IAAa,qBAMX,cAEA,cAAc;CACZ,MAAM,iBAAuD,CAAC;CAC9D,MAAM,oBAA6D,CAAC;CACpE,IAAI;CAIJ,KAAK,MAAM,UAAU,WAAW;EAC9B,IAAI,OAAO,cAAc,SACvB,eAAe,KAAK,MAAyC;EAC/D,IAAI,OAAO,cAAc,YACvB,kBAAkB,KAAK,MAA4C;EACrE,IAAI,OAAO,cAAc,yBACvB,8BAAA,4BAA8B;CAKlC;CAEA,OAAO;EAAE;EAAmB;EAAgB;CAA0B;AACxE,GAAG,CAAC,SAAS,CAAC"}

package/dist/es/components/ChatView/ChatView.a11y.utility.mjs

@@ -0,0 +1,13 @@
+//#region src/components/ChatView/ChatView.a11y.utility.ts
+var DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE = { chatViewPanelIds: {
+	channels: "str-chat__chat-view-panel-channels",
+	threads: "str-chat__chat-view-panel-threads"
+} };
+var createChatViewA11yContextValue = (chatViewId) => ({ chatViewPanelIds: {
+	channels: `str-chat__chat-view-${chatViewId}-panel-channels`,
+	threads: `str-chat__chat-view-${chatViewId}-panel-threads`
+} });
+//#endregion
+export { DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE, createChatViewA11yContextValue };
+
+//# sourceMappingURL=ChatView.a11y.utility.mjs.map

package/dist/es/components/ChatView/ChatView.a11y.utility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.a11y.utility.mjs","names":[],"sources":["../../../../src/components/ChatView/ChatView.a11y.utility.ts"],"sourcesContent":["/**\n * ChatView is a top-level view switcher between two parallel, independent\n * surfaces (channels and threads). It is NOT a WAI-ARIA Tabs widget: each view\n * owns its own composer and message list and is not a panel of a single\n * composite widget. The selector is a navigation landmark (role=\"navigation\")\n * whose buttons mark the active surface via aria-current=\"true\" (generic\n * \"current item\"; not \"page\", since the SDK may be embedded in a larger host UI).\n *\n * The helper generates stable per-instance DOM ids for the view containers so\n * integrators (skip-links, programmatic focus) have predictable hooks even\n * when multiple ChatViews coexist.\n */\nexport type ChatViewA11yContextValue = {\n  chatViewPanelIds: Record<'channels' | 'threads', string>;\n};\n\nexport const DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE: ChatViewA11yContextValue = {\n  chatViewPanelIds: {\n    channels: 'str-chat__chat-view-panel-channels',\n    threads: 'str-chat__chat-view-panel-threads',\n  },\n};\n\nexport const createChatViewA11yContextValue = (\n  chatViewId: string,\n): ChatViewA11yContextValue => ({\n  chatViewPanelIds: {\n    channels: `str-chat__chat-view-${chatViewId}-panel-channels`,\n    threads: `str-chat__chat-view-${chatViewId}-panel-threads`,\n  },\n});\n"],"mappings":";AAgBA,IAAa,uCAAiE,EAC5E,kBAAkB;CAChB,UAAU;CACV,SAAS;AACX,EACF;AAEA,IAAa,kCACX,gBAC8B,EAC9B,kBAAkB;CAChB,UAAU,uBAAuB,WAAW;CAC5C,SAAS,uBAAuB,WAAW;AAC7C,EACF"}

package/dist/es/components/ChatView/ChatView.mjs

@@ -0,0 +1,224 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { Button } from "../Button/Button.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { ThreadProvider } from "../Threads/ThreadContext.mjs";
+import { UnreadCountBadge } from "../Threads/UnreadCountBadge.mjs";
+import { DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE, createChatViewA11yContextValue } from "./ChatView.a11y.utility.mjs";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/ChatView/ChatView.tsx
+var ChatViewContext = createContext(void 0);
+var ChatViewA11yContext = createContext(DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE);
+var useChatViewContext = () => {
+	const value = useContext(ChatViewContext);
+	if (!value) {
+		console.warn("The useChatViewContext hook was called outside of the ChatView provider.");
+		return {};
+	}
+	return value;
+};
+var useChatViewA11yContext = () => useContext(ChatViewA11yContext);
+var ChatView = ({ children }) => {
+	const [activeChatView, setActiveChatView] = useState("channels");
+	const chatViewId = useStableId();
+	const { theme } = useChatContext();
+	const a11yValue = useMemo(() => createChatViewA11yContextValue(chatViewId), [chatViewId]);
+	const value = useMemo(() => ({
+		activeChatView,
+		setActiveChatView
+	}), [activeChatView]);
+	return /* @__PURE__ */ jsx(ChatViewA11yContext.Provider, {
+		value: a11yValue,
+		children: /* @__PURE__ */ jsx(ChatViewContext.Provider, {
+			value,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("str-chat", theme, "str-chat__chat-view"),
+				children
+			})
+		})
+	});
+};
+var ChannelsView = ({ children }) => {
+	const { activeChatView } = useChatViewContext();
+	const { chatViewPanelIds } = useChatViewA11yContext();
+	if (!(activeChatView === "channels")) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__chat-view__channels",
+		id: chatViewPanelIds.channels,
+		children
+	});
+};
+var ThreadsViewContext = createContext({
+	activeThread: void 0,
+	setActiveThread: () => void 0
+});
+var useThreadsViewContext = () => useContext(ThreadsViewContext);
+var ThreadsView = ({ children }) => {
+	const { activeChatView } = useChatViewContext();
+	const { chatViewPanelIds } = useChatViewA11yContext();
+	const [activeThread, setActiveThread] = useState(void 0);
+	const value = useMemo(() => ({
+		activeThread,
+		setActiveThread
+	}), [activeThread]);
+	if (!(activeChatView === "threads")) return null;
+	return /* @__PURE__ */ jsx(ThreadsViewContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__chat-view__threads",
+			id: chatViewPanelIds.threads,
+			children
+		})
+	});
+};
+var useActiveThread = ({ activeThread }) => {
+	useEffect(() => {
+		if (!activeThread) return;
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible" && document.hasFocus()) activeThread.activate();
+			if (document.visibilityState === "hidden" || !document.hasFocus()) activeThread.deactivate();
+		};
+		handleVisibilityChange();
+		window.addEventListener("focus", handleVisibilityChange);
+		window.addEventListener("blur", handleVisibilityChange);
+		return () => {
+			activeThread.deactivate();
+			window.removeEventListener("blur", handleVisibilityChange);
+			window.removeEventListener("focus", handleVisibilityChange);
+		};
+	}, [activeThread]);
+};
+/**
+* // this setup still works
+* const MyCustomComponent = () => {
+*  const [activeThread, setActiveThread] = useState();
+*
+*  return <>
+*    // simplified
+*    <ThreadList onItemPointerDown={setActiveThread} />
+*    <ThreadProvider thread={activeThread}>
+*      <Thread />
+*    </ThreadProvider>
+*  </>
+* }
+*
+*/
+var ThreadAdapter = ({ children }) => {
+	const { client } = useChatContext("ThreadAdapter");
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator } = useComponentContext("ThreadAdapter");
+	const { activeThread } = useThreadsViewContext();
+	const { t } = useTranslationContext("ThreadAdapter");
+	const { isLoading, ready } = useStateStore(client.threads.state, threadAdapterSelector) ?? {
+		isLoading: false,
+		ready: false
+	};
+	useActiveThread({ activeThread });
+	if (!activeThread && ready && !isLoading && EmptyStateIndicator$1) return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-container str-chat__thread",
+		children: /* @__PURE__ */ jsx(EmptyStateIndicator$1, {
+			listType: "message",
+			messageText: t("Select a thread to continue the conversation")
+		})
+	});
+	return /* @__PURE__ */ jsx(ThreadProvider, {
+		thread: activeThread,
+		children
+	});
+};
+var ChatViewSelectorButton = ({ ActiveIcon, children, className, Icon, iconOnly = true, isActive, text, ...props }) => {
+	const SelectorIcon = isActive && ActiveIcon ? ActiveIcon : Icon;
+	const shouldShowTooltip = !!text && iconOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__chat-view__selector-button-container",
+		children: [/* @__PURE__ */ jsxs(Button, {
+			appearance: "ghost",
+			"aria-current": isActive || void 0,
+			"aria-label": props["aria-label"] ?? (shouldShowTooltip ? text : void 0),
+			className: clsx("str-chat__chat-view__selector-button", className),
+			variant: "secondary",
+			...props,
+			children: [children ?? (SelectorIcon && /* @__PURE__ */ jsx(SelectorIcon, {})), !iconOnly && text && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__chat-view__selector-button-text",
+				children: text
+			})]
+		}), shouldShowTooltip && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "str-chat__chat-view__selector-button-tooltip str-chat__tooltip",
+			children: text
+		})]
+	});
+};
+var threadAdapterSelector = ({ pagination, ready }) => ({
+	isLoading: pagination.isLoading,
+	ready
+});
+var unreadThreadCountSelector = ({ unreadThreadCount }) => ({ unreadThreadCount });
+var ChatViewChannelsSelectorButton = ({ iconOnly = true }) => {
+	const { activeChatView, setActiveChatView } = useChatViewContext();
+	const { t } = useTranslationContext();
+	const { IconMessageBubble, IconMessageBubbleFill } = useComponentContextIcons();
+	const isActive = activeChatView === "channels";
+	return /* @__PURE__ */ jsx(ChatViewSelectorButton, {
+		ActiveIcon: IconMessageBubbleFill,
+		"aria-label": t("aria/Open channels view"),
+		Icon: IconMessageBubble,
+		iconOnly,
+		isActive,
+		onClick: () => setActiveChatView("channels"),
+		onPointerDown: () => setActiveChatView("channels"),
+		text: t("Channels")
+	});
+};
+var ChatViewThreadsSelectorButton = ({ iconOnly = true }) => {
+	const { client } = useChatContext();
+	const { unreadThreadCount } = useStateStore(client.threads.state, unreadThreadCountSelector) ?? { unreadThreadCount: 0 };
+	const { activeChatView, setActiveChatView } = useChatViewContext();
+	const { t } = useTranslationContext();
+	const { IconThread, IconThreadFill } = useComponentContextIcons();
+	const isActive = activeChatView === "threads";
+	return /* @__PURE__ */ jsx(ChatViewSelectorButton, {
+		ActiveIcon: IconThreadFill,
+		"aria-label": unreadThreadCount > 0 ? t("aria/Open threads view with unread threads", { count: unreadThreadCount }) : t("aria/Open threads view"),
+		Icon: IconThread,
+		iconOnly,
+		isActive,
+		onClick: () => setActiveChatView("threads"),
+		onPointerDown: () => setActiveChatView("threads"),
+		text: t("Threads"),
+		children: /* @__PURE__ */ jsx(UnreadCountBadge, {
+			count: unreadThreadCount,
+			position: "top-right",
+			children: isActive ? /* @__PURE__ */ jsx(IconThreadFill, {}) : /* @__PURE__ */ jsx(IconThread, {})
+		})
+	});
+};
+var defaultChatViewSelectorItemSet = [{
+	Component: ChatViewChannelsSelectorButton,
+	type: "channels"
+}, {
+	Component: ChatViewThreadsSelectorButton,
+	type: "threads"
+}];
+var ChatViewSelector = ({ iconOnly = true, itemSet = defaultChatViewSelectorItemSet }) => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t("aria/Chat view controls"),
+		className: "str-chat__chat-view__selector",
+		role: "navigation",
+		children: itemSet.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, { iconOnly }, type))
+	});
+};
+ChatView.Channels = ChannelsView;
+ChatView.Threads = ThreadsView;
+ChatView.ThreadAdapter = ThreadAdapter;
+ChatView.Selector = ChatViewSelector;
+//#endregion
+export { ChatView, ChatViewChannelsSelectorButton, ChatViewContext, ChatViewSelectorButton, ChatViewThreadsSelectorButton, defaultChatViewSelectorItemSet, useActiveThread, useChatViewContext, useThreadsViewContext };
+
+//# sourceMappingURL=ChatView.mjs.map

package/dist/es/components/ChatView/ChatView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.mjs","names":[],"sources":["../../../../src/components/ChatView/ChatView.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentType,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nimport { Button, type ButtonProps } from '../Button';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { ThreadProvider } from '../Threads';\nimport { UnreadCountBadge } from '../Threads/UnreadCountBadge';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\nimport {\n  type ChatViewA11yContextValue,\n  createChatViewA11yContextValue,\n  DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE,\n} from './ChatView.a11y.utility';\n\nimport type { PropsWithChildren } from 'react';\nimport type { Thread, ThreadManagerState } from 'stream-chat';\n\nexport type ChatView = 'channels' | 'threads';\n\n/**\n * ChatView switches between two independent surfaces, not panels in a single\n * WAI-ARIA Tabs widget. The selector is a navigation landmark\n * (`role=\"navigation\"`) holding one button per surface; the button for the\n * surface currently shown is marked with `aria-current=\"true\"` (the \"current\n * item in a set\" — not `\"page\"`, since this SDK view may be embedded in a larger\n * host UI that owns the page). View wrappers stay plain `<div>`s to avoid leaking\n * ancestor context into descendants like the composer textarea.\n */\ntype ChatViewContextValue = {\n  activeChatView: ChatView;\n  setActiveChatView: (cv: ChatView) => void;\n};\n\nexport const ChatViewContext = createContext<ChatViewContextValue | undefined>(undefined);\nconst ChatViewA11yContext = createContext<ChatViewA11yContextValue>(\n  DEFAULT_CHAT_VIEW_A11Y_CONTEXT_VALUE,\n);\n\nexport const useChatViewContext = () => {\n  const value = useContext(ChatViewContext);\n\n  if (!value) {\n    console.warn(\n      'The useChatViewContext hook was called outside of the ChatView provider.',\n    );\n    return {} as ChatViewContextValue;\n  }\n\n  return value;\n};\nconst useChatViewA11yContext = () => useContext(ChatViewA11yContext);\n\nexport const ChatView = ({ children }: PropsWithChildren) => {\n  const [activeChatView, setActiveChatView] = useState<ChatView>('channels');\n  const chatViewId = useStableId();\n\n  const { theme } = useChatContext();\n\n  const a11yValue = useMemo(\n    () => createChatViewA11yContextValue(chatViewId),\n    [chatViewId],\n  );\n\n  const value = useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);\n\n  return (\n    <ChatViewA11yContext.Provider value={a11yValue}>\n      <ChatViewContext.Provider value={value}>\n        <div className={clsx('str-chat', theme, 'str-chat__chat-view')}>{children}</div>\n      </ChatViewContext.Provider>\n    </ChatViewA11yContext.Provider>\n  );\n};\n\nconst ChannelsView = ({ children }: PropsWithChildren) => {\n  const { activeChatView } = useChatViewContext();\n  const { chatViewPanelIds } = useChatViewA11yContext();\n  const isActive = activeChatView === 'channels';\n\n  if (!isActive) return null;\n\n  return (\n    <div className='str-chat__chat-view__channels' id={chatViewPanelIds.channels}>\n      {children}\n    </div>\n  );\n};\n\nexport type ThreadsViewContextValue = {\n  activeThread: Thread | undefined;\n  setActiveThread: (cv: ThreadsViewContextValue['activeThread']) => void;\n};\n\nconst ThreadsViewContext = createContext<ThreadsViewContextValue>({\n  activeThread: undefined,\n  setActiveThread: () => undefined,\n});\n\nexport const useThreadsViewContext = () => useContext(ThreadsViewContext);\n\nconst ThreadsView = ({ children }: PropsWithChildren) => {\n  const { activeChatView } = useChatViewContext();\n  const { chatViewPanelIds } = useChatViewA11yContext();\n  const [activeThread, setActiveThread] =\n    useState<ThreadsViewContextValue['activeThread']>(undefined);\n\n  const value = useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);\n  const isActive = activeChatView === 'threads';\n\n  if (!isActive) return null;\n\n  return (\n    <ThreadsViewContext.Provider value={value}>\n      <div className='str-chat__chat-view__threads' id={chatViewPanelIds.threads}>\n        {children}\n      </div>\n    </ThreadsViewContext.Provider>\n  );\n};\n\n// thread business logic that's impossible to keep within client but encapsulated for ease of use\nexport const useActiveThread = ({ activeThread }: { activeThread?: Thread }) => {\n  useEffect(() => {\n    if (!activeThread) return;\n\n    const handleVisibilityChange = () => {\n      if (document.visibilityState === 'visible' && document.hasFocus()) {\n        activeThread.activate();\n      }\n      if (document.visibilityState === 'hidden' || !document.hasFocus()) {\n        activeThread.deactivate();\n      }\n    };\n\n    handleVisibilityChange();\n\n    window.addEventListener('focus', handleVisibilityChange);\n    window.addEventListener('blur', handleVisibilityChange);\n    return () => {\n      activeThread.deactivate();\n      window.removeEventListener('blur', handleVisibilityChange);\n      window.removeEventListener('focus', handleVisibilityChange);\n    };\n  }, [activeThread]);\n};\n\n// ThreadList under View.Threads context, will access setting function and on item click will set activeThread\n// which can be accessed for the ease of use by ThreadAdapter which forwards it to required ThreadProvider\n// ThreadList can easily live without this context and click handler can be overriden, ThreadAdapter is then no longer needed\n/**\n * // this setup still works\n * const MyCustomComponent = () => {\n *  const [activeThread, setActiveThread] = useState();\n *\n *  return <>\n *    // simplified\n *    <ThreadList onItemPointerDown={setActiveThread} />\n *    <ThreadProvider thread={activeThread}>\n *      <Thread />\n *    </ThreadProvider>\n *  </>\n * }\n *\n */\nconst ThreadAdapter = ({ children }: PropsWithChildren) => {\n  const { client } = useChatContext('ThreadAdapter');\n  const { EmptyStateIndicator = DefaultEmptyStateIndicator } =\n    useComponentContext('ThreadAdapter');\n  const { activeThread } = useThreadsViewContext();\n  const { t } = useTranslationContext('ThreadAdapter');\n  const { isLoading, ready } = useStateStore(\n    client.threads.state,\n    threadAdapterSelector,\n  ) ?? {\n    isLoading: false,\n    ready: false,\n  };\n\n  useActiveThread({ activeThread });\n\n  if (!activeThread && ready && !isLoading && EmptyStateIndicator) {\n    return (\n      <div className='str-chat__thread-container str-chat__thread'>\n        <EmptyStateIndicator\n          listType='message'\n          messageText={t('Select a thread to continue the conversation')}\n        />\n      </div>\n    );\n  }\n\n  return <ThreadProvider thread={activeThread}>{children}</ThreadProvider>;\n};\n\nexport const ChatViewSelectorButton = ({\n  ActiveIcon,\n  children,\n  className,\n  Icon,\n  iconOnly = true,\n  isActive,\n  text,\n  ...props\n}: ButtonProps & {\n  ActiveIcon?: ComponentType;\n  iconOnly?: boolean;\n  Icon?: ComponentType;\n  isActive?: boolean;\n  text?: string;\n}) => {\n  const SelectorIcon = isActive && ActiveIcon ? ActiveIcon : Icon;\n  const shouldShowTooltip = !!text && iconOnly;\n\n  return (\n    <div className='str-chat__chat-view__selector-button-container'>\n      <Button\n        appearance='ghost'\n        aria-current={isActive || undefined}\n        aria-label={props['aria-label'] ?? (shouldShowTooltip ? text : undefined)}\n        className={clsx('str-chat__chat-view__selector-button', className)}\n        variant='secondary'\n        {...props}\n      >\n        {children ?? (SelectorIcon && <SelectorIcon />)}\n        {!iconOnly && text && (\n          <div className='str-chat__chat-view__selector-button-text'>{text}</div>\n        )}\n      </Button>\n      {shouldShowTooltip && (\n        <div\n          aria-hidden='true'\n          className='str-chat__chat-view__selector-button-tooltip str-chat__tooltip'\n        >\n          {text}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst threadAdapterSelector = ({ pagination, ready }: ThreadManagerState) => ({\n  isLoading: pagination.isLoading,\n  ready,\n});\n\nconst unreadThreadCountSelector = ({ unreadThreadCount }: ThreadManagerState) => ({\n  unreadThreadCount,\n});\n\nexport type ChatViewSelectorItemProps = {\n  iconOnly?: boolean;\n};\n\nexport const ChatViewChannelsSelectorButton = ({\n  iconOnly = true,\n}: ChatViewSelectorItemProps) => {\n  const { activeChatView, setActiveChatView } = useChatViewContext();\n  const { t } = useTranslationContext();\n  const { IconMessageBubble, IconMessageBubbleFill } = useComponentContextIcons();\n\n  const isActive = activeChatView === 'channels';\n\n  return (\n    <ChatViewSelectorButton\n      ActiveIcon={IconMessageBubbleFill}\n      aria-label={t('aria/Open channels view')}\n      Icon={IconMessageBubble}\n      iconOnly={iconOnly}\n      isActive={isActive}\n      onClick={() => setActiveChatView('channels')}\n      onPointerDown={() => setActiveChatView('channels')}\n      text={t('Channels')}\n    />\n  );\n};\n\nexport const ChatViewThreadsSelectorButton = ({\n  iconOnly = true,\n}: ChatViewSelectorItemProps) => {\n  const { client } = useChatContext();\n  const { unreadThreadCount } = useStateStore(\n    client.threads.state,\n    unreadThreadCountSelector,\n  ) ?? {\n    unreadThreadCount: 0,\n  };\n  const { activeChatView, setActiveChatView } = useChatViewContext();\n  const { t } = useTranslationContext();\n  const { IconThread, IconThreadFill } = useComponentContextIcons();\n\n  const isActive = activeChatView === 'threads';\n  const label =\n    unreadThreadCount > 0\n      ? t('aria/Open threads view with unread threads', {\n          count: unreadThreadCount,\n        })\n      : t('aria/Open threads view');\n\n  return (\n    <ChatViewSelectorButton\n      ActiveIcon={IconThreadFill}\n      aria-label={label}\n      Icon={IconThread}\n      iconOnly={iconOnly}\n      isActive={isActive}\n      onClick={() => setActiveChatView('threads')}\n      onPointerDown={() => setActiveChatView('threads')}\n      text={t('Threads')}\n    >\n      <UnreadCountBadge count={unreadThreadCount} position='top-right'>\n        {isActive ? <IconThreadFill /> : <IconThread />}\n      </UnreadCountBadge>\n    </ChatViewSelectorButton>\n  );\n};\n\nexport type ChatViewSelectorItem = {\n  Component: React.ComponentType<ChatViewSelectorItemProps>;\n  type: string & {};\n};\n\nexport type ChatViewSelectorEntry = ChatViewSelectorItem;\n\nexport type ChatViewSelectorProps = {\n  iconOnly?: boolean;\n  itemSet?: ChatViewSelectorEntry[];\n};\n\nexport const defaultChatViewSelectorItemSet: ChatViewSelectorEntry[] = [\n  {\n    Component: ChatViewChannelsSelectorButton,\n    type: 'channels' as string & {},\n  },\n  {\n    Component: ChatViewThreadsSelectorButton,\n    type: 'threads' as string & {},\n  },\n];\n\nconst ChatViewSelector = ({\n  iconOnly = true,\n  itemSet = defaultChatViewSelectorItemSet,\n}: ChatViewSelectorProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <div\n      aria-label={t('aria/Chat view controls')}\n      className='str-chat__chat-view__selector'\n      role='navigation'\n    >\n      {itemSet.map(({ Component, type }) => (\n        <Component iconOnly={iconOnly} key={type} />\n      ))}\n    </div>\n  );\n};\n\nChatView.Channels = ChannelsView;\nChatView.Threads = ThreadsView;\nChatView.ThreadAdapter = ThreadAdapter;\nChatView.Selector = ChatViewSelector;\n"],"mappings":"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"}

package/dist/es/components/DateSeparator/DateSeparator.mjs

@@ -0,0 +1,36 @@
+import { getDateString } from "../../i18n/utils.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/DateSeparator/DateSeparator.tsx
+var UnMemoizedDateSeparator = (props) => {
+	const { calendar, className, date: messageCreatedAt, floating, formatDate, ...restTimestampFormatterOptions } = props;
+	const { t, tDateTimeParser } = useTranslationContext("DateSeparator");
+	const formattedDate = getDateString({
+		calendar,
+		...restTimestampFormatterOptions,
+		formatDate,
+		messageCreatedAt,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp/DateSeparator"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__date-separator", { "str-chat__date-separator--floating": floating }, className),
+		"data-date": messageCreatedAt.toISOString(),
+		"data-testid": floating ? "floating-date-separator" : "date-separator",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__date-separator-date",
+			children: formattedDate
+		})
+	});
+};
+/**
+* A simple date separator between messages.
+*/
+var DateSeparator = React.memo(UnMemoizedDateSeparator);
+//#endregion
+export { DateSeparator };
+
+//# sourceMappingURL=DateSeparator.mjs.map

package/dist/es/components/DateSeparator/DateSeparator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSeparator.mjs","names":[],"sources":["../../../../src/components/DateSeparator/DateSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString } from '../../i18n/utils';\n\nimport type { TimestampFormatterOptions } from '../../i18n/types';\n\nexport type DateSeparatorProps = TimestampFormatterOptions & {\n  /** Optional className for the root element */\n  className?: string;\n  /** The date to format */\n  date: Date;\n  /** When true, applies floating positioning (fixed at top when scrolling) */\n  floating?: boolean;\n  /** Override the default formatting of the date. This is a function that has access to the original date object. */\n  formatDate?: (date: Date) => string;\n  // todo: position and unread are not necessary anymore\n  /** Set the position of the date in the separator, options are 'left', 'center', 'right', @default right */\n  position?: 'left' | 'center' | 'right';\n  /** If following messages are not new */\n  unread?: boolean;\n};\n\nconst UnMemoizedDateSeparator = (props: DateSeparatorProps) => {\n  const {\n    calendar,\n    className,\n    date: messageCreatedAt,\n    floating,\n    formatDate,\n    ...restTimestampFormatterOptions\n  } = props;\n\n  const { t, tDateTimeParser } = useTranslationContext('DateSeparator');\n\n  const formattedDate = getDateString({\n    calendar,\n    ...restTimestampFormatterOptions,\n    formatDate,\n    messageCreatedAt,\n    t,\n    tDateTimeParser,\n    timestampTranslationKey: 'timestamp/DateSeparator',\n  });\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__date-separator',\n        { 'str-chat__date-separator--floating': floating },\n        className,\n      )}\n      data-date={messageCreatedAt.toISOString()}\n      data-testid={floating ? 'floating-date-separator' : 'date-separator'}\n    >\n      <div className='str-chat__date-separator-date'>{formattedDate}</div>\n    </div>\n  );\n};\n\n/**\n * A simple date separator between messages.\n */\nexport const DateSeparator = React.memo(\n  UnMemoizedDateSeparator,\n) as typeof UnMemoizedDateSeparator;\n"],"mappings":";;;;;;AAwBA,IAAM,2BAA2B,UAA8B;CAC7D,MAAM,EACJ,UACA,WACA,MAAM,kBACN,UACA,YACA,GAAG,kCACD;CAEJ,MAAM,EAAE,GAAG,oBAAoB,sBAAsB,eAAe;CAEpE,MAAM,gBAAgB,cAAc;EAClC;EACA,GAAG;EACH;EACA;EACA;EACA;EACA,yBAAyB;CAC3B,CAAC;CAED,OACE,oBAAC,OAAD;EACE,WAAW,KACT,4BACA,EAAE,sCAAsC,SAAS,GACjD,SACF;EACA,aAAW,iBAAiB,YAAY;EACxC,eAAa,WAAW,4BAA4B;YAEpD,oBAAC,OAAD;GAAK,WAAU;aAAiC;EAAmB,CAAA;CAChE,CAAA;AAET;;;;AAKA,IAAa,gBAAgB,MAAM,KACjC,uBACF"}

package/dist/es/components/Dialog/components/Alert.mjs

@@ -0,0 +1,53 @@
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/components/Alert.tsx
+var Root = forwardRef(function AlertRoot({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__alert-root", className),
+		ref,
+		children
+	});
+});
+var Header = forwardRef(function AlertHeader({ children, className, description, descriptionId, Icon, title, titleId, ...props }, ref) {
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__alert-header", className),
+		ref,
+		children: title ? /* @__PURE__ */ jsxs(Fragment$1, { children: [Icon && /* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__alert-header__copy",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "str-chat__alert-header__title",
+				id: resolvedTitleId,
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "str-chat__alert-header__description",
+				id: resolvedDescriptionId,
+				children: description
+			})]
+		})] }) : children
+	});
+});
+var Alert = {
+	Actions: forwardRef(function AlertActions({ children, className, ...props }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			className: clsx("str-chat__alert-actions", className),
+			ref,
+			children
+		});
+	}),
+	Header,
+	Root
+};
+//#endregion
+export { Alert, Header, Root };
+
+//# sourceMappingURL=Alert.mjs.map

package/dist/es/components/Dialog/components/Alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Alert.tsx"],"sourcesContent":["import React, { type ComponentProps, type ComponentType, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useModalContext } from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nexport const Root = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function AlertRoot(\n  { children, className, ...props }: ComponentProps<'div'>,\n  ref,\n) {\n  return (\n    <div {...props} className={clsx('str-chat__alert-root', className)} ref={ref}>\n      {children}\n    </div>\n  );\n});\n\nexport type AlertHeaderProps = ComponentProps<'div'> & {\n  description?: string;\n  descriptionId?: string;\n  Icon?: ComponentType;\n  title?: string;\n  titleId?: string;\n};\n\nexport const Header = forwardRef<HTMLDivElement, AlertHeaderProps>(function AlertHeader(\n  { children, className, description, descriptionId, Icon, title, titleId, ...props },\n  ref,\n) {\n  const { dialogId } = useModalContext();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n  return (\n    <div {...props} className={clsx('str-chat__alert-header', className)} ref={ref}>\n      {title ? (\n        <>\n          {Icon && <Icon />}\n          <div className='str-chat__alert-header__copy'>\n            <h2 className='str-chat__alert-header__title' id={resolvedTitleId}>\n              {title}\n            </h2>\n            {description && (\n              <p\n                className='str-chat__alert-header__description'\n                id={resolvedDescriptionId}\n              >\n                {description}\n              </p>\n            )}\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n});\n\nconst Actions = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function AlertActions(\n  { children, className, ...props },\n  ref,\n) {\n  return (\n    <div {...props} className={clsx('str-chat__alert-actions', className)} ref={ref}>\n      {children}\n    </div>\n  );\n});\n\nexport const Alert = {\n  Actions,\n  Header,\n  Root,\n};\n"],"mappings":";;;;;;AAKA,IAAa,OAAO,WAAkD,SAAS,UAC7E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,KAAK,wBAAwB,SAAS;EAAQ;EACtE;CACE,CAAA;AAET,CAAC;AAUD,IAAa,SAAS,WAA6C,SAAS,YAC1E,EAAE,UAAU,WAAW,aAAa,eAAe,MAAM,OAAO,SAAS,GAAG,SAC5E,KACA;CACA,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAE/C,OACE,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,KAAK,0BAA0B,SAAS;EAAQ;YACxE,QACC,qBAAA,YAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,MAAD,CAAO,CAAA,GAChB,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAD;IAAI,WAAU;IAAgC,IAAI;cAC/C;GACC,CAAA,GACH,eACC,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;cAEH;GACA,CAAA,CAEF;IACL,EAAA,CAAA,IAEF;CAEC,CAAA;AAET,CAAC;AAaD,IAAa,QAAQ;CACnB,SAZc,WAAkD,SAAS,aACzE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;EACA,OACE,oBAAC,OAAD;GAAK,GAAI;GAAO,WAAW,KAAK,2BAA2B,SAAS;GAAQ;GACzE;EACE,CAAA;CAET,CAGE;CACA;CACA;AACF"}

package/dist/es/components/Dialog/components/Callout.mjs

@@ -0,0 +1,57 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useDialogIsOpen } from "../hooks/useDialog.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { DialogAnchor } from "../service/DialogAnchor.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/components/Callout.tsx
+/**
+* Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element
+* and has to be dismissed to disappear.
+* Tooltip on the other side is a dialog that appears upon pointer device cursor hovering above a reference element.
+* @param children
+* @param className
+* @param dialogManagerId
+* @param dialogId
+* @param onClose
+* @param anchorProps
+* @constructor
+*/
+var Callout = ({ children, className, dialogManagerId, id: dialogId, onClose, ...anchorProps }) => {
+	const { CalloutDialog = DefaultCalloutDialog } = useComponentContext();
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
+	return /* @__PURE__ */ jsx(DialogAnchor, {
+		...anchorProps,
+		dialogManagerId,
+		id: dialogId,
+		children: dialogIsOpen && /* @__PURE__ */ jsx(CalloutDialog, {
+			className,
+			onClose,
+			children
+		})
+	});
+};
+var DefaultCalloutDialog = ({ children, className, onClose }) => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__callout",
+		children: [children, /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-label": t("aria/Close callout dialog"),
+			circular: true,
+			className: clsx(className, "str-chat__callout__close-button"),
+			onClick: onClose,
+			size: "sm",
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconXmark, {})
+		})]
+	});
+};
+//#endregion
+export { Callout };
+
+//# sourceMappingURL=Callout.mjs.map

package/dist/es/components/Dialog/components/Callout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Callout.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport { DialogAnchor, type DialogAnchorProps } from '../service';\nimport { useDialogIsOpen } from '../hooks';\nimport { Button } from '../../Button';\nimport clsx from 'clsx';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\n\nexport type CalloutProps = PropsWithChildren<\n  DialogAnchorProps & {\n    onClose: () => void;\n    className?: string;\n  }\n>;\n\n/**\n * Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element\n * and has to be dismissed to disappear.\n * Tooltip on the other side is a dialog that appears upon pointer device cursor hovering above a reference element.\n * @param children\n * @param className\n * @param dialogManagerId\n * @param dialogId\n * @param onClose\n * @param anchorProps\n * @constructor\n */\n\nexport const Callout = ({\n  children,\n  className,\n  dialogManagerId,\n  id: dialogId,\n  onClose,\n  ...anchorProps\n}: CalloutProps) => {\n  const { CalloutDialog = DefaultCalloutDialog } = useComponentContext();\n\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n  return (\n    <DialogAnchor {...anchorProps} dialogManagerId={dialogManagerId} id={dialogId}>\n      {dialogIsOpen && (\n        <CalloutDialog className={className} onClose={onClose}>\n          {children}\n        </CalloutDialog>\n      )}\n    </DialogAnchor>\n  );\n};\n\nexport type CalloutDialogProps = Pick<CalloutProps, 'children' | 'className' | 'onClose'>;\n\nconst DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogProps) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__callout'>\n      {children}\n      <Button\n        appearance='ghost'\n        aria-label={t('aria/Close callout dialog')}\n        circular\n        className={clsx(className, 'str-chat__callout__close-button')}\n        onClick={onClose}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,EACtB,UACA,WACA,iBACA,IAAI,UACJ,SACA,GAAG,kBACe;CAClB,MAAM,EAAE,gBAAgB,yBAAyB,oBAAoB;CAErE,MAAM,eAAe,gBAAgB,UAAU,eAAe;CAC9D,OACE,oBAAC,cAAD;EAAc,GAAI;EAA8B;EAAiB,IAAI;YAClE,gBACC,oBAAC,eAAD;GAA0B;GAAoB;GAC3C;EACY,CAAA;CAEL,CAAA;AAElB;AAIA,IAAM,wBAAwB,EAAE,UAAU,WAAW,cAAkC;CACrF,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,UACD,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,2BAA2B;GACzC,UAAA;GACA,WAAW,KAAK,WAAW,iCAAiC;GAC5D,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}