stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,91 @@
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.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("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("Browse channel members"),
+			goBack: activeModeDescriptor ? goBack : void 0,
+			title: ActiveModeTitle ? /* @__PURE__ */ jsx(ActiveModeTitle, {}) : t("{{ count }} members", { count: memberCount }),
+			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('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={activeModeDescriptor ? undefined : t('Browse channel members')}\n        goBack={activeModeDescriptor ? goBack : undefined}\n        title={\n          ActiveModeTitle ? (\n            <ActiveModeTitle />\n          ) : (\n            t('{{ count }} members', { count: memberCount })\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,aAAa,EAAI,CAAA;AAC/B;;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,aAAa,uBAAuB,KAAA,IAAY,EAAE,wBAAwB;GAC1E,QAAQ,uBAAuB,SAAS,KAAA;GACxC,OACE,kBACE,oBAAC,iBAAD,CAAkB,CAAA,IAElB,EAAE,uBAAuB,EAAE,OAAO,YAAY,CAAC;GAGnD,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?.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 || user?.username || user?.id || '';\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,QAAQ,MAAM,YAAY,MAAM,MAAM;AAE9C,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 { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.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("No pinned messages")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__pinned-messages-view__empty-state__description",
+				children: t("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\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('No pinned messages')}\n        </p>\n        <p className='str-chat__channel-detail__pinned-messages-view__empty-state__description'>\n          {t('Pin a message to see it here')}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,YAAY,yBAAyB;CAE7C,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,EAAE,oBAAoB;GACtB,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EAAE,8BAA8B;GAChC,CAAA,CACA;IACF;;AAET"}

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

@@ -0,0 +1,140 @@
+import { useChannelActionContext } from "../../../../context/ChannelActionContext.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { getDateString, isDate } from "../../../../i18n/utils.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.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 { PinnedMessagesEmptyList } from "./PinnedMessagesEmptyList.mjs";
+import { usePinnedMessagesSearch } from "./usePinnedMessagesSearch.mjs";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx
+var computeItemKey = (_, message) => message.id;
+var normalizeTimestamp = (timestamp) => {
+	if (!timestamp) return void 0;
+	return isDate(timestamp) ? timestamp.toISOString() : timestamp;
+};
+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("Pinned message");
+};
+var PinnedMessageDate = ({ message }) => {
+	const { t, tDateTimeParser } = useTranslationContext("PinnedMessageDate");
+	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 { setActiveChannel } = useChatContext();
+	const { t } = useTranslationContext();
+	const { close } = useModalContext();
+	const { jumpToMessage } = useChannelActionContext();
+	const { channel } = useChannelDetailContext();
+	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
+	const handleSelectMessage = useCallback((message) => {
+		setActiveChannel(channel);
+		jumpToMessage(message.id);
+		close();
+	}, [
+		channel,
+		close,
+		jumpToMessage,
+		setActiveChannel
+	]);
+	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("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("Browse pinned messages"),
+			title: t("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  useChannelActionContext,\n  useChatContext,\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { getDateString, isDate } 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';\n\ntype PinnedMessage = MessageResponse | LocalMessage;\n\nconst computeItemKey = (_: number, message: PinnedMessage) => message.id;\n\nconst normalizeTimestamp = (timestamp: PinnedMessage['created_at']) => {\n  if (!timestamp) return undefined;\n  return isDate(timestamp) ? timestamp.toISOString() : timestamp;\n};\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 attachmentPreview || t('Pinned message');\n};\n\nconst PinnedMessageDate = ({ message }: { message: PinnedMessage }) => {\n  const { t, tDateTimeParser } = useTranslationContext('PinnedMessageDate');\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 { setActiveChannel } = useChatContext();\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  // fixme: it is not right to couple the ChannelDetail view with Channel component. We need to have access to channel.messagePaginator.jumpToMessage()\n  const { jumpToMessage } = useChannelActionContext();\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      setActiveChannel(channel);\n      jumpToMessage(message.id);\n      close();\n    },\n    [channel, close, jumpToMessage, setActiveChannel],\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>{t('No messages found')}</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('Browse pinned messages')}\n        title={t('Pinned messages')}\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":";;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAM,kBAAkB,GAAW,YAA2B,QAAQ;AAEtE,IAAM,sBAAsB,cAA2C;CACrE,IAAI,CAAC,WAAW,OAAO,KAAA;CACvB,OAAO,OAAO,SAAS,IAAI,UAAU,YAAY,IAAI;AACvD;AAEA,IAAM,2BACJ,SACA,MACG;CACH,MAAM,OAAO,QAAQ,MAAM,KAAK;CAChC,IAAI,MAAM,OAAO;CAEjB,MAAM,aAAa,QAAQ,cAAc;CAIzC,OAFE,YAAY,SAAS,YAAY,QAAQ,YAAY,YAAY,YAAY,QAEnD,EAAE,gBAAgB;AAChD;AAEA,IAAM,qBAAqB,EAAE,cAA0C;CACrE,MAAM,EAAE,GAAG,oBAAoB,sBAAsB,mBAAmB;CACxE,MAAM,sBAAsB,mBAAmB,QAAQ,UAAU;CAEjE,MAAM,OAAO,cAET,cAAc;EACZ,kBAAkB;EAClB;EACA;EACA,yBAAyB;CAC3B,CAAC,GACH;EAAC;EAAqB;EAAG;CAAe,CAC1C;CAEA,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,QAAD;EACE,WAAU;EACV,UAAU;YAET;CACG,CAAA;AAEV;AAEA,IAAM,0BAA0B,EAC9B,SACA,eAII;CACJ,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CACtB,MAAM,cAAc,mBAAmB,QAAQ,QAAQ,KAAA,CAAS;CAEhE,MAAM,cAAc,cAEhB,SAAS,sBAAsB;EAG7B,OAAO,oBAAC,UAAD;GAAQ,GAFK,qBAAmB,EAAE,MAAM,QAAQ,QAAQ,KAAA,EAAU,CAEtD;GAAa,MAAK;EAAM,CAAA;CAC7C,GACF;EAAC;EAAQ;EAAoB,QAAQ;CAAI,CAC3C;CAEA,MAAM,eAAe,cAEjB,SAAS,cAAc;EACrB,OAAO,oBAAC,mBAAD,EAA4B,QAAU,CAAA;CAC/C,GACF,CAAC,OAAO,CACV;CAUA,OACE,oBAAC,gBAAD;EACe;EACb,aAAY;EACD,WAZG,eACT;GACL,WAAW;GACX,eAAe,SAAS,OAAO;EACjC,IACA,CAAC,SAAS,QAAQ,CAOL;EACX,UAAU,wBAAwB,SAAS,CAAC;EAC5C,mBAAkB;EAClB,OAAO;EACO;CACf,CAAA;AAEL;AAOA,IAAa,sBAAoE,EAC/E,mBACI;CACJ,MAAM,EAAE,qBAAqB,eAAe;CAC5C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAElC,MAAM,EAAE,kBAAkB,wBAAwB;CAClD,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EACJ,mBACA,oBACA,mBACA,wBACA,+BACE,wBAAwB,EAAE,aAAa,CAAC;CAE5C,MAAM,sBAAsB,aACzB,YAA2B;EAC1B,iBAAiB,OAAO;EACxB,cAAc,QAAQ,EAAE;EACxB,MAAM;CACR,GACA;EAAC;EAAS;EAAO;EAAe;CAAgB,CAClD;CAEA,MAAM,aAAa,aAChB,GAAW,YACV,oBAAC,wBAAD;EAAiC;EAAS,UAAU;CAAsB,CAAA,GAE5E,CAAC,mBAAmB,CACtB;CAEA,MAAM,mBAAmB,cAErB,SAAS,iCAAiC;EACxC,IAAI,CAAC,mBAAmB,OAAO,oBAAC,yBAAD,CAA0B,CAAA;EACzD,IAAI,wBACF,OACE,oBAAC,wBAAD,EAAA,UAAyB,EAAE,mBAAmB,EAA0B,CAAA;EAE5E,OAAO;CACT,GACF;EAAC;EAAmB;EAAwB;CAAC,CAC/C;CAEA,MAAM,SAAS,cAEX,SAAS,2BAA2B;EAClC,OACE,oBAAC,mCAAD,EAAmC,cAAc,2BAA6B,CAAA;CAElF,GACF,CAAC,0BAA0B,CAC7B;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,aAAa,EAAE,wBAAwB;GACvC,OAAO,EAAE,iBAAiB;EAC3B,CAAA,GACD,qBAAC,OAAO,MAAR;GAAa,WAAU;aAAvB,CACG,qBACC,oBAAC,0BAAD,EAA0B,gBAAgB,mBAAqB,CAAA,GAEjE,oBAAC,iBAAD;IACE,WAAU;IACM;IAChB,MAAM;IACY;IACV;IACR,aAAa;IACb,UAAU,oBAAoB,2BAA2B,SAAS,KAAA;GACnE,CAAA,CACU;IACV;;AAET"}

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

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts
+var PINNED_MESSAGES_EVENTS = [
+	"message.new",
+	"message.updated",
+	"message.deleted",
+	"message.undeleted"
+];
+var getPinnedMessagesCount = (channel) => channel.state?.pinnedMessages?.length ?? 0;
+/** Reactive count of the channel's pinned messages derived from channel state. */
+var usePinnedMessagesCount = (channel) => {
+	const [pinnedMessagesCount, setPinnedMessagesCount] = useState(() => getPinnedMessagesCount(channel));
+	useEffect(() => {
+		const syncPinnedMessagesCount = () => setPinnedMessagesCount(getPinnedMessagesCount(channel));
+		syncPinnedMessagesCount();
+		const subscriptions = PINNED_MESSAGES_EVENTS.map((event) => channel.on(event, syncPinnedMessagesCount));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return pinnedMessagesCount;
+};
+//#endregion
+export { usePinnedMessagesCount };
+
+//# sourceMappingURL=usePinnedMessagesCount.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMessagesCount.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\n// stream-chat keeps channel.state.pinnedMessages current on these events (see\n// channel.ts `_handleChannelEvent` -> add/removePinnedMessage), but mutating that\n// array does not re-render React. Subscribing here re-reads the count so the view\n// re-renders — and re-reads channel.state directly — on every pin/unpin, not only\n// when the channel gains its first or loses its last pinned message.\nconst PINNED_MESSAGES_EVENTS = [\n  'message.new',\n  'message.updated',\n  'message.deleted',\n  'message.undeleted',\n] as const;\n\nconst getPinnedMessagesCount = (channel: Channel) =>\n  channel.state?.pinnedMessages?.length ?? 0;\n\n/** Reactive count of the channel's pinned messages derived from channel state. */\nexport const usePinnedMessagesCount = (channel: Channel) => {\n  const [pinnedMessagesCount, setPinnedMessagesCount] = useState(() =>\n    getPinnedMessagesCount(channel),\n  );\n\n  useEffect(() => {\n    const syncPinnedMessagesCount = () =>\n      setPinnedMessagesCount(getPinnedMessagesCount(channel));\n\n    syncPinnedMessagesCount();\n\n    const subscriptions = PINNED_MESSAGES_EVENTS.map((event) =>\n      channel.on(event, syncPinnedMessagesCount),\n    );\n\n    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n  }, [channel]);\n\n  return pinnedMessagesCount;\n};\n"],"mappings":";;AAQA,IAAM,yBAAyB;CAC7B;CACA;CACA;CACA;AACF;AAEA,IAAM,0BAA0B,YAC9B,QAAQ,OAAO,gBAAgB,UAAU;;AAG3C,IAAa,0BAA0B,YAAqB;CAC1D,MAAM,CAAC,qBAAqB,0BAA0B,eACpD,uBAAuB,OAAO,CAChC;CAEA,gBAAgB;EACd,MAAM,gCACJ,uBAAuB,uBAAuB,OAAO,CAAC;EAExD,wBAAwB;EAExB,MAAM,gBAAgB,uBAAuB,KAAK,UAChD,QAAQ,GAAG,OAAO,uBAAuB,CAC3C;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

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

@@ -0,0 +1,68 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { usePinnedMessagesCount } from "./usePinnedMessagesCount.mjs";
+import { useCallback, useEffect, useMemo } from "react";
+import { MessageSearchSource } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts
+var PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;
+var PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;
+var pinnedMessagesSearchSourceItemsStateSelector = (state) => ({ messages: state.items });
+var usePinnedMessagesSearch = ({ searchSource } = {}) => {
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const pinnedMessagesSearchSource = useMemo(() => {
+		const source = searchSource ?? new MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			debounceMs: PINNED_MESSAGES_SEARCH_DEBOUNCE_MS,
+			pageSize: PINNED_MESSAGES_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		}, { messageSearch: { initialFilterConfig: { text: {
+			enabled: true,
+			generate: ({ searchQuery }) => searchQuery ? { text: { $autocomplete: searchQuery } } : null
+		} } } });
+		if (!searchSource) {
+			source.messageSearchChannelFilters = { cid: channel.cid };
+			source.messageSearchFilters = { pinned: true };
+		}
+		return source;
+	}, [
+		channel.cid,
+		client,
+		searchSource
+	]);
+	const { messages } = useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
+	useEffect(() => {
+		pinnedMessagesSearchSource.activate();
+		return () => {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+		};
+	}, [pinnedMessagesSearchSource]);
+	const hasPinnedMessages = usePinnedMessagesCount(channel) > 0;
+	useEffect(() => {
+		if (!hasPinnedMessages) return;
+		pinnedMessagesSearchSource.search("");
+	}, [hasPinnedMessages, pinnedMessagesSearchSource]);
+	const handleSearchChange = useCallback((query) => {
+		const trimmedQuery = query.trim();
+		if (!trimmedQuery) {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+			pinnedMessagesSearchSource.resetState();
+			pinnedMessagesSearchSource.activate();
+			pinnedMessagesSearchSource.search("");
+			return;
+		}
+		pinnedMessagesSearchSource.search(trimmedQuery);
+	}, [pinnedMessagesSearchSource]);
+	return {
+		displayedMessages: messages ?? [],
+		handleSearchChange,
+		hasPinnedMessages,
+		hasSearchResultsLoaded: Array.isArray(messages),
+		pinnedMessagesSearchSource
+	};
+};
+//#endregion
+export { usePinnedMessagesSearch };
+
+//# sourceMappingURL=usePinnedMessagesSearch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMessagesSearch.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts"],"sourcesContent":["import {\n  type LocalMessage,\n  type MessageResponse,\n  MessageSearchSource,\n  type SearchSourceState,\n} from 'stream-chat';\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { useChatContext } from '../../../../context';\nimport { useStateStore } from '../../../../store';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { usePinnedMessagesCount } from './usePinnedMessagesCount';\n\nconst PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;\nconst PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;\n\nconst pinnedMessagesSearchSourceItemsStateSelector = (\n  state: SearchSourceState<MessageResponse>,\n) => ({\n  messages: state.items,\n});\n\nexport type UsePinnedMessagesSearchParams = {\n  /**\n   * Custom message search source for pinned messages. When provided it is used\n   * as-is — its filters and sort are respected, never overridden.\n   */\n  searchSource?: MessageSearchSource;\n};\n\nexport const usePinnedMessagesSearch = ({\n  searchSource,\n}: UsePinnedMessagesSearchParams = {}) => {\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const pinnedMessagesSearchSource = useMemo(() => {\n    const source =\n      searchSource ??\n      new MessageSearchSource(\n        client,\n        {\n          allowEmptySearchString: true,\n          debounceMs: PINNED_MESSAGES_SEARCH_DEBOUNCE_MS,\n          pageSize: PINNED_MESSAGES_SEARCH_PAGE_SIZE,\n          resetOnNewSearchQuery: false,\n        },\n        {\n          messageSearch: {\n            initialFilterConfig: {\n              text: {\n                enabled: true,\n                generate: ({ searchQuery }) =>\n                  searchQuery\n                    ? {\n                        text: { $autocomplete: searchQuery },\n                      }\n                    : null,\n              },\n            },\n          },\n        },\n      );\n\n    // Only configure a source we own; a provided source keeps its own filters\n    // and sort.\n    if (!searchSource) {\n      source.messageSearchChannelFilters = { cid: channel.cid };\n      source.messageSearchFilters = { pinned: true };\n    }\n\n    return source;\n  }, [channel.cid, client, searchSource]);\n\n  const { messages } = useStateStore(\n    pinnedMessagesSearchSource.state,\n    pinnedMessagesSearchSourceItemsStateSelector,\n  );\n\n  useEffect(() => {\n    pinnedMessagesSearchSource.activate();\n\n    return () => {\n      pinnedMessagesSearchSource.cancelScheduledQuery();\n    };\n  }, [pinnedMessagesSearchSource]);\n\n  // Query-independent flag, reactive to pin/unpin. The search source is the sole\n  // source of the displayed list, but it does not know whether the channel has\n  // pinned messages until a query resolves; this gates the search input, the\n  // initial load and the empty-state choice (the channel can have pinned messages\n  // that the current query matches none of).\n  const hasPinnedMessages = usePinnedMessagesCount(channel) > 0;\n\n  // The list is loaded and paginated entirely by the search source. Load the\n  // first page once the channel is known to have pinned messages — gating on\n  // hasPinnedMessages also loads page one when the channel gains its first pin\n  // during the session.\n  useEffect(() => {\n    if (!hasPinnedMessages) return;\n    void pinnedMessagesSearchSource.search('');\n  }, [hasPinnedMessages, pinnedMessagesSearchSource]);\n\n  const handleSearchChange = useCallback(\n    (query: string) => {\n      const trimmedQuery = query.trim();\n\n      if (!trimmedQuery) {\n        // Clearing the query reloads the full pinned list from its first page.\n        pinnedMessagesSearchSource.cancelScheduledQuery();\n        pinnedMessagesSearchSource.resetState();\n        pinnedMessagesSearchSource.activate();\n        void pinnedMessagesSearchSource.search('');\n        return;\n      }\n\n      pinnedMessagesSearchSource.search(trimmedQuery);\n    },\n    [pinnedMessagesSearchSource],\n  );\n\n  return {\n    displayedMessages: (messages ?? []) as Array<MessageResponse | LocalMessage>,\n    handleSearchChange,\n    hasPinnedMessages,\n    hasSearchResultsLoaded: Array.isArray(messages),\n    pinnedMessagesSearchSource,\n  };\n};\n"],"mappings":";;;;;;;AAaA,IAAM,mCAAmC;AACzC,IAAM,qCAAqC;AAE3C,IAAM,gDACJ,WACI,EACJ,UAAU,MAAM,MAClB;AAUA,IAAa,2BAA2B,EACtC,iBACiC,CAAC,MAAM;CACxC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,6BAA6B,cAAc;EAC/C,MAAM,SACJ,gBACA,IAAI,oBACF,QACA;GACE,wBAAwB;GACxB,YAAY;GACZ,UAAU;GACV,uBAAuB;EACzB,GACA,EACE,eAAe,EACb,qBAAqB,EACnB,MAAM;GACJ,SAAS;GACT,WAAW,EAAE,kBACX,cACI,EACE,MAAM,EAAE,eAAe,YAAY,EACrC,IACA;EACR,EACF,EACF,EACF,CACF;EAIF,IAAI,CAAC,cAAc;GACjB,OAAO,8BAA8B,EAAE,KAAK,QAAQ,IAAI;GACxD,OAAO,uBAAuB,EAAE,QAAQ,KAAK;EAC/C;EAEA,OAAO;CACT,GAAG;EAAC,QAAQ;EAAK;EAAQ;CAAY,CAAC;CAEtC,MAAM,EAAE,aAAa,cACnB,2BAA2B,OAC3B,4CACF;CAEA,gBAAgB;EACd,2BAA2B,SAAS;EAEpC,aAAa;GACX,2BAA2B,qBAAqB;EAClD;CACF,GAAG,CAAC,0BAA0B,CAAC;CAO/B,MAAM,oBAAoB,uBAAuB,OAAO,IAAI;CAM5D,gBAAgB;EACd,IAAI,CAAC,mBAAmB;EACxB,2BAAgC,OAAO,EAAE;CAC3C,GAAG,CAAC,mBAAmB,0BAA0B,CAAC;CAElD,MAAM,qBAAqB,aACxB,UAAkB;EACjB,MAAM,eAAe,MAAM,KAAK;EAEhC,IAAI,CAAC,cAAc;GAEjB,2BAA2B,qBAAqB;GAChD,2BAA2B,WAAW;GACtC,2BAA2B,SAAS;GACpC,2BAAgC,OAAO,EAAE;GACzC;EACF;EAEA,2BAA2B,OAAO,YAAY;CAChD,GACA,CAAC,0BAA0B,CAC7B;CAEA,OAAO;EACL,mBAAoB,YAAY,CAAC;EACjC;EACA;EACA,wBAAwB,MAAM,QAAQ,QAAQ;EAC9C;CACF;AACF"}

package/dist/es/plugins/ChannelDetail/VirtualizedList/VirtualizedList.mjs

@@ -0,0 +1,42 @@
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Virtuoso } from "react-virtuoso";
+//#region src/plugins/ChannelDetail/VirtualizedList/VirtualizedList.tsx
+var VirtualizedListContent = forwardRef(function VirtualizedListContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__virtualized-list__content", className),
+		ref
+	});
+});
+/**
+* Thin wrapper around `react-virtuoso`'s `Virtuoso` for the simple,
+* append-only, flat lists used across the ChannelDetail views. It keeps the
+* call sites declarative (data + itemContent + empty/footer slots) and hides
+* the infinite-scroll wiring.
+*/
+var VirtualizedList = ({ className, computeItemKey, data, EmptyPlaceholder, Footer, itemContent, loadNext, virtuosoProps, ...rest }) => {
+	const atBottomStateChange = useCallback((atBottom) => {
+		if (atBottom) loadNext?.();
+	}, [loadNext]);
+	const components = useMemo(() => ({
+		EmptyPlaceholder,
+		Footer,
+		List: VirtualizedListContent
+	}), [EmptyPlaceholder, Footer]);
+	return /* @__PURE__ */ jsx(Virtuoso, {
+		atBottomStateChange,
+		className: clsx("str-chat__virtualized-list", className),
+		components,
+		computeItemKey,
+		data,
+		itemContent,
+		...rest,
+		...virtuosoProps
+	});
+};
+//#endregion
+export { VirtualizedList };
+
+//# sourceMappingURL=VirtualizedList.mjs.map

