stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.mjs

@@ -0,0 +1,120 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../../../../components/Dialog/hooks/useDialog.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Button } from "../../../../components/Button/Button.mjs";
+import { ContextMenu, ContextMenuButton } from "../../../../components/Dialog/components/ContextMenu.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { canUpdateChannelMembers } from "./ChannelMembersView.utils.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
+/**
+* First-pass filter applied by {@link DefaultHeaderActions}. The SDK's own
+* actions are gated internally by capability — `addMembers` requires
+* `update-channel-members`; any other action is shown by default. App-defined
+* actions may further narrow visibility via their own `filter` predicate (which
+* is what an app should use to gate, e.g., a custom member-removal action).
+*/
+var useBaseChannelMembersHeaderActionSetFilter = (channelMembersHeaderActionSet) => {
+	const { channel } = useChannelDetailContext();
+	const canManageChannelMembers = canUpdateChannelMembers(channel);
+	return useMemo(() => channelMembersHeaderActionSet.filter((action) => {
+		return (action.type !== "addMembers" || canManageChannelMembers) && (action.filter?.({ channel }) ?? true);
+	}), [
+		canManageChannelMembers,
+		channel,
+		channelMembersHeaderActionSet
+	]);
+};
+var AddMembersHeaderAction = ({ modeController }) => {
+	const { t } = useTranslationContext();
+	if (modeController.mode !== "browse") return null;
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		"aria-label": t("channelDetail.channelMembersHeader.addChannelMembers.ariaLabel", "Add channel members"),
+		className: "str-chat__channel-detail__channel-members-view__add-button",
+		onClick: () => modeController.setMode("add"),
+		size: "md",
+		variant: "secondary",
+		children: t("channelDetail.channelMembersHeader.add.text", "Add")
+	});
+};
+var AddMembersMenuAction = ({ closeMenu, modeController }) => {
+	const { IconUserAdd } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	if (modeController.mode !== "browse") return null;
+	return /* @__PURE__ */ jsx(ContextMenuButton, {
+		"aria-label": t("channelDetail.channelMembersHeader.addChannelMembers.ariaLabel", "Add channel members"),
+		Icon: IconUserAdd,
+		onClick: () => {
+			modeController.setMode("add");
+			closeMenu?.();
+		},
+		children: t("channelDetail.channelMembersHeader.add.text", "Add")
+	});
+};
+var DefaultChannelMembersHeaderActions = {
+	AddMembers: AddMembersHeaderAction,
+	AddMembersMenu: AddMembersMenuAction
+};
+var defaultChannelMembersHeaderActionSet = [{
+	component: DefaultChannelMembersHeaderActions.AddMembers,
+	placement: "quick",
+	type: "addMembers"
+}];
+var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		"aria-label": t("channelDetail.channelMembersHeader.openMembersActions.ariaLabel", "Open members actions"),
+		className: "str-chat__channel-detail__channel-members-view__actions-button",
+		ref: referenceRef,
+		size: "md",
+		variant: "secondary",
+		...props,
+		children: t("channelDetail.channelMembersHeader.actions.text", "Actions")
+	});
+};
+var getHeaderActionsDialogId = (channelId) => `channel-members-header-actions-${channelId ?? "unknown"}`;
+var DefaultHeaderActions = ({ headerActionSet, HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger, modeController }) => {
+	const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);
+	const [referenceElement, setReferenceElement] = useState(null);
+	const dialogId = getHeaderActionsDialogId(channel.id);
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const dialogManagerId = dialogManager?.id;
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
+	if (!actions.length) return null;
+	const quickActions = actions.filter((action) => action.placement === "quick");
+	const menuActions = actions.filter((action) => action.placement === "menu");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-members-view__header-actions",
+		children: [quickActions.map(({ component: QuickComponent, type }) => /* @__PURE__ */ jsx(QuickComponent, { modeController }, type)), menuActions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HeaderActionsMenuTrigger, {
+			"aria-expanded": dialogIsOpen,
+			onClick: () => {
+				dialog.toggle();
+			},
+			referenceRef: setReferenceElement
+		}), /* @__PURE__ */ jsx(ContextMenuComponent, {
+			"aria-label": "Members actions",
+			className: "str-chat__channel-detail__channel-members-view__header-actions-menu",
+			dialogManagerId,
+			id: dialog.id,
+			onClose: () => dialog.close(),
+			placement: "bottom-start",
+			referenceElement,
+			tabIndex: -1,
+			trapFocus: true,
+			children: menuActions.map(({ component: MenuComponent, type }) => /* @__PURE__ */ jsx(MenuComponent, {
+				closeMenu: () => dialog.close(),
+				modeController
+			}, type))
+		})] })]
+	});
+};
+//#endregion
+export { DefaultChannelMembersHeaderActions, DefaultHeaderActions, DefaultHeaderActionsMenuTrigger, defaultChannelMembersHeaderActionSet, useBaseChannelMembersHeaderActionSetFilter };
+
+//# sourceMappingURL=ChannelMembersHeaderActions.defaults.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersHeaderActions.defaults.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx"],"sourcesContent":["import type { Channel } from 'stream-chat';\nimport React, { useMemo, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Button } from '../../../../components/Button';\nimport {\n  ContextMenu,\n  ContextMenuButton,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../../../../components/Dialog';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { canUpdateChannelMembers } from './ChannelMembersView.utils';\nimport type {\n  ChannelMembersHeaderActionsProps,\n  ChannelMembersModeController,\n} from './ChannelMembersView';\n\nexport type ChannelMembersHeaderActionType = 'addMembers' | (string & {});\n\nexport type ChannelMembersHeaderActionComponentProps = {\n  closeMenu?: () => void;\n  modeController: ChannelMembersModeController;\n};\n\n/** Where a header action renders: inline (`quick`) or inside the actions menu. */\nexport type ChannelMembersHeaderActionPlacement = 'quick' | 'menu';\n\nexport type ChannelMembersHeaderActionItem = {\n  component: React.ComponentType<ChannelMembersHeaderActionComponentProps>;\n  placement: ChannelMembersHeaderActionPlacement;\n  type: ChannelMembersHeaderActionType;\n  /**\n   * Optional visibility gate for app-defined actions. Apps that add their own\n   * actions are responsible for their permission checks here (the predicate\n   * receives the `channel` so it can read `own_capabilities`). The SDK's own\n   * actions are gated internally and do not rely on this.\n   */\n  filter?: (ctx: { channel: Channel }) => boolean;\n};\n\n/**\n * First-pass filter applied by {@link DefaultHeaderActions}. The SDK's own\n * actions are gated internally by capability — `addMembers` requires\n * `update-channel-members`; any other action is shown by default. App-defined\n * actions may further narrow visibility via their own `filter` predicate (which\n * is what an app should use to gate, e.g., a custom member-removal action).\n */\nexport const useBaseChannelMembersHeaderActionSetFilter = (\n  channelMembersHeaderActionSet: ChannelMembersHeaderActionItem[],\n) => {\n  const { channel } = useChannelDetailContext();\n  const canManageChannelMembers = canUpdateChannelMembers(channel);\n\n  return useMemo(\n    () =>\n      channelMembersHeaderActionSet.filter((action) => {\n        const allowedByCapability =\n          action.type !== 'addMembers' || canManageChannelMembers;\n\n        return allowedByCapability && (action.filter?.({ channel }) ?? true);\n      }),\n    [canManageChannelMembers, channel, channelMembersHeaderActionSet],\n  );\n};\n\nconst AddMembersHeaderAction = ({\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { t } = useTranslationContext();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t(\n        'channelDetail.channelMembersHeader.addChannelMembers.ariaLabel',\n        'Add channel members',\n      )}\n      className='str-chat__channel-detail__channel-members-view__add-button'\n      onClick={() => modeController.setMode('add')}\n      size='md'\n      variant='secondary'\n    >\n      {t('channelDetail.channelMembersHeader.add.text', 'Add')}\n    </Button>\n  );\n};\n\nconst AddMembersMenuAction = ({\n  closeMenu,\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { IconUserAdd } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <ContextMenuButton\n      aria-label={t(\n        'channelDetail.channelMembersHeader.addChannelMembers.ariaLabel',\n        'Add channel members',\n      )}\n      Icon={IconUserAdd}\n      onClick={() => {\n        modeController.setMode('add');\n        closeMenu?.();\n      }}\n    >\n      {t('channelDetail.channelMembersHeader.add.text', 'Add')}\n    </ContextMenuButton>\n  );\n};\n\nexport const DefaultChannelMembersHeaderActions = {\n  AddMembers: AddMembersHeaderAction,\n  AddMembersMenu: AddMembersMenuAction,\n};\n\nexport const defaultChannelMembersHeaderActionSet: ChannelMembersHeaderActionItem[] = [\n  {\n    component: DefaultChannelMembersHeaderActions.AddMembers,\n    placement: 'quick',\n    type: 'addMembers',\n  },\n];\n\nexport type ChannelMembersHeaderActionsMenuTriggerProps = {\n  'aria-expanded': boolean;\n  onClick: () => void;\n  referenceRef?: React.Ref<HTMLButtonElement>;\n};\n\nexport const DefaultHeaderActionsMenuTrigger = ({\n  referenceRef,\n  ...props\n}: ChannelMembersHeaderActionsMenuTriggerProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <Button\n      appearance='outline'\n      aria-label={t(\n        'channelDetail.channelMembersHeader.openMembersActions.ariaLabel',\n        'Open members actions',\n      )}\n      className='str-chat__channel-detail__channel-members-view__actions-button'\n      ref={referenceRef}\n      size='md'\n      variant='secondary'\n      {...props}\n    >\n      {t('channelDetail.channelMembersHeader.actions.text', 'Actions')}\n    </Button>\n  );\n};\n\nconst getHeaderActionsDialogId = (channelId?: string) =>\n  `channel-members-header-actions-${channelId ?? 'unknown'}`;\n\nexport const DefaultHeaderActions = ({\n  headerActionSet,\n  HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger,\n  modeController,\n}: ChannelMembersHeaderActionsProps) => {\n  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();\n  const { channel } = useChannelDetailContext();\n  const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(\n    null,\n  );\n  const dialogId = getHeaderActionsDialogId(channel.id);\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogManagerId = dialogManager?.id;\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);\n\n  if (!actions.length) return null;\n\n  const quickActions = actions.filter((action) => action.placement === 'quick');\n  const menuActions = actions.filter((action) => action.placement === 'menu');\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view__header-actions'>\n      {quickActions.map(({ component: QuickComponent, type }) => (\n        <QuickComponent key={type} modeController={modeController} />\n      ))}\n\n      {menuActions.length > 0 && (\n        <>\n          <HeaderActionsMenuTrigger\n            aria-expanded={dialogIsOpen}\n            onClick={() => {\n              dialog.toggle();\n            }}\n            referenceRef={setReferenceElement}\n          />\n          <ContextMenuComponent\n            aria-label='Members actions'\n            className='str-chat__channel-detail__channel-members-view__header-actions-menu'\n            dialogManagerId={dialogManagerId}\n            id={dialog.id}\n            onClose={() => dialog.close()}\n            placement='bottom-start'\n            referenceElement={referenceElement}\n            tabIndex={-1}\n            trapFocus\n          >\n            {menuActions.map(({ component: MenuComponent, type }) => (\n              <MenuComponent\n                closeMenu={() => dialog.close()}\n                key={type}\n                modeController={modeController}\n              />\n            ))}\n          </ContextMenuComponent>\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.mjs

