stream-chat-react 14.11.0 → 14.12.0

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.mjs

@@ -0,0 +1,76 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { ChannelAvatar } from "../../../../components/Avatar/ChannelAvatar.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { getMemberDisplayName } from "../ChannelMembersView/ChannelMembersView.utils.mjs";
+import { ChannelMemberActionProvider, defaultChannelMemberActionSet, useBaseChannelMemberActionSetFilter, useChannelMemberActionContext } from "./ChannelMemberActions.defaults.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx
+var getPresenceStatusText = (user, t) => {
+	if (user?.online) return t("Online");
+	if (user?.last_active) return t("Last seen {{ timestamp }}", { timestamp: t("timestamp/ChannelMembersLastActive", { timestamp: user.last_active }) });
+	return t("Offline");
+};
+var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberActionSet, member, onBack }) => {
+	const { t } = useTranslationContext();
+	const memberDisplayName = getMemberDisplayName(member);
+	const memberStatusText = getPresenceStatusText(member.user, t);
+	return /* @__PURE__ */ jsx(ChannelMemberActionProvider, {
+		value: useMemo(() => ({
+			member,
+			memberDisplayName,
+			targetUserId: member.user?.id || member.user_id
+		}), [member, memberDisplayName]),
+		children: /* @__PURE__ */ jsx(ChannelMemberDetailContent, {
+			channelMemberActionSet,
+			memberDisplayName,
+			memberStatusText,
+			onBack
+		})
+	});
+};
+var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, memberStatusText, onBack }) => {
+	const { close } = useModalContext();
+	const { t } = useTranslationContext();
+	const { Avatar = ChannelAvatar } = useComponentContext();
+	const { member } = useChannelMemberActionContext();
+	const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-member-detail-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			goBack: onBack,
+			title: t("Member detail")
+		}), /* @__PURE__ */ jsxs(Prompt.Body, {
+			className: "str-chat__channel-detail__channel-member-detail-view__body",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__profile",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					imageUrl: member.user?.image,
+					isOnline: member.user?.online,
+					size: "2xl",
+					userName: memberDisplayName
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__channel-detail__channel-member-detail-view__profile__details",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__title",
+						children: memberDisplayName
+					}), /* @__PURE__ */ jsx("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__connection-status",
+						children: memberStatusText
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__actions str-chat__form__switch-fieldset",
+				children: filteredActions.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type))
+			})]
+		})]
+	});
+};
+//#endregion
+export { ChannelMemberDetail };
+
+//# sourceMappingURL=ChannelMemberDetail.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMemberDetail.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport {\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelAvatar as DefaultChannelAvatar } from '../../../../components/Avatar';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  type ChannelMemberActionItem,\n  ChannelMemberActionProvider,\n  defaultChannelMemberActionSet,\n  useBaseChannelMemberActionSetFilter,\n  useChannelMemberActionContext,\n} from './ChannelMemberActions.defaults';\nimport { getMemberDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\n\nexport type ChannelMemberDetailProps = SectionNavigatorSectionContentProps & {\n  /** The member whose details are shown. Required — the view is always opened\n   * for a specific, selected member. */\n  member: ChannelMemberResponse;\n  channelMemberActionSet?: ChannelMemberActionItem[];\n  onBack?: () => void;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('Online');\n\n  if (user?.last_active) {\n    return t('Last seen {{ timestamp }}', {\n      timestamp: t('timestamp/ChannelMembersLastActive', {\n        timestamp: user.last_active,\n      }),\n    });\n  }\n\n  return t('Offline');\n};\n\nexport const ChannelMemberDetail = ({\n  channelMemberActionSet = defaultChannelMemberActionSet,\n  member,\n  onBack,\n}: ChannelMemberDetailProps) => {\n  const { t } = useTranslationContext();\n\n  const memberDisplayName = getMemberDisplayName(member);\n  const memberStatusText = getPresenceStatusText(member.user, t);\n\n  const actionContextValue = useMemo(\n    () => ({\n      member,\n      memberDisplayName,\n      targetUserId: member.user?.id || member.user_id,\n    }),\n    [member, memberDisplayName],\n  );\n\n  return (\n    <ChannelMemberActionProvider value={actionContextValue}>\n      <ChannelMemberDetailContent\n        channelMemberActionSet={channelMemberActionSet}\n        memberDisplayName={memberDisplayName}\n        memberStatusText={memberStatusText}\n        onBack={onBack}\n      />\n    </ChannelMemberActionProvider>\n  );\n};\n\ntype ChannelMemberDetailContentProps = {\n  channelMemberActionSet: ChannelMemberActionItem[];\n  memberDisplayName: string;\n  memberStatusText: string;\n  onBack?: () => void;\n};\n\nconst ChannelMemberDetailContent = ({\n  channelMemberActionSet,\n  memberDisplayName,\n  memberStatusText,\n  onBack,\n}: ChannelMemberDetailContentProps) => {\n  const { close } = useModalContext();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultChannelAvatar } = useComponentContext();\n  const { member } = useChannelMemberActionContext();\n\n  const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);\n\n  return (\n    <div className='str-chat__channel-detail__channel-member-detail-view'>\n      <SectionNavigatorHeader close={close} goBack={onBack} title={t('Member detail')} />\n      <Prompt.Body className='str-chat__channel-detail__channel-member-detail-view__body'>\n        <div className='str-chat__channel-detail__channel-member-detail-view__profile'>\n          <Avatar\n            imageUrl={member.user?.image}\n            isOnline={member.user?.online}\n            size='2xl'\n            userName={memberDisplayName}\n          />\n          <div className='str-chat__channel-detail__channel-member-detail-view__profile__details'>\n            <div className='str-chat__channel-detail__channel-member-detail-view__profile__details__title'>\n              {memberDisplayName}\n            </div>\n            <div className='str-chat__channel-detail__channel-member-detail-view__profile__details__connection-status'>\n              {memberStatusText}\n            </div>\n          </div>\n        </div>\n\n        <div className='str-chat__channel-detail__channel-member-detail-view__actions str-chat__form__switch-fieldset'>\n          {filteredActions.map(({ Component, type }) => (\n            <Component key={type} />\n          ))}\n        </div>\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA+BA,IAAM,yBACJ,MACA,MACG;CACH,IAAI,MAAM,QAAQ,OAAO,EAAE,QAAQ;CAEnC,IAAI,MAAM,aACR,OAAO,EAAE,6BAA6B,EACpC,WAAW,EAAE,sCAAsC,EACjD,WAAW,KAAK,YAClB,CAAC,EACH,CAAC;CAGH,OAAO,EAAE,SAAS;AACpB;AAEA,IAAa,uBAAuB,EAClC,yBAAyB,+BACzB,QACA,aAC8B;CAC9B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,oBAAoB,qBAAqB,MAAM;CACrD,MAAM,mBAAmB,sBAAsB,OAAO,MAAM,CAAC;CAW7D,OACE,oBAAC,6BAAD;EAA6B,OAVJ,eAClB;GACL;GACA;GACA,cAAc,OAAO,MAAM,MAAM,OAAO;EAC1C,IACA,CAAC,QAAQ,iBAAiB,CAIU;YAClC,oBAAC,4BAAD;GAC0B;GACL;GACD;GACV;EACT,CAAA;CAC0B,CAAA;AAEjC;AASA,IAAM,8BAA8B,EAClC,wBACA,mBACA,kBACA,aACqC;CACrC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,kBAAyB,oBAAoB;CAC9D,MAAM,EAAE,WAAW,8BAA8B;CAEjD,MAAM,kBAAkB,oCAAoC,sBAAsB;CAElF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GAA+B;GAAO,QAAQ;GAAQ,OAAO,EAAE,eAAe;EAAI,CAAA,GAClF,qBAAC,OAAO,MAAR;GAAa,WAAU;aAAvB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,UAAU,OAAO,MAAM;KACvB,UAAU,OAAO,MAAM;KACvB,MAAK;KACL,UAAU;IACX,CAAA,GACD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,GACL,oBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,CACF;MACF;OAEL,oBAAC,OAAD;IAAK,WAAU;cACZ,gBAAgB,KAAK,EAAE,WAAW,WACjC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACE,CAAA,CACM;IACV;;AAET"}

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