package/dist/es/plugins/ChannelDetail/VirtualizedList/VirtualizedList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.mjs","names":[],"sources":["../../../../../src/plugins/ChannelDetail/VirtualizedList/VirtualizedList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentType, ReactNode } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport type { ComputeItemKey, VirtuosoProps } from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\n\n// Wraps the virtualized item list so views can attach padding/spacing to a\n// stable class instead of reaching into Virtuoso's internal markup.\nconst VirtualizedListContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  function VirtualizedListContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        className={clsx('str-chat__virtualized-list__content', className)}\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type VirtualizedListProps<T> = {\n  /** Items to render. An empty array renders the `EmptyPlaceholder`. */\n  data: T[];\n  /** Renders a single item; do not add a React key, Virtuoso manages keys. */\n  itemContent: (index: number, item: T) => ReactNode;\n  'aria-label'?: string;\n  className?: string;\n  computeItemKey?: ComputeItemKey<T, unknown>;\n  /** Rendered in place of the list when `data` is empty. */\n  EmptyPlaceholder?: ComponentType;\n  /** Rendered below the items, e.g. a loading indicator for the next page. */\n  Footer?: ComponentType;\n  /** Called when the list is scrolled to the bottom to load the next page. */\n  loadNext?: () => void;\n  role?: string;\n  /** Escape hatch for passing additional props straight to Virtuoso. */\n  virtuosoProps?: VirtuosoProps<T, unknown>;\n};\n\n/**\n * Thin wrapper around `react-virtuoso`'s `Virtuoso` for the simple,\n * append-only, flat lists used across the ChannelDetail views. It keeps the\n * call sites declarative (data + itemContent + empty/footer slots) and hides\n * the infinite-scroll wiring.\n */\nexport const VirtualizedList = <T,>({\n  className,\n  computeItemKey,\n  data,\n  EmptyPlaceholder,\n  Footer,\n  itemContent,\n  loadNext,\n  virtuosoProps,\n  ...rest\n}: VirtualizedListProps<T>) => {\n  const atBottomStateChange = useCallback(\n    (atBottom: boolean) => {\n      if (atBottom) loadNext?.();\n    },\n    [loadNext],\n  );\n\n  const components = useMemo(\n    () => ({\n      EmptyPlaceholder,\n      Footer,\n      List: VirtualizedListContent,\n    }),\n    [EmptyPlaceholder, Footer],\n  );\n\n  return (\n    <Virtuoso\n      atBottomStateChange={atBottomStateChange}\n      className={clsx('str-chat__virtualized-list', className)}\n      components={components}\n      computeItemKey={computeItemKey}\n      data={data}\n      itemContent={itemContent}\n      {...rest}\n      {...virtuosoProps}\n    />\n  );\n};\n"],"mappings":";;;;;AAQA,IAAM,yBAAyB,WAC7B,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,uCAAuC,SAAS;EAC3D;CACN,CAAA;AAEL,CACF;;;;;;;AA2BA,IAAa,mBAAuB,EAClC,WACA,gBACA,MACA,kBACA,QACA,aACA,UACA,eACA,GAAG,WAC0B;CAC7B,MAAM,sBAAsB,aACzB,aAAsB;EACrB,IAAI,UAAU,WAAW;CAC3B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,eACV;EACL;EACA;EACA,MAAM;CACR,IACA,CAAC,kBAAkB,MAAM,CAC3B;CAEA,OACE,oBAAC,UAAD;EACuB;EACrB,WAAW,KAAK,8BAA8B,SAAS;EAC3C;EACI;EACV;EACO;EACb,GAAI;EACJ,GAAI;CACL,CAAA;AAEL"}