@@ -0,0 +1,95 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { DefaultHeaderActions, defaultChannelMembersHeaderActionSet } from "./ChannelMembersHeaderActions.defaults.mjs";
+import { ChannelMembersAddView } from "./ChannelMembersAddView.mjs";
+import { useChannelMemberCount } from "./useChannelMemberCount.mjs";
+import { ChannelMembersBrowseView } from "./ChannelMembersBrowseView.mjs";
+import { ChannelMemberDetail } from "../ChannelMemberDetailView/ChannelMemberDetail.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.tsx
+var RESERVED_MODES = ["browse", "memberDetail"];
+var isReservedMode = (mode) => RESERVED_MODES.includes(mode);
+var AddMembersModeTitle = () => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: t("channelDetail.channelMembersView.addMembers.label", "Add members") });
+};
+/** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */
+var defaultChannelMembersModeViews = { add: {
+	Body: ChannelMembersAddView,
+	Title: AddMembersModeTitle
+} };
+var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSet = defaultChannelMembersHeaderActionSet, HeaderActionsMenuTrigger, layout, modeViews: customModeViews }) => {
+	const { t } = useTranslationContext();
+	const { channel } = useChannelDetailContext();
+	const { close } = useModalContext();
+	const [mode, setMode] = useState("browse");
+	const [selectedMember, setSelectedMember] = useState();
+	const memberCount = useChannelMemberCount(channel);
+	const modeViews = useMemo(() => ({
+		...defaultChannelMembersModeViews,
+		...customModeViews
+	}), [customModeViews]);
+	const activeModeDescriptor = isReservedMode(mode) ? void 0 : modeViews[mode];
+	const isViewingMemberDetail = mode === "memberDetail";
+	const setViewMode = useCallback((nextMode) => {
+		setMode(nextMode);
+		if (nextMode !== "memberDetail") setSelectedMember(void 0);
+	}, []);
+	useEffect(() => {
+		if (!isReservedMode(mode) && !modeViews[mode]) setViewMode("browse");
+	}, [
+		mode,
+		modeViews,
+		setViewMode
+	]);
+	const goBack = useCallback(() => setViewMode("browse"), [setViewMode]);
+	const modeController = useMemo(() => ({
+		mode,
+		setMode: setViewMode
+	}), [mode, setViewMode]);
+	const HeaderTrailingActions = useMemo(() => function HeaderTrailingActions() {
+		if (mode !== "browse") return null;
+		return /* @__PURE__ */ jsx(HeaderActions, {
+			headerActionSet,
+			HeaderActionsMenuTrigger,
+			modeController
+		});
+	}, [
+		HeaderActions,
+		HeaderActionsMenuTrigger,
+		modeController,
+		headerActionSet,
+		mode
+	]);
+	if (isViewingMemberDetail && selectedMember) return /* @__PURE__ */ jsx(ChannelMemberDetail, {
+		layout,
+		member: selectedMember,
+		onBack: goBack
+	});
+	const ActiveModeTitle = activeModeDescriptor?.Title;
+	const ActiveModeBody = activeModeDescriptor?.Body;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-members-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			description: activeModeDescriptor ? void 0 : t("channelDetail.channelMembersView.browseChannelMembers.description", "Browse channel members"),
+			goBack: activeModeDescriptor ? goBack : void 0,
+			title: ActiveModeTitle ? /* @__PURE__ */ jsx(ActiveModeTitle, {}) : t("channelDetail.channelMembersView.members.title", {
+				count: memberCount,
+				defaultValue_one: "{{ count }} member",
+				defaultValue_other: "{{ count }} members"
+			}),
+			TrailingContent: HeaderTrailingActions
+		}), ActiveModeBody ? /* @__PURE__ */ jsx(ActiveModeBody, { modeController }) : /* @__PURE__ */ jsx(ChannelMembersBrowseView, { onMemberSelect: (member) => {
+			setSelectedMember(member);
+			setViewMode("memberDetail");
+		} })]
+	});
+};
+//#endregion
+export { ChannelMembersView, defaultChannelMembersModeViews };
+
+//# sourceMappingURL=ChannelMembersView.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport { useModalContext, useTranslationContext } from '../../../../context';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelMemberDetail } from '../ChannelMemberDetailView';\nimport {\n  type ChannelMembersHeaderActionItem,\n  type ChannelMembersHeaderActionsMenuTriggerProps,\n  defaultChannelMembersHeaderActionSet,\n  DefaultHeaderActions,\n} from './ChannelMembersHeaderActions.defaults';\nimport { ChannelMembersAddView } from './ChannelMembersAddView';\nimport { ChannelMembersBrowseView } from './ChannelMembersBrowseView';\nimport { useChannelMemberCount } from './useChannelMemberCount';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\n\nexport type ChannelMembersHeaderActionsProps = {\n  modeController: ChannelMembersModeController;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet: ChannelMembersHeaderActionItem[];\n};\n\n/**\n * Built-in modes are rendered by `ChannelMembersView` itself. Any other string\n * is treated as a custom mode and rendered from the injected `modeViews` registry.\n */\nexport type ChannelMembersViewMode = 'add' | 'browse' | 'memberDetail' | (string & {});\n\nexport type ChannelMembersModeController = {\n  mode: ChannelMembersViewMode;\n  setMode: (mode: ChannelMembersViewMode) => void;\n};\n\nexport type ChannelMembersModeViewProps = {\n  /**\n   * Navigation surface for the mode. Call `modeController.setMode('browse')` to\n   * return to the list, or any other mode key to transition between modes.\n   */\n  modeController: ChannelMembersModeController;\n};\n\nexport type ChannelMembersViewModeDescriptor = {\n  /** Body rendered below the section header for this mode. */\n  Body: React.ComponentType<ChannelMembersModeViewProps>;\n  /**\n   * Header title for this mode. A component (rather than a string) so it can pull\n   * whatever it needs from context/hooks — member count, translation, etc.\n   */\n  Title: React.ComponentType;\n};\n\n/** Registry of modes, keyed by the mode string passed to `setMode`. */\nexport type ChannelMembersViewModes = Record<string, ChannelMembersViewModeDescriptor>;\n\n// `browse` (the default list) and `memberDetail` (selection-driven, renders its\n// own header) are handled by ChannelMembersView directly; every other mode —\n// built-in `add` or app-provided — is resolved from the mode-view registry.\nconst RESERVED_MODES: ChannelMembersViewMode[] = ['browse', 'memberDetail'];\n\nconst isReservedMode = (mode: ChannelMembersViewMode) => RESERVED_MODES.includes(mode);\n\nconst AddMembersModeTitle = () => {\n  const { t } = useTranslationContext();\n  return <>{t('channelDetail.channelMembersView.addMembers.label', 'Add members')}</>;\n};\n\n/** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */\nexport const defaultChannelMembersModeViews: ChannelMembersViewModes = {\n  add: {\n    Body: ChannelMembersAddView,\n    Title: AddMembersModeTitle,\n  },\n};\n\nexport type ChannelMembersViewProps = SectionNavigatorSectionContentProps & {\n  HeaderActions?: React.ComponentType<ChannelMembersHeaderActionsProps>;\n  HeaderActionsMenuTrigger?: React.ComponentType<ChannelMembersHeaderActionsMenuTriggerProps>;\n  headerActionSet?: ChannelMembersHeaderActionItem[];\n  /** App-provided modes (e.g. bulk removal) rendered alongside the built-in ones. */\n  modeViews?: ChannelMembersViewModes;\n};\n\nexport const ChannelMembersView = ({\n  HeaderActions = DefaultHeaderActions,\n  headerActionSet = defaultChannelMembersHeaderActionSet,\n  HeaderActionsMenuTrigger,\n  layout,\n  modeViews: customModeViews,\n}: ChannelMembersViewProps) => {\n  const { t } = useTranslationContext();\n  const { channel } = useChannelDetailContext();\n  const { close } = useModalContext();\n  const [mode, setMode] = useState<ChannelMembersViewMode>('browse');\n  const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse>();\n  const memberCount = useChannelMemberCount(channel);\n\n  const modeViews = useMemo(\n    () => ({ ...defaultChannelMembersModeViews, ...customModeViews }),\n    [customModeViews],\n  );\n\n  const activeModeDescriptor = isReservedMode(mode) ? undefined : modeViews[mode];\n  const isViewingMemberDetail = mode === 'memberDetail';\n\n  const setViewMode = useCallback((nextMode: ChannelMembersViewMode) => {\n    setMode(nextMode);\n    if (nextMode !== 'memberDetail') {\n      setSelectedMember(undefined);\n    }\n  }, []);\n\n  // Fall back to the browse list if an unknown mode becomes active (e.g. the app\n  // stops providing the mode's descriptor while it is selected).\n  useEffect(() => {\n    if (!isReservedMode(mode) && !modeViews[mode]) {\n      setViewMode('browse');\n    }\n  }, [mode, modeViews, setViewMode]);\n\n  const goBack = useCallback(() => setViewMode('browse'), [setViewMode]);\n\n  const modeController = useMemo<ChannelMembersModeController>(\n    () => ({\n      mode,\n      setMode: setViewMode,\n    }),\n    [mode, setViewMode],\n  );\n\n  const HeaderTrailingActions = useMemo(\n    () =>\n      function HeaderTrailingActions() {\n        if (mode !== 'browse') return null;\n        return (\n          <HeaderActions\n            headerActionSet={headerActionSet}\n            HeaderActionsMenuTrigger={HeaderActionsMenuTrigger}\n            modeController={modeController}\n          />\n        );\n      },\n    [HeaderActions, HeaderActionsMenuTrigger, modeController, headerActionSet, mode],\n  );\n\n  if (isViewingMemberDetail && selectedMember) {\n    return (\n      <ChannelMemberDetail layout={layout} member={selectedMember} onBack={goBack} />\n    );\n  }\n\n  const ActiveModeTitle = activeModeDescriptor?.Title;\n  const ActiveModeBody = activeModeDescriptor?.Body;\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={\n          activeModeDescriptor\n            ? undefined\n            : t(\n                'channelDetail.channelMembersView.browseChannelMembers.description',\n                'Browse channel members',\n              )\n        }\n        goBack={activeModeDescriptor ? goBack : undefined}\n        title={\n          ActiveModeTitle ? (\n            <ActiveModeTitle />\n          ) : (\n            t('channelDetail.channelMembersView.members.title', {\n              count: memberCount,\n              defaultValue_one: '{{ count }} member',\n              defaultValue_other: '{{ count }} members',\n            })\n          )\n        }\n        TrailingContent={HeaderTrailingActions}\n      />\n      {ActiveModeBody ? (\n        <ActiveModeBody modeController={modeController} />\n      ) : (\n        <ChannelMembersBrowseView\n          onMemberSelect={(member) => {\n            setSelectedMember(member);\n            setViewMode('memberDetail');\n          }}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA6DA,IAAM,iBAA2C,CAAC,UAAU,cAAc;AAE1E,IAAM,kBAAkB,SAAiC,eAAe,SAAS,IAAI;AAErF,IAAM,4BAA4B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OAAO,oBAAA,YAAA,EAAA,UAAG,EAAE,qDAAqD,aAAa,EAAI,CAAA;AACpF;;AAGA,IAAa,iCAA0D,EACrE,KAAK;CACH,MAAM;CACN,OAAO;AACT,EACF;AAUA,IAAa,sBAAsB,EACjC,gBAAgB,sBAChB,kBAAkB,sCAClB,0BACA,QACA,WAAW,sBACkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,CAAC,MAAM,WAAW,SAAiC,QAAQ;CACjE,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC;CAC5E,MAAM,cAAc,sBAAsB,OAAO;CAEjD,MAAM,YAAY,eACT;EAAE,GAAG;EAAgC,GAAG;CAAgB,IAC/D,CAAC,eAAe,CAClB;CAEA,MAAM,uBAAuB,eAAe,IAAI,IAAI,KAAA,IAAY,UAAU;CAC1E,MAAM,wBAAwB,SAAS;CAEvC,MAAM,cAAc,aAAa,aAAqC;EACpE,QAAQ,QAAQ;EAChB,IAAI,aAAa,gBACf,kBAAkB,KAAA,CAAS;CAE/B,GAAG,CAAC,CAAC;CAIL,gBAAgB;EACd,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,UAAU,OACtC,YAAY,QAAQ;CAExB,GAAG;EAAC;EAAM;EAAW;CAAW,CAAC;CAEjC,MAAM,SAAS,kBAAkB,YAAY,QAAQ,GAAG,CAAC,WAAW,CAAC;CAErE,MAAM,iBAAiB,eACd;EACL;EACA,SAAS;CACX,IACA,CAAC,MAAM,WAAW,CACpB;CAEA,MAAM,wBAAwB,cAE1B,SAAS,wBAAwB;EAC/B,IAAI,SAAS,UAAU,OAAO;EAC9B,OACE,oBAAC,eAAD;GACmB;GACS;GACV;EACjB,CAAA;CAEL,GACF;EAAC;EAAe;EAA0B;EAAgB;EAAiB;CAAI,CACjF;CAEA,IAAI,yBAAyB,gBAC3B,OACE,oBAAC,qBAAD;EAA6B;EAAQ,QAAQ;EAAgB,QAAQ;CAAS,CAAA;CAIlF,MAAM,kBAAkB,sBAAsB;CAC9C,MAAM,iBAAiB,sBAAsB;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,aACE,uBACI,KAAA,IACA,EACE,qEACA,wBACF;GAEN,QAAQ,uBAAuB,SAAS,KAAA;GACxC,OACE,kBACE,oBAAC,iBAAD,CAAkB,CAAA,IAElB,EAAE,kDAAkD;IAClD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC;GAGL,iBAAiB;EAClB,CAAA,GACA,iBACC,oBAAC,gBAAD,EAAgC,eAAiB,CAAA,IAEjD,oBAAC,0BAAD,EACE,iBAAiB,WAAW;GAC1B,kBAAkB,MAAM;GACxB,YAAY,cAAc;EAC5B,EACD,CAAA,CAEA;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.mjs