@@ -0,0 +1,182 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Checkbox } from "../../../../components/Form/Checkbox.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { useNotificationApi } from "../../../../components/Notifications/hooks/useNotificationApi.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { canUpdateChannelMembers, getUserDisplayName } from "./ChannelMembersView.utils.mjs";
+import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
+import { useChannelMemberIds } from "./useChannelMemberIds.mjs";
+import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
+import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { UserSearchSource } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
+var USER_SEARCH_PAGE_SIZE = 30;
+var searchSourceItemsStateSelector = (state) => ({
+	isLoading: state.isLoading,
+	users: state.items
+});
+var EMPTY_USERS = [];
+var computeUserItemKey = (_, user) => user.id;
+var MuteIndicator = () => {
+	const { IconMute } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var readOnlyRootProps = { className: "str-chat__channel-detail__channel-members-view__list-item" };
+var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, isSelected, toggleSelectedUser, user }) => {
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const displayName = getUserDisplayName(user);
+	const LeadingSlot = useMemo(() => function MemberAvatar() {
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user }),
+			isOnline: user.online,
+			size: "md"
+		});
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		user
+	]);
+	const SelectableTrailingSlot = useMemo(() => function SelectCheckbox() {
+		return /* @__PURE__ */ jsx(Checkbox, {
+			"aria-hidden": true,
+			checked: isSelected
+		});
+	}, [isSelected]);
+	const selectableRootProps = useMemo(() => ({
+		"aria-pressed": isSelected,
+		className: "str-chat__channel-detail__channel-members-view__list-item",
+		onClick: () => toggleSelectedUser(user.id)
+	}), [
+		isSelected,
+		toggleSelectedUser,
+		user.id
+	]);
+	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: selectableRootProps,
+		title: displayName,
+		TrailingSlot: SelectableTrailingSlot
+	});
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		rootProps: readOnlyRootProps,
+		subtitle: isMember ? t("Already a member") : void 0,
+		title: displayName,
+		TrailingSlot: isMuted ? MuteIndicator : void 0
+	});
+};
+var ChannelMembersAddView = ({ modeController, searchSource }) => {
+	const { client, mutes } = useChatContext();
+	const { t } = useTranslationContext();
+	const { channel } = useChannelDetailContext();
+	const canManageChannelMembers = canUpdateChannelMembers(channel);
+	const { addNotification } = useNotificationApi();
+	const memberUserIds = useChannelMemberIds(channel);
+	const memberIdSet = useMemo(() => new Set(memberUserIds), [memberUserIds]);
+	const userSearchSource = useMemo(() => searchSource ?? new UserSearchSource(client, {
+		allowEmptySearchString: true,
+		pageSize: USER_SEARCH_PAGE_SIZE,
+		resetOnNewSearchQuery: false
+	}), [client, searchSource]);
+	const { isLoading, users } = useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
+	const [isSaving, setIsSaving] = useState(false);
+	const [selectedUserIds, setSelectedUserIds] = useState([]);
+	useEffect(() => {
+		userSearchSource.activate();
+		userSearchSource.search("");
+		return () => userSearchSource.cancelScheduledQuery();
+	}, [userSearchSource]);
+	const selectedUserIdSet = useMemo(() => new Set(selectedUserIds), [selectedUserIds]);
+	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const handleSearchChange = useCallback((query) => {
+		userSearchSource.search(query);
+	}, [userSearchSource]);
+	const toggleSelectedUser = useCallback((userId) => setSelectedUserIds((currentSelectedUserIds) => currentSelectedUserIds.includes(userId) ? currentSelectedUserIds.filter((id) => id !== userId) : [...currentSelectedUserIds, userId]), []);
+	const renderItem = useCallback((_, user) => /* @__PURE__ */ jsx(ChannelMembersAddViewItem, {
+		canManageChannelMembers,
+		isMember: memberIdSet.has(user.id),
+		isMuted: mutedUserIdSet.has(user.id),
+		isSelected: selectedUserIdSet.has(user.id),
+		toggleSelectedUser,
+		user
+	}), [
+		canManageChannelMembers,
+		memberIdSet,
+		mutedUserIdSet,
+		selectedUserIdSet,
+		toggleSelectedUser
+	]);
+	const EmptyPlaceholder = useMemo(() => function ChannelMembersAddEmptyPlaceholder() {
+		if (isLoading || !users) return null;
+		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("No user found") });
+	}, [
+		isLoading,
+		t,
+		users
+	]);
+	const Footer = useMemo(() => function ChannelMembersAddListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: userSearchSource });
+	}, [userSearchSource]);
+	const handleSave = async () => {
+		if (!canManageChannelMembers || !selectedUserIds.length || isSaving) return;
+		setIsSaving(true);
+		try {
+			await channel.addMembers(selectedUserIds);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				message: t("{{ count }} members added", { count: selectedUserIds.length }),
+				severity: "success",
+				type: "api:channel:addMembers:success"
+			});
+			setSelectedUserIds([]);
+			setIsSaving(false);
+			modeController.setMode("browse");
+		} catch (error) {
+			setIsSaving(false);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				error,
+				message: t("Error adding members"),
+				severity: "error",
+				type: "api:channel:addMembers:failed"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [/* @__PURE__ */ jsx(ChannelDetailSearchInput, {
+			autoFocus: true,
+			onSearchChange: handleSearchChange
+		}), /* @__PURE__ */ jsx(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeUserItemKey,
+			data: users ?? EMPTY_USERS,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: userSearchSource.search
+		})]
+	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ jsx(Prompt.Footer, { children: /* @__PURE__ */ jsx(Prompt.FooterControls, { children: /* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
+		disabled: isSaving,
+		onClick: handleSave,
+		children: t("Add {{ count }} members", { count: selectedUserIds.length })
+	}) }) })] });
+};
+//#endregion
+export { ChannelMembersAddView };
+
+//# sourceMappingURL=ChannelMembersAddView.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersAddView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx"],"sourcesContent":["import { type SearchSourceState, type UserResponse, UserSearchSource } from 'stream-chat';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { useStateStore } from '../../../../store';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { Checkbox } from '../../../../components/Form';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { canUpdateChannelMembers, getUserDisplayName } from './ChannelMembersView.utils';\nimport { useChannelMemberIds } from './useChannelMemberIds';\nimport type { ChannelMembersModeViewProps } from './ChannelMembersView';\nimport { useNotificationApi } from '../../../../components/Notifications';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\n\nexport type ChannelMembersAddViewProps = ChannelMembersModeViewProps & {\n  searchSource?: UserSearchSource;\n};\n\nconst USER_SEARCH_PAGE_SIZE = 30;\n\nconst searchSourceItemsStateSelector = (state: SearchSourceState<UserResponse>) => ({\n  isLoading: state.isLoading,\n  users: state.items,\n});\n\nconst EMPTY_USERS: UserResponse[] = [];\n\nconst computeUserItemKey = (_: number, user: UserResponse) => user.id;\n\nconst MuteIndicator = () => {\n  const { IconMute } = useComponentContextIcons();\n  return (\n    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />\n  );\n};\n\nconst readOnlyRootProps = {\n  className: 'str-chat__channel-detail__channel-members-view__list-item',\n};\n\nconst ChannelMembersAddViewItem = ({\n  canManageChannelMembers,\n  isMember,\n  isMuted,\n  isSelected,\n  toggleSelectedUser,\n  user,\n}: {\n  canManageChannelMembers: boolean;\n  isMember: boolean;\n  isMuted: boolean;\n  isSelected: boolean;\n  toggleSelectedUser: (userId: string) => void;\n  user: UserResponse;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(user);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user });\n\n        return <Avatar {...displayInfo} isOnline={user.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const SelectableTrailingSlot = useMemo(\n    () =>\n      function SelectCheckbox() {\n        return <Checkbox aria-hidden checked={isSelected} />;\n      },\n    [isSelected],\n  );\n\n  const selectableRootProps = useMemo(\n    () => ({\n      'aria-pressed': isSelected,\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => toggleSelectedUser(user.id),\n    }),\n    [isSelected, toggleSelectedUser, user.id],\n  );\n\n  // Only non-members can be selected for adding. Existing members are\n  // listed (and flagged below) but render as a non-actionable row, like\n  // the read-only no-permission case.\n  if (canManageChannelMembers && !isMember) {\n    return (\n      <ListItemLayout\n        LeadingSlot={LeadingSlot}\n        RootElement='button'\n        rootProps={selectableRootProps}\n        title={displayName}\n        TrailingSlot={SelectableTrailingSlot}\n      />\n    );\n  }\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      rootProps={readOnlyRootProps}\n      subtitle={isMember ? t('Already a member') : undefined}\n      title={displayName}\n      TrailingSlot={isMuted ? MuteIndicator : undefined}\n    />\n  );\n};\n\nexport const ChannelMembersAddView = ({\n  modeController,\n  searchSource,\n}: ChannelMembersAddViewProps) => {\n  const { client, mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelDetailContext();\n  const canManageChannelMembers = canUpdateChannelMembers(channel);\n  const { addNotification } = useNotificationApi();\n\n  const memberUserIds = useChannelMemberIds(channel);\n  const memberIdSet = useMemo(() => new Set(memberUserIds), [memberUserIds]);\n\n  const userSearchSource = useMemo(\n    () =>\n      searchSource ??\n      new UserSearchSource(client, {\n        allowEmptySearchString: true,\n        pageSize: USER_SEARCH_PAGE_SIZE,\n        resetOnNewSearchQuery: false,\n      }),\n    [client, searchSource],\n  );\n\n  const { isLoading, users } = useStateStore(\n    userSearchSource.state,\n    searchSourceItemsStateSelector,\n  );\n\n  const [isSaving, setIsSaving] = useState(false);\n  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    userSearchSource.activate();\n    userSearchSource.search('');\n\n    return () => userSearchSource.cancelScheduledQuery();\n  }, [userSearchSource]);\n\n  const selectedUserIdSet = useMemo(() => new Set(selectedUserIds), [selectedUserIds]);\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target.id)),\n    [mutes],\n  );\n\n  const handleSearchChange = useCallback(\n    (query: string) => {\n      userSearchSource.search(query);\n    },\n    [userSearchSource],\n  );\n\n  const toggleSelectedUser = useCallback(\n    (userId: string) =>\n      setSelectedUserIds((currentSelectedUserIds) =>\n        currentSelectedUserIds.includes(userId)\n          ? currentSelectedUserIds.filter((id) => id !== userId)\n          : [...currentSelectedUserIds, userId],\n      ),\n    [],\n  );\n\n  const renderItem = useCallback(\n    (_: number, user: UserResponse) => (\n      <ChannelMembersAddViewItem\n        canManageChannelMembers={canManageChannelMembers}\n        isMember={memberIdSet.has(user.id)}\n        isMuted={mutedUserIdSet.has(user.id)}\n        isSelected={selectedUserIdSet.has(user.id)}\n        toggleSelectedUser={toggleSelectedUser}\n        user={user}\n      />\n    ),\n    [\n      canManageChannelMembers,\n      memberIdSet,\n      mutedUserIdSet,\n      selectedUserIdSet,\n      toggleSelectedUser,\n    ],\n  );\n\n  // Only show the \"no results\" copy once a query has resolved (`users` is an\n  // array); while the first page loads `users` is undefined and nothing shows.\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersAddEmptyPlaceholder() {\n        if (isLoading || !users) return null;\n        return <ChannelDetailEmptyList>{t('No user found')}</ChannelDetailEmptyList>;\n      },\n    [isLoading, t, users],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersAddListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={userSearchSource} />;\n      },\n    [userSearchSource],\n  );\n\n  const handleSave = async () => {\n    if (!canManageChannelMembers || !selectedUserIds.length || isSaving) return;\n\n    setIsSaving(true);\n    try {\n      await channel.addMembers(selectedUserIds);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMembersView',\n        message: t('{{ count }} members added', { count: selectedUserIds.length }),\n        severity: 'success',\n        type: 'api:channel:addMembers:success',\n      });\n      setSelectedUserIds([]);\n      setIsSaving(false);\n      modeController.setMode('browse');\n    } catch (error) {\n      setIsSaving(false);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMembersView',\n        error: error as Error,\n        message: t('Error adding members'),\n        severity: 'error',\n        type: 'api:channel:addMembers:failed',\n      });\n    }\n  };\n\n  return (\n    <>\n      <Prompt.Body className='str-chat__channel-members-view__body'>\n        <ChannelDetailSearchInput autoFocus onSearchChange={handleSearchChange} />\n        <VirtualizedList\n          className='str-chat__channel-detail__channel-members-view__list'\n          computeItemKey={computeUserItemKey}\n          data={users ?? EMPTY_USERS}\n          EmptyPlaceholder={EmptyPlaceholder}\n          Footer={Footer}\n          itemContent={renderItem}\n          loadNext={userSearchSource.search}\n        />\n      </Prompt.Body>\n      {canManageChannelMembers && selectedUserIds.length > 0 && (\n        <Prompt.Footer>\n          <Prompt.FooterControls>\n            <Prompt.FooterControlsButtonPrimary disabled={isSaving} onClick={handleSave}>\n              {t('Add {{ count }} members', { count: selectedUserIds.length })}\n            </Prompt.FooterControlsButtonPrimary>\n          </Prompt.FooterControls>\n        </Prompt.Footer>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.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 { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { getMemberDisplayName, getMemberUserId } from "./ChannelMembersView.utils.mjs";
+import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
+import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
+import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useChannelMembersSearch } from "./useChannelMembersSearch.mjs";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
+var getMemberRoleTranslation = (member, t) => {
+	if ([member.user?.role, member.channel_role].includes("admin")) return t("Admin");
+	if (member.channel_role === "channel_moderator" || member.channel_role === "moderator") return t("Moderator");
+	if (member.role === "owner") return t("Owner");
+};
+var getPresenceStatusText = (user, t) => {
+	if (user?.online) return t("Online");
+	if (user?.last_active) return t("Last seen {{ timestamp }}", { timestamp: t("timestamp/ChannelMembersLastActive", { timestamp: user.last_active }) });
+	return t("Offline");
+};
+var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const user = member.user;
+	const displayName = getMemberDisplayName(member);
+	const roleTranslation = getMemberRoleTranslation(member, t);
+	const LeadingSlot = useMemo(() => function MemberAvatar() {
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user: user ?? void 0 }),
+			isOnline: user?.online,
+			size: "md"
+		});
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		user
+	]);
+	const TrailingSlot = useMemo(() => function MemberTrailingSlot() {
+		const { IconMute } = useComponentContextIcons();
+		return /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__channel-members-view__list-item__trailing-slot",
+			children: [roleTranslation ? /* @__PURE__ */ jsx("span", {
+				className: "str-chat__channel-detail__channel-members-view__role-label",
+				children: roleTranslation
+			}) : null, isMuted ? /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute" }) : null]
+		});
+	}, [isMuted, roleTranslation]);
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			"aria-label": t("View member details for {{ member }}", { member: displayName }),
+			className: "str-chat__channel-detail__channel-members-view__list-item",
+			onClick: () => onMemberSelect?.(member)
+		}), [
+			displayName,
+			member,
+			onMemberSelect,
+			t
+		]),
+		subtitle: getPresenceStatusText(user, t),
+		title: displayName,
+		TrailingSlot
+	});
+};
+var computeMemberItemKey = (_, member) => getMemberUserId(member);
+var ChannelMembersBrowseView = ({ onMemberSelect }) => {
+	const { mutes } = useChatContext();
+	const { t } = useTranslationContext();
+	const { displayedMembers, handleSearchChange, hasMembers, membersSearchSource, searchInputResetKey } = useChannelMembersSearch();
+	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const renderableMembers = useMemo(() => displayedMembers.filter((member) => getMemberUserId(member)), [displayedMembers]);
+	const renderItem = useCallback((_, member) => /* @__PURE__ */ jsx(ChannelMembersBrowseViewItem, {
+		isMuted: mutedUserIdSet.has(getMemberUserId(member)),
+		member,
+		onMemberSelect
+	}), [mutedUserIdSet, onMemberSelect]);
+	const EmptyPlaceholder = useMemo(() => function ChannelMembersEmptyPlaceholder() {
+		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("No member found") });
+	}, [t]);
+	const Footer = useMemo(() => function ChannelMembersListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: membersSearchSource });
+	}, [membersSearchSource]);
+	return /* @__PURE__ */ jsxs(Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [hasMembers && /* @__PURE__ */ jsx(ChannelDetailSearchInput, {
+			onSearchChange: handleSearchChange,
+			resetKey: searchInputResetKey
+		}), /* @__PURE__ */ jsx(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeMemberItemKey,
+			data: renderableMembers,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: hasMembers ? membersSearchSource.search : void 0
+		})]
+	});
+};
+//#endregion
+export { ChannelMembersBrowseView };
+
+//# sourceMappingURL=ChannelMembersBrowseView.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersBrowseView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx"],"sourcesContent":["import type { ChannelMemberResponse } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\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 { getMemberDisplayName, getMemberUserId } from './ChannelMembersView.utils';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { useChannelMembersSearch } from './useChannelMembersSearch';\n\nconst getMemberRoleTranslation = (\n  member: ChannelMemberResponse,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if ([member.user?.role, member.channel_role].includes('admin')) return t('Admin');\n  if (member.channel_role === 'channel_moderator' || member.channel_role === 'moderator')\n    return t('Moderator');\n  if (member.role === 'owner') return t('Owner');\n\n  return undefined;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('Online');\n\n  if (user?.last_active) {\n    return t('Last seen {{ timestamp }}', {\n      timestamp: t('timestamp/ChannelMembersLastActive', {\n        timestamp: user.last_active,\n      }),\n    });\n  }\n\n  return t('Offline');\n};\n\nconst ChannelMembersBrowseViewItem = ({\n  isMuted,\n  member,\n  onMemberSelect,\n}: {\n  isMuted: boolean;\n  member: ChannelMemberResponse;\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const user = member.user;\n  const displayName = getMemberDisplayName(member);\n  const roleTranslation = getMemberRoleTranslation(member, t);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user: user ?? undefined });\n\n        return <Avatar {...displayInfo} isOnline={user?.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MemberTrailingSlot() {\n        const { IconMute } = useComponentContextIcons();\n        return (\n          <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'>\n            {roleTranslation ? (\n              <span className='str-chat__channel-detail__channel-members-view__role-label'>\n                {roleTranslation}\n              </span>\n            ) : null}\n            {isMuted ? (\n              <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' />\n            ) : null}\n          </div>\n        );\n      },\n    [isMuted, roleTranslation],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      'aria-label': t('View member details for {{ member }}', {\n        member: displayName,\n      }),\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => onMemberSelect?.(member),\n    }),\n    [displayName, member, onMemberSelect, t],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPresenceStatusText(user, t)}\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nconst computeMemberItemKey = (_: number, member: ChannelMemberResponse) =>\n  getMemberUserId(member) as string;\n\nexport type ChannelMembersBrowseViewProps = {\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n};\n\nexport const ChannelMembersBrowseView = ({\n  onMemberSelect,\n}: ChannelMembersBrowseViewProps) => {\n  const { mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const {\n    displayedMembers,\n    handleSearchChange,\n    hasMembers,\n    membersSearchSource,\n    searchInputResetKey,\n  } = useChannelMembersSearch();\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target.id)),\n    [mutes],\n  );\n\n  // Only members with a resolvable user id are rendered; pre-filtering keeps the\n  // virtualized item renderer total in sync with what it can actually display.\n  const renderableMembers = useMemo(\n    () => displayedMembers.filter((member) => getMemberUserId(member)),\n    [displayedMembers],\n  );\n\n  const renderItem = useCallback(\n    (_: number, member: ChannelMemberResponse) => (\n      <ChannelMembersBrowseViewItem\n        isMuted={mutedUserIdSet.has(getMemberUserId(member) as string)}\n        member={member}\n        onMemberSelect={onMemberSelect}\n      />\n    ),\n    [mutedUserIdSet, onMemberSelect],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersEmptyPlaceholder() {\n        return <ChannelDetailEmptyList>{t('No member found')}</ChannelDetailEmptyList>;\n      },\n    [t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={membersSearchSource} />;\n      },\n    [membersSearchSource],\n  );\n\n  return (\n    <Prompt.Body className='str-chat__channel-members-view__body'>\n      {hasMembers && (\n        <ChannelDetailSearchInput\n          onSearchChange={handleSearchChange}\n          resetKey={searchInputResetKey}\n        />\n      )}\n      <VirtualizedList\n        className='str-chat__channel-detail__channel-members-view__list'\n        computeItemKey={computeMemberItemKey}\n        data={renderableMembers}\n        EmptyPlaceholder={EmptyPlaceholder}\n        Footer={Footer}\n        itemContent={renderItem}\n        loadNext={hasMembers ? membersSearchSource.search : undefined}\n      />\n    </Prompt.Body>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.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 { 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("Add channel members"),
+		className: "str-chat__channel-detail__channel-members-view__add-button",
+		onClick: () => modeController.setMode("add"),
+		size: "md",
+		variant: "secondary",
+		children: t("Add")
+	});
+};
+var AddMembersMenuAction = ({ closeMenu, modeController }) => {
+	const { t } = useTranslationContext();
+	const { IconUserAdd } = useComponentContextIcons();
+	if (modeController.mode !== "browse") return null;
+	return /* @__PURE__ */ jsx(ContextMenuButton, {
+		"aria-label": t("Add channel members"),
+		Icon: IconUserAdd,
+		onClick: () => {
+			modeController.setMode("add");
+			closeMenu?.();
+		},
+		children: t("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("Open members actions"),
+		className: "str-chat__channel-detail__channel-members-view__actions-button",
+		ref: referenceRef,
+		size: "md",
+		variant: "secondary",
+		...props,
+		children: t("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('Add channel members')}\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('Add')}\n    </Button>\n  );\n};\n\nconst AddMembersMenuAction = ({\n  closeMenu,\n  modeController,\n}: ChannelMembersHeaderActionComponentProps) => {\n  const { t } = useTranslationContext();\n  const { IconUserAdd } = useComponentContextIcons();\n\n  if (modeController.mode !== 'browse') return null;\n\n  return (\n    <ContextMenuButton\n      aria-label={t('Add channel members')}\n      Icon={IconUserAdd}\n      onClick={() => {\n        modeController.setMode('add');\n        closeMenu?.();\n      }}\n    >\n      {t('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('Open members actions')}\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('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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"}