@@ -0,0 +1,11 @@
+import "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts
+var getMemberDisplayName = (member) => getUserDisplayName(member.user) || member.user_id || "";
+var getMemberUserId = (member) => member.user?.id || member.user_id;
+var getUserDisplayName = (user) => user?.name || (user?.custom)?.username || user?.id || "";
+var getChannelMemberUserIds = (channel) => Object.values(channel.state?.members ?? {}).map((member) => member.user?.id || member.user_id).filter((userId) => !!userId);
+var canUpdateChannelMembers = (channel) => channel.data?.own_capabilities?.includes("update-channel-members") ?? false;
+//#endregion
+export { canUpdateChannelMembers, getChannelMemberUserIds, getMemberDisplayName, getMemberUserId, getUserDisplayName };
+
+//# sourceMappingURL=ChannelMembersView.utils.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts"],"sourcesContent":["import { type Channel, type ChannelMemberResponse, type UserResponse } from 'stream-chat';\n\nexport const CHANNEL_MEMBERS_QUERY_LIMIT = 100;\n\nexport const getMemberDisplayName = (member: ChannelMemberResponse) =>\n  getUserDisplayName(member.user) || member.user_id || '';\n\nexport const getMemberUserId = (member: ChannelMemberResponse) =>\n  member.user?.id || member.user_id;\n\nexport const getUserDisplayName = (user?: UserResponse) =>\n  user?.name ||\n  (user?.custom as { username?: string } | undefined)?.username ||\n  user?.id ||\n  '';\n\nexport const getChannelMemberUserIds = (channel: Channel) =>\n  Object.values(channel.state?.members ?? {})\n    .map((member) => member.user?.id || member.user_id)\n    .filter((userId): userId is string => !!userId);\n\nexport const canUpdateChannelMembers = (channel: Channel) =>\n  channel.data?.own_capabilities?.includes('update-channel-members') ?? false;\n"],"mappings":";;AAIA,IAAa,wBAAwB,WACnC,mBAAmB,OAAO,IAAI,KAAK,OAAO,WAAW;AAEvD,IAAa,mBAAmB,WAC9B,OAAO,MAAM,MAAM,OAAO;AAE5B,IAAa,sBAAsB,SACjC,MAAM,SACL,MAAM,OAAA,EAA8C,YACrD,MAAM,MACN;AAEF,IAAa,2BAA2B,YACtC,OAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC,CAAC,CACxC,KAAK,WAAW,OAAO,MAAM,MAAM,OAAO,OAAO,CAAC,CAClD,QAAQ,WAA6B,CAAC,CAAC,MAAM;AAElD,IAAa,2BAA2B,YACtC,QAAQ,MAAM,kBAAkB,SAAS,wBAAwB,KAAK"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberCount.mjs

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberCount.ts
+var MEMBER_COUNT_EVENTS = [
+	"member.added",
+	"member.removed",
+	"channel.updated"
+];
+/** Reactive channel member count derived from real channel state. */
+var useChannelMemberCount = (channel) => {
+	const [memberCount, setMemberCount] = useState(channel.data?.member_count ?? 0);
+	useEffect(() => {
+		const syncMemberCount = () => setMemberCount(channel.data?.member_count ?? 0);
+		syncMemberCount();
+		const subscriptions = MEMBER_COUNT_EVENTS.map((event) => channel.on(event, syncMemberCount));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return memberCount;
+};
+//#endregion
+export { useChannelMemberCount };
+
+//# sourceMappingURL=useChannelMemberCount.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMemberCount.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberCount.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\n// Channel events that change (or may change) the member count. `channel.data` is\n// refreshed by the SDK on member add/remove and channel updates, so re-reading\n// `member_count` on these events keeps the value in sync with real state — no\n// imperative count bookkeeping from the views that mutate membership.\nconst MEMBER_COUNT_EVENTS = [\n  'member.added',\n  'member.removed',\n  'channel.updated',\n] as const;\n\n/** Reactive channel member count derived from real channel state. */\nexport const useChannelMemberCount = (channel: Channel) => {\n  const [memberCount, setMemberCount] = useState(channel.data?.member_count ?? 0);\n\n  useEffect(() => {\n    const syncMemberCount = () => setMemberCount(channel.data?.member_count ?? 0);\n\n    syncMemberCount();\n\n    const subscriptions = MEMBER_COUNT_EVENTS.map((event) =>\n      channel.on(event, syncMemberCount),\n    );\n\n    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n  }, [channel]);\n\n  return memberCount;\n};\n"],"mappings":";;AAOA,IAAM,sBAAsB;CAC1B;CACA;CACA;AACF;;AAGA,IAAa,yBAAyB,YAAqB;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,QAAQ,MAAM,gBAAgB,CAAC;CAE9E,gBAAgB;EACd,MAAM,wBAAwB,eAAe,QAAQ,MAAM,gBAAgB,CAAC;EAE5E,gBAAgB;EAEhB,MAAM,gBAAgB,oBAAoB,KAAK,UAC7C,QAAQ,GAAG,OAAO,eAAe,CACnC;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberIds.mjs

@@ -0,0 +1,23 @@
+import { getChannelMemberUserIds } from "./ChannelMembersView.utils.mjs";
+import { useEffect, useState } from "react";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberIds.ts
+var MEMBER_IDS_EVENTS = [
+	"member.added",
+	"member.removed",
+	"member.updated"
+];
+/** Reactive set of channel member user ids derived from real channel state. */
+var useChannelMemberIds = (channel) => {
+	const [memberIds, setMemberIds] = useState(() => getChannelMemberUserIds(channel));
+	useEffect(() => {
+		const syncMemberIds = () => setMemberIds(getChannelMemberUserIds(channel));
+		syncMemberIds();
+		const subscriptions = MEMBER_IDS_EVENTS.map((event) => channel.on(event, syncMemberIds));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return memberIds;
+};
+//#endregion
+export { useChannelMemberIds };
+
+//# sourceMappingURL=useChannelMemberIds.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberIds.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMemberIds.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberIds.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { getChannelMemberUserIds } from './ChannelMembersView.utils';\n\n// Channel events that add, remove or change a member. `channel.state.members` is\n// kept in sync by the SDK on these events, so re-reading the member ids on each\n// keeps the derived set reactive — no imperative bookkeeping from the views that\n// mutate membership.\nconst MEMBER_IDS_EVENTS = ['member.added', 'member.removed', 'member.updated'] as const;\n\n/** Reactive set of channel member user ids derived from real channel state. */\nexport const useChannelMemberIds = (channel: Channel) => {\n  const [memberIds, setMemberIds] = useState(() => getChannelMemberUserIds(channel));\n\n  useEffect(() => {\n    const syncMemberIds = () => setMemberIds(getChannelMemberUserIds(channel));\n\n    syncMemberIds();\n\n    const subscriptions = MEMBER_IDS_EVENTS.map((event) =>\n      channel.on(event, syncMemberIds),\n    );\n\n    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n  }, [channel]);\n\n  return memberIds;\n};\n"],"mappings":";;;AASA,IAAM,oBAAoB;CAAC;CAAgB;CAAkB;AAAgB;;AAG7E,IAAa,uBAAuB,YAAqB;CACvD,MAAM,CAAC,WAAW,gBAAgB,eAAe,wBAAwB,OAAO,CAAC;CAEjF,gBAAgB;EACd,MAAM,sBAAsB,aAAa,wBAAwB,OAAO,CAAC;EAEzE,cAAc;EAEd,MAAM,gBAAgB,kBAAkB,KAAK,UAC3C,QAAQ,GAAG,OAAO,aAAa,CACjC;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMembersSearch.mjs

@@ -0,0 +1,52 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { useChannelMemberCount } from "./useChannelMemberCount.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ChannelMemberSearchSource } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMembersSearch.ts
+var MEMBERS_SEARCH_DEBOUNCE_MS = 300;
+var membersSearchSourceItemsStateSelector = (state) => ({ members: state.items });
+var useChannelMembersSearch = () => {
+	const { channel } = useChannelDetailContext();
+	const fallbackMembers = useMemo(() => Object.values(channel.state?.members ?? {}), [channel]);
+	const memberCount = useChannelMemberCount(channel);
+	const hasMembers = channel.data?.member_count === void 0 || memberCount !== 0;
+	const membersSearchSource = useMemo(() => new ChannelMemberSearchSource(channel, {
+		allowEmptySearchString: true,
+		debounceMs: MEMBERS_SEARCH_DEBOUNCE_MS,
+		pageSize: 100,
+		resetOnNewSearchQuery: false
+	}), [channel]);
+	const { members } = useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
+	const [searchInputResetKey, setSearchInputResetKey] = useState(0);
+	const resetMembersSearch = useCallback(() => {
+		membersSearchSource.cancelScheduledQuery();
+		setSearchInputResetKey((currentResetKey) => currentResetKey + 1);
+		membersSearchSource.resetState();
+		membersSearchSource.activate();
+		membersSearchSource.search("");
+	}, [membersSearchSource]);
+	const handleSearchChange = useCallback((query) => {
+		membersSearchSource.search(query.trim());
+	}, [membersSearchSource]);
+	useEffect(() => {
+		if (!hasMembers) return;
+		membersSearchSource.activate();
+		membersSearchSource.search("");
+	}, [hasMembers, membersSearchSource]);
+	useEffect(() => () => {
+		membersSearchSource.cancelScheduledQuery();
+	}, [membersSearchSource]);
+	return {
+		displayedMembers: members ?? fallbackMembers,
+		handleSearchChange,
+		hasMembers,
+		membersSearchSource,
+		resetMembersSearch,
+		searchInputResetKey
+	};
+};
+//#endregion
+export { useChannelMembersSearch };
+
+//# sourceMappingURL=useChannelMembersSearch.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMembersSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMembersSearch.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMembersSearch.ts"],"sourcesContent":["import {\n  type ChannelMemberResponse,\n  ChannelMemberSearchSource,\n  type SearchSourceState,\n} from 'stream-chat';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useStateStore } from '../../../../store';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { CHANNEL_MEMBERS_QUERY_LIMIT } from './ChannelMembersView.utils';\nimport { useChannelMemberCount } from './useChannelMemberCount';\n\nconst MEMBERS_SEARCH_DEBOUNCE_MS = 300;\n\nconst membersSearchSourceItemsStateSelector = (\n  state: SearchSourceState<ChannelMemberResponse>,\n) => ({\n  members: state.items,\n});\n\nexport const useChannelMembersSearch = () => {\n  const { channel } = useChannelDetailContext();\n  const fallbackMembers = useMemo(\n    () => Object.values(channel.state?.members ?? {}),\n    [channel],\n  );\n  // Skip activating/searching only when the server explicitly reports zero\n  // members. `member_count` being undefined is treated as \"has members\" so we\n  // never suppress loading on incomplete channel data. The count is tracked\n  // reactively so a channel that gains its first member activates the list\n  // without a remount.\n  const memberCount = useChannelMemberCount(channel);\n  const hasMembers = channel.data?.member_count === undefined || memberCount !== 0;\n  const membersSearchSource = useMemo(\n    () =>\n      new ChannelMemberSearchSource(channel, {\n        allowEmptySearchString: true,\n        debounceMs: MEMBERS_SEARCH_DEBOUNCE_MS,\n        pageSize: CHANNEL_MEMBERS_QUERY_LIMIT,\n        resetOnNewSearchQuery: false,\n      }),\n    [channel],\n  );\n  const { members } = useStateStore(\n    membersSearchSource.state,\n    membersSearchSourceItemsStateSelector,\n  );\n  const [searchInputResetKey, setSearchInputResetKey] = useState(0);\n\n  const resetMembersSearch = useCallback(() => {\n    membersSearchSource.cancelScheduledQuery();\n    setSearchInputResetKey((currentResetKey) => currentResetKey + 1);\n    membersSearchSource.resetState();\n    membersSearchSource.activate();\n    void membersSearchSource.search('');\n  }, [membersSearchSource]);\n\n  const handleSearchChange = useCallback(\n    (query: string) => {\n      membersSearchSource.search(query.trim());\n    },\n    [membersSearchSource],\n  );\n\n  useEffect(() => {\n    if (!hasMembers) return;\n    membersSearchSource.activate();\n    void membersSearchSource.search('');\n  }, [hasMembers, membersSearchSource]);\n\n  useEffect(\n    () => () => {\n      membersSearchSource.cancelScheduledQuery();\n    },\n    [membersSearchSource],\n  );\n\n  return {\n    displayedMembers: members ?? fallbackMembers,\n    handleSearchChange,\n    hasMembers,\n    membersSearchSource,\n    resetMembersSearch,\n    searchInputResetKey,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAM,6BAA6B;AAEnC,IAAM,yCACJ,WACI,EACJ,SAAS,MAAM,MACjB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,kBAAkB,cAChB,OAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC,GAChD,CAAC,OAAO,CACV;CAMA,MAAM,cAAc,sBAAsB,OAAO;CACjD,MAAM,aAAa,QAAQ,MAAM,iBAAiB,KAAA,KAAa,gBAAgB;CAC/E,MAAM,sBAAsB,cAExB,IAAI,0BAA0B,SAAS;EACrC,wBAAwB;EACxB,YAAY;EACZ,UAAA;EACA,uBAAuB;CACzB,CAAC,GACH,CAAC,OAAO,CACV;CACA,MAAM,EAAE,YAAY,cAClB,oBAAoB,OACpB,qCACF;CACA,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,CAAC;CAEhE,MAAM,qBAAqB,kBAAkB;EAC3C,oBAAoB,qBAAqB;EACzC,wBAAwB,oBAAoB,kBAAkB,CAAC;EAC/D,oBAAoB,WAAW;EAC/B,oBAAoB,SAAS;EAC7B,oBAAyB,OAAO,EAAE;CACpC,GAAG,CAAC,mBAAmB,CAAC;CAExB,MAAM,qBAAqB,aACxB,UAAkB;EACjB,oBAAoB,OAAO,MAAM,KAAK,CAAC;CACzC,GACA,CAAC,mBAAmB,CACtB;CAEA,gBAAgB;EACd,IAAI,CAAC,YAAY;EACjB,oBAAoB,SAAS;EAC7B,oBAAyB,OAAO,EAAE;CACpC,GAAG,CAAC,YAAY,mBAAmB,CAAC;CAEpC,sBACc;EACV,oBAAoB,qBAAqB;CAC3C,GACA,CAAC,mBAAmB,CACtB;CAEA,OAAO;EACL,kBAAkB,WAAW;EAC7B;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.mjs

@@ -0,0 +1,25 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
+var PinnedMessagesEmptyList = () => {
+	const { IconPin } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__pinned-messages-view__empty-state",
+		children: [/* @__PURE__ */ jsx(IconPin, { className: "str-chat__channel-detail__pinned-messages-view__empty-state__icon" }), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__pinned-messages-view__empty-state__content",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__pinned-messages-view__empty-state__title",
+				children: t("channelDetail.pinnedMessagesEmpty.noPinnedMessages.text", "No pinned messages")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__pinned-messages-view__empty-state__description",
+				children: t("channelDetail.pinnedMessagesEmpty.pinMessageSee.text", "Pin a message to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+export { PinnedMessagesEmptyList };
+
+//# sourceMappingURL=PinnedMessagesEmptyList.mjs.map

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedMessagesEmptyList.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons, useTranslationContext } from '../../../../context';\n\nexport const PinnedMessagesEmptyList = () => {\n  const { IconPin } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view__empty-state'>\n      <IconPin className='str-chat__channel-detail__pinned-messages-view__empty-state__icon' />\n      <div className='str-chat__channel-detail__pinned-messages-view__empty-state__content'>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__title'>\n          {t(\n            'channelDetail.pinnedMessagesEmpty.noPinnedMessages.text',\n            'No pinned messages',\n          )}\n        </p>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__description'>\n          {t(\n            'channelDetail.pinnedMessagesEmpty.pinMessageSee.text',\n            'Pin a message to see it here',\n          )}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,YAAY,yBAAyB;CAC7C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD,EAAS,WAAU,oEAAqE,CAAA,GACxF,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,2DACA,oBACF;GACC,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,wDACA,8BACF;GACC,CAAA,CACA;IACF;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.mjs

@@ -0,0 +1,143 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { getDateString } from "../../../../i18n/utils.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { getUserDisplayName } from "../ChannelMembersView/ChannelMembersView.utils.mjs";
+import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
+import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
+import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useChatViewNavigation } from "../../../SlotLayout/ChatViewNavigationContext.mjs";
+import { PinnedMessagesEmptyList } from "./PinnedMessagesEmptyList.mjs";
+import { usePinnedMessagesSearch } from "./usePinnedMessagesSearch.mjs";
+import { useCallback, useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx
+var computeItemKey = (_, message) => message.id;
+/**
+* A wire timestamp as an ISO string, for `getDateString` and the `dateTime` attribute. `convertTimestampToDate`
+* rather than `new Date`: a nanosecond value is out of Date's range.
+*/
+var normalizeTimestamp = (timestamp) => timestamp == null ? void 0 : convertTimestampToDate(timestamp)?.toISOString();
+var getPinnedMessagePreview = (message, t) => {
+	const text = message.text?.trim();
+	if (text) return text;
+	const attachment = message.attachments?.[0];
+	return attachment?.title || attachment?.text || attachment?.fallback || attachment?.type || t("channelDetail.pinnedMessagesView.pinnedMessage.label", "Pinned message");
+};
+var PinnedMessageDate = ({ message }) => {
+	const { t, tDateTimeParser } = useTranslationContext();
+	const normalizedTimestamp = normalizeTimestamp(message.created_at);
+	const when = useMemo(() => getDateString({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp.ChannelDetailPinnedMessageTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ jsx("time", {
+		className: "str-chat__channel-detail__pinned-messages-view__list-item__date",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+};
+var PinnedMessagesViewItem = ({ message, onSelect }) => {
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const displayName = getUserDisplayName(message.user ?? void 0);
+	const LeadingSlot = useMemo(() => function MessageAuthorAvatar() {
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user: message.user ?? void 0 }),
+			size: "md"
+		});
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		message.user
+	]);
+	const TrailingSlot = useMemo(() => function MessageDate() {
+		return /* @__PURE__ */ jsx(PinnedMessageDate, { message });
+	}, [message]);
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			className: "str-chat__channel-detail__pinned-messages-view__list-item",
+			onClick: () => onSelect(message)
+		}), [message, onSelect]),
+		subtitle: getPinnedMessagePreview(message, t),
+		subtitleClassName: "str-chat__channel-detail__pinned-messages-view__list-item__message-preview",
+		title: displayName,
+		TrailingSlot
+	});
+};
+var PinnedMessagesView = ({ searchSource }) => {
+	const { open } = useChatViewNavigation();
+	const { t } = useTranslationContext();
+	const { close } = useModalContext();
+	const { channel } = useChannelDetailContext();
+	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
+	const handleSelectMessage = useCallback((message) => {
+		open({
+			key: channel.cid ?? void 0,
+			kind: "channel",
+			source: channel
+		});
+		channel.messagePaginator.jumpToMessage(message.id);
+		close();
+	}, [
+		channel,
+		close,
+		open
+	]);
+	const renderItem = useCallback((_, message) => /* @__PURE__ */ jsx(PinnedMessagesViewItem, {
+		message,
+		onSelect: handleSelectMessage
+	}), [handleSelectMessage]);
+	const EmptyPlaceholder = useMemo(() => function PinnedMessagesEmptyPlaceholder() {
+		if (!hasPinnedMessages) return /* @__PURE__ */ jsx(PinnedMessagesEmptyList, {});
+		if (hasSearchResultsLoaded) return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("channelDetail.pinnedMessagesView.noMessagesFound.text", "No messages found") });
+		return null;
+	}, [
+		hasPinnedMessages,
+		hasSearchResultsLoaded,
+		t
+	]);
+	const Footer = useMemo(() => function PinnedMessagesListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: pinnedMessagesSearchSource });
+	}, [pinnedMessagesSearchSource]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__pinned-messages-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			description: t("channelDetail.pinnedMessagesView.browsePinnedMessages.description", "Browse pinned messages"),
+			title: t("channelDetail.pinnedMessagesView.pinnedMessages.title", "Pinned messages")
+		}), /* @__PURE__ */ jsxs(Prompt.Body, {
+			className: "str-chat__channel-detail__pinned-messages-view__body",
+			children: [hasPinnedMessages && /* @__PURE__ */ jsx(ChannelDetailSearchInput, { onSearchChange: handleSearchChange }), /* @__PURE__ */ jsx(VirtualizedList, {
+				className: "str-chat__channel-detail__pinned-messages-view__list",
+				computeItemKey,
+				data: displayedMessages,
+				EmptyPlaceholder,
+				Footer,
+				itemContent: renderItem,
+				loadNext: hasPinnedMessages ? pinnedMessagesSearchSource.search : void 0
+			})]
+		})]
+	});
+};
+//#endregion
+export { PinnedMessagesView };
+
+//# sourceMappingURL=PinnedMessagesView.mjs.map

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedMessagesView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx"],"sourcesContent":["import type { LocalMessage, MessageResponse, MessageSearchSource } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { useChatViewNavigation } from '../../../SlotLayout';\nimport { getDateString } from '../../../../i18n/utils';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { PinnedMessagesEmptyList } from './PinnedMessagesEmptyList';\nimport { usePinnedMessagesSearch } from './usePinnedMessagesSearch';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { convertTimestampToDate } from 'stream-chat';\n\ntype PinnedMessage = MessageResponse | LocalMessage;\n\nconst computeItemKey = (_: number, message: PinnedMessage) => message.id;\n\n/**\n * A wire timestamp as an ISO string, for `getDateString` and the `dateTime` attribute. `convertTimestampToDate`\n * rather than `new Date`: a nanosecond value is out of Date's range.\n */\nconst normalizeTimestamp = (timestamp: PinnedMessage['created_at']) =>\n  timestamp == null ? undefined : convertTimestampToDate(timestamp)?.toISOString();\n\nconst getPinnedMessagePreview = (\n  message: PinnedMessage,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  const text = message.text?.trim();\n  if (text) return text;\n\n  const attachment = message.attachments?.[0];\n  const attachmentPreview =\n    attachment?.title || attachment?.text || attachment?.fallback || attachment?.type;\n\n  return (\n    attachmentPreview ||\n    t('channelDetail.pinnedMessagesView.pinnedMessage.label', 'Pinned message')\n  );\n};\n\nconst PinnedMessageDate = ({ message }: { message: PinnedMessage }) => {\n  const { t, tDateTimeParser } = useTranslationContext();\n  const normalizedTimestamp = normalizeTimestamp(message.created_at);\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp.ChannelDetailPinnedMessageTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time\n      className='str-chat__channel-detail__pinned-messages-view__list-item__date'\n      dateTime={normalizedTimestamp}\n    >\n      {when}\n    </time>\n  );\n};\n\nconst PinnedMessagesViewItem = ({\n  message,\n  onSelect,\n}: {\n  message: PinnedMessage;\n  onSelect: (message: PinnedMessage) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(message.user ?? undefined);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MessageAuthorAvatar() {\n        const displayInfo = extractDisplayInfo({ user: message.user ?? undefined });\n\n        return <Avatar {...displayInfo} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, message.user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MessageDate() {\n        return <PinnedMessageDate message={message} />;\n      },\n    [message],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      className: 'str-chat__channel-detail__pinned-messages-view__list-item',\n      onClick: () => onSelect(message),\n    }),\n    [message, onSelect],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPinnedMessagePreview(message, t)}\n      subtitleClassName='str-chat__channel-detail__pinned-messages-view__list-item__message-preview'\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nexport type PinnedMessagesViewProps = SectionNavigatorSectionContentProps & {\n  /** Custom message search source for pinned messages. */\n  searchSource?: MessageSearchSource;\n};\n\nexport const PinnedMessagesView: React.ComponentType<PinnedMessagesViewProps> = ({\n  searchSource,\n}) => {\n  const { open } = useChatViewNavigation();\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const { channel } = useChannelDetailContext();\n  const {\n    displayedMessages,\n    handleSearchChange,\n    hasPinnedMessages,\n    hasSearchResultsLoaded,\n    pinnedMessagesSearchSource,\n  } = usePinnedMessagesSearch({ searchSource });\n\n  const handleSelectMessage = useCallback(\n    (message: PinnedMessage) => {\n      // Selection is one navigation model: open the channel into a layout slot.\n      open({ key: channel.cid ?? undefined, kind: 'channel', source: channel });\n      // MERGE-RECONCILE: the deleted ChannelActionContext.jumpToMessage was replaced by the\n      // channel's messagePaginator (PR #2909 / stream-chat message-paginator API).\n      void channel.messagePaginator.jumpToMessage(message.id);\n      close();\n    },\n    [channel, close, open],\n  );\n\n  const renderItem = useCallback(\n    (_: number, message: PinnedMessage) => (\n      <PinnedMessagesViewItem message={message} onSelect={handleSelectMessage} />\n    ),\n    [handleSelectMessage],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function PinnedMessagesEmptyPlaceholder() {\n        if (!hasPinnedMessages) return <PinnedMessagesEmptyList />;\n        if (hasSearchResultsLoaded)\n          return (\n            <ChannelDetailEmptyList>\n              {t(\n                'channelDetail.pinnedMessagesView.noMessagesFound.text',\n                'No messages found',\n              )}\n            </ChannelDetailEmptyList>\n          );\n        return null;\n      },\n    [hasPinnedMessages, hasSearchResultsLoaded, t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function PinnedMessagesListFooter() {\n        return (\n          <ChannelDetailListLoadingIndicator searchSource={pinnedMessagesSearchSource} />\n        );\n      },\n    [pinnedMessagesSearchSource],\n  );\n\n  return (\n    <div className='str-chat__channel-detail__pinned-messages-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={t(\n          'channelDetail.pinnedMessagesView.browsePinnedMessages.description',\n          'Browse pinned messages',\n        )}\n        title={t(\n          'channelDetail.pinnedMessagesView.pinnedMessages.title',\n          'Pinned messages',\n        )}\n      />\n      <Prompt.Body className='str-chat__channel-detail__pinned-messages-view__body'>\n        {hasPinnedMessages && (\n          <ChannelDetailSearchInput onSearchChange={handleSearchChange} />\n        )}\n        <VirtualizedList\n          className='str-chat__channel-detail__pinned-messages-view__list'\n          computeItemKey={computeItemKey}\n          data={displayedMessages}\n          EmptyPlaceholder={EmptyPlaceholder}\n          Footer={Footer}\n          itemContent={renderItem}\n          loadNext={hasPinnedMessages ? pinnedMessagesSearchSource.search : undefined}\n        />\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.mjs

@@ -0,0 +1,16 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts
+var selector = (state) => ({ count: state.items?.length ?? 0 });
+/**
+* Reactive count of the channel's loaded pinned messages, sourced from
+* `channel.pinnedMessagesPaginator`. The paginator is kept current by the SDK's channel event
+* handlers (pin/unpin/delete/truncate); `useStateStore` re-renders on every change.
+*/
+var usePinnedMessagesCount = (channel) => {
+	const { count } = useStateStore(channel.pinnedMessagesPaginator.state, selector);
+	return count;
+};
+//#endregion
+export { usePinnedMessagesCount };
+
+//# sourceMappingURL=usePinnedMessagesCount.mjs.map