stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/ChannelListItem/ChannelListItemActionButtons.defaults.mjs

@@ -0,0 +1,432 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ContextMenuButton, useContextMenuContext } from "../Dialog/components/ContextMenu.mjs";
+import { useChannelMembershipState } from "../ChannelList/hooks/useChannelMembershipState.mjs";
+import { useChannelMembersState } from "../ChannelList/hooks/useChannelMembersState.mjs";
+import { useIsChannelMuted } from "./hooks/useIsChannelMuted.mjs";
+import { ChannelListItemActionButtons } from "./ChannelListItemActionButtons.mjs";
+import { useChannelListItemContext } from "./ChannelListItem.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx
+var useMuteAction = () => {
+	const { addNotification } = useNotificationApi();
+	const { channel } = useChannelListItemContext();
+	const { t } = useTranslationContext();
+	const { muted: isMuted } = useIsChannelMuted(channel);
+	const toggle = async () => {
+		try {
+			if (isMuted) {
+				await channel.unmute();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel unmuted"),
+					severity: "success",
+					type: "api:channel:unmute:success"
+				});
+			} else {
+				await channel.mute();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel muted"),
+					severity: "success",
+					type: "api:channel:mute:success"
+				});
+			}
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				error: error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred"),
+				message: t("Failed to update channel mute status"),
+				severity: "error",
+				type: "api:channel:mute:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": isMuted,
+		title: isMuted ? t("Unmute") : t("Mute"),
+		toggle
+	};
+};
+var useArchiveAction = () => {
+	const { channel } = useChannelListItemContext();
+	const { addNotification } = useNotificationApi();
+	const membership = useChannelMembershipState(channel);
+	const { t } = useTranslationContext();
+	const toggle = async () => {
+		try {
+			if (membership.archived_at) {
+				await channel.unarchive();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel unarchived"),
+					severity: "success",
+					type: "api:channel:unarchive:success"
+				});
+			} else {
+				await channel.archive();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel archived"),
+					severity: "success",
+					type: "api:channel:archive:success"
+				});
+			}
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				error: error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred"),
+				message: t("Failed to update channel archive status"),
+				severity: "error",
+				type: "api:channel:archive:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": typeof membership.archived_at === "string",
+		title: membership.archived_at ? t("Unarchive") : t("Archive"),
+		toggle
+	};
+};
+var useQuickActionButtonProps = ({ "aria-pressed": ariaPressed, title, toggle }) => {
+	const inProgressRef = useRef(false);
+	const [inProgress, setInProgress] = useState(false);
+	return {
+		"aria-busy": inProgress || void 0,
+		"aria-disabled": inProgress || void 0,
+		"aria-pressed": ariaPressed,
+		onClick: async (e) => {
+			e.stopPropagation();
+			if (inProgressRef.current) return;
+			inProgressRef.current = true;
+			try {
+				setInProgress(true);
+				await toggle();
+			} finally {
+				inProgressRef.current = false;
+				setInProgress(false);
+			}
+		},
+		title
+	};
+};
+var useDropdownActionButtonProps = ({ "aria-pressed": ariaPressed, title, toggle }) => {
+	const { closeMenu } = useContextMenuContext();
+	return {
+		"aria-pressed": ariaPressed,
+		onClick: (e) => {
+			e.stopPropagation();
+			closeMenu();
+			requestAnimationFrame(() => void toggle());
+		},
+		title
+	};
+};
+var useBanAction = () => {
+	const { client } = useChatContext();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { channel } = useChannelListItemContext();
+	const members = useChannelMembersState(channel);
+	const isUserBanned = Object.values(members || {}).some((member) => member.user?.id !== client.userID && member.banned);
+	const toggle = async () => {
+		try {
+			const otherUserId = Object.keys(channel.state.members).find((userId) => userId !== client.userID);
+			if (!otherUserId) return;
+			if (isUserBanned) {
+				await channel.unbanUser(otherUserId);
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("User unblocked"),
+					severity: "success",
+					type: "api:user:unban:success"
+				});
+			} else {
+				await channel.banUser(otherUserId, {});
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("User blocked"),
+					severity: "success",
+					type: "api:user:ban:success"
+				});
+			}
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				error: error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred"),
+				message: t("Failed to block user"),
+				severity: "error",
+				type: "api:user:ban:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": isUserBanned,
+		title: isUserBanned ? t("Unblock User") : t("Block User"),
+		toggle
+	};
+};
+var useLeaveAction = () => {
+	const { t } = useTranslationContext();
+	const { channel } = useChannelListItemContext();
+	const { client } = useChatContext();
+	const { addNotification } = useNotificationApi();
+	const toggle = async () => {
+		try {
+			await channel.removeMembers([client.userID]);
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				message: t("Left channel"),
+				severity: "success",
+				type: "api:channel:leave:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				error: error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred"),
+				message: t("Failed to leave channel"),
+				severity: "error",
+				type: "api:channel:leave:failed"
+			});
+		}
+	};
+	return {
+		title: t("Leave Channel"),
+		toggle
+	};
+};
+var usePinAction = () => {
+	const { t } = useTranslationContext();
+	const { addNotification } = useNotificationApi();
+	const { channel } = useChannelListItemContext();
+	const membership = useChannelMembershipState(channel);
+	const toggle = async () => {
+		try {
+			if (membership.pinned_at) {
+				await channel.unpin();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel unpinned"),
+					severity: "success",
+					type: "api:channel:unpin:success"
+				});
+			} else {
+				await channel.pin();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("Channel pinned"),
+					severity: "success",
+					type: "api:channel:pin:success"
+				});
+			}
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: ChannelListItemActionButtons.name,
+				error: error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred"),
+				message: t("Failed to update channel pinned status"),
+				severity: "error",
+				type: "api:channel:pin:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": !!membership.pinned_at,
+		title: membership.pinned_at ? t("Unpin") : t("Pin"),
+		toggle
+	};
+};
+var defaultComponents = {
+	dropdown: {
+		Archive() {
+			const behaviorProps = useDropdownActionButtonProps(useArchiveAction());
+			const { IconArchive } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-archive",
+				Icon: IconArchive,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Ban() {
+			const behaviorProps = useDropdownActionButtonProps(useBanAction());
+			const { IconNoSign } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-ban",
+				Icon: IconNoSign,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Leave() {
+			const behaviorProps = useDropdownActionButtonProps(useLeaveAction());
+			const { IconLeave } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-leave",
+				Icon: IconLeave,
+				variant: "destructive",
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Mute() {
+			const behaviorProps = useDropdownActionButtonProps(useMuteAction());
+			const { IconMute } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-mute",
+				Icon: IconMute,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Pin() {
+			const behaviorProps = useDropdownActionButtonProps(usePinAction());
+			const { IconPin } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-pin",
+				Icon: IconPin,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		}
+	},
+	quick: {
+		Archive() {
+			const behaviorProps = useQuickActionButtonProps(useArchiveAction());
+			const { IconArchive } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": behaviorProps.title,
+				circular: true,
+				"data-testid": "quick-action-archive",
+				size: "sm",
+				variant: "secondary",
+				...behaviorProps,
+				children: /* @__PURE__ */ jsx(IconArchive, {})
+			});
+		},
+		Mute() {
+			const behaviorProps = useQuickActionButtonProps(useMuteAction());
+			const { IconMute } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": behaviorProps.title,
+				circular: true,
+				"data-testid": "quick-action-mute",
+				size: "sm",
+				variant: "secondary",
+				...behaviorProps,
+				children: /* @__PURE__ */ jsx(IconMute, {})
+			});
+		}
+	},
+	QuickDropdownToggle: forwardRef((_, ref) => {
+		const { channel } = useChannelListItemContext();
+		const { t } = useTranslationContext();
+		const { IconMore } = useComponentContextIcons();
+		const dialogId = ChannelListItemActionButtons.getDialogId({ channelId: channel.id });
+		const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+		const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+		return /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-expanded": dialogIsOpen,
+			"aria-label": t("aria/Open Channel Actions Menu"),
+			"aria-pressed": dialogIsOpen,
+			circular: true,
+			"data-testid": "channel-list-item-dropdown-toggle",
+			onClick: (e) => {
+				e.stopPropagation();
+				dialog.toggle();
+			},
+			ref,
+			size: "sm",
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconMore, {})
+		});
+	})
+};
+defaultComponents.QuickDropdownToggle.displayName = "QuickDropdownToggle";
+var defaultChannelActionSet = [
+	{
+		Component: defaultComponents.QuickDropdownToggle,
+		placement: "quick-dropdown-toggle"
+	},
+	{
+		Component: defaultComponents.quick.Mute,
+		placement: "quick",
+		type: "mute"
+	},
+	{
+		Component: defaultComponents.dropdown.Archive,
+		placement: "dropdown",
+		type: "archive"
+	},
+	{
+		Component: defaultComponents.dropdown.Ban,
+		placement: "dropdown",
+		type: "ban"
+	},
+	{
+		Component: defaultComponents.dropdown.Pin,
+		placement: "dropdown",
+		type: "pin"
+	},
+	{
+		Component: defaultComponents.dropdown.Leave,
+		placement: "dropdown",
+		type: "leave"
+	}
+];
+var useBaseChannelActionSetFilter = (channelActionSet) => {
+	const { channel } = useChannelListItemContext();
+	const membership = useChannelMembershipState(channel);
+	const memberCount = channel.data?.member_count ?? 0;
+	const connectedUserIsMember = typeof membership.user !== "undefined";
+	const isDirectMessageChannel = connectedUserIsMember && memberCount === 2;
+	const ownCapabilities = channel.data?.own_capabilities;
+	return useMemo(() => {
+		return channelActionSet.filter((action) => {
+			if (action.placement === "quick-dropdown-toggle") return true;
+			switch (action.type) {
+				case "archive": return connectedUserIsMember;
+				case "mute": return ownCapabilities?.includes("mute-channel");
+				case "ban": return isDirectMessageChannel && ownCapabilities?.includes("ban-channel-members");
+				case "leave": return ownCapabilities?.includes("leave-channel");
+				case "pin": return connectedUserIsMember;
+				default: return true;
+			}
+		});
+	}, [
+		channelActionSet,
+		connectedUserIsMember,
+		ownCapabilities,
+		isDirectMessageChannel
+	]);
+};
+//#endregion
+export { defaultChannelActionSet, useBaseChannelActionSetFilter };
+
+//# sourceMappingURL=ChannelListItemActionButtons.defaults.mjs.map

package/dist/es/components/ChannelListItem/ChannelListItemActionButtons.defaults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemActionButtons.defaults.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useChannelMembershipState, useChannelMembersState } from '../ChannelList';\nimport { useChannelListItemContext } from './ChannelListItem';\nimport { Button } from '../Button';\nimport { useIsChannelMuted } from './hooks/useIsChannelMuted';\nimport {\n  ContextMenuButton,\n  useContextMenuContext,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../Dialog';\nimport { useNotificationApi } from '../Notifications';\nimport { ChannelListItemActionButtons } from './ChannelListItemActionButtons';\n\ntype ChannelActionBehavior = {\n  /** Toggle state for actions that have one (mute/archive/pin); omit for one-shot actions (leave). */\n  'aria-pressed'?: boolean;\n  title: string;\n  toggle: () => Promise<void>;\n};\n\n// Core mute/unmute action — performs the API call and reports the result. No UI state: the placement\n// wrappers below own the busy/disabled affordance and the menu-close behavior.\nconst useMuteAction = (): ChannelActionBehavior => {\n  const { addNotification } = useNotificationApi();\n  const { channel } = useChannelListItemContext();\n  const { t } = useTranslationContext();\n  const { muted: isMuted } = useIsChannelMuted(channel);\n\n  const toggle = async () => {\n    try {\n      if (isMuted) {\n        await channel.unmute();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel unmuted'),\n          severity: 'success',\n          type: 'api:channel:unmute:success',\n        });\n      } else {\n        await channel.mute();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel muted'),\n          severity: 'success',\n          type: 'api:channel:mute:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('Failed to update channel mute status'),\n        severity: 'error',\n        type: 'api:channel:mute:failed',\n      });\n    }\n  };\n\n  return { 'aria-pressed': isMuted, title: isMuted ? t('Unmute') : t('Mute'), toggle };\n};\n\n// Core archive/unarchive action — performs the API call and reports the result.\nconst useArchiveAction = (): ChannelActionBehavior => {\n  const { channel } = useChannelListItemContext();\n  const { addNotification } = useNotificationApi();\n  const membership = useChannelMembershipState(channel);\n  const { t } = useTranslationContext();\n\n  const toggle = async () => {\n    try {\n      if (membership.archived_at) {\n        await channel.unarchive();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel unarchived'),\n          severity: 'success',\n          type: 'api:channel:unarchive:success',\n        });\n      } else {\n        await channel.archive();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel archived'),\n          severity: 'success',\n          type: 'api:channel:archive:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('Failed to update channel archive status'),\n        severity: 'error',\n        type: 'api:channel:archive:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': typeof membership.archived_at === 'string',\n    title: membership.archived_at ? t('Unarchive') : t('Archive'),\n    toggle,\n  };\n};\n\n// Quick (hover/focus-revealed) action button. Marks itself busy with `aria-disabled`/`aria-busy` —\n// NOT the native `disabled` attribute, which would blur the button and collapse its hover-revealed\n// row, leaving it un-focusable. Keeps focus and guards against re-activation while in flight.\nconst useQuickActionButtonProps = ({\n  'aria-pressed': ariaPressed,\n  title,\n  toggle,\n}: ChannelActionBehavior) => {\n  // Ref latch flips synchronously in the handler so two clicks in the same tick (before the\n  // `setInProgress(true)` rerender commits) can't both call `toggle()` — the `aria-busy`/\n  // `aria-disabled` state only guards after the rerender, which is too late for non-idempotent\n  // actions (archive/leave/mute).\n  const inProgressRef = useRef(false);\n  const [inProgress, setInProgress] = useState(false);\n\n  return {\n    'aria-busy': inProgress || undefined,\n    'aria-disabled': inProgress || undefined,\n    'aria-pressed': ariaPressed,\n    onClick: async (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      if (inProgressRef.current) return; // busy: ignore re-activation while in flight\n      inProgressRef.current = true;\n      try {\n        setInProgress(true);\n        await toggle();\n      } finally {\n        inProgressRef.current = false;\n        setInProgress(false);\n      }\n    },\n    title,\n  } satisfies ComponentPropsWithoutRef<'button'>;\n};\n\n// Dropdown menu item. Standard menu behavior: activating closes the menu (which returns focus to the\n// toggle) and runs the action in the background, reporting via its notification — so the item needs\n// no busy/disabled state, it unmounts with the menu.\n//\n// The action is deferred to after the close commits, on the next animation frame. The open menu is an\n// aria-modal dialog with its OWN `AriaLiveOutlet` (the inert root outlet is ignored by assistive tech\n// while it is open); running the action synchronously can route its notification into that outlet\n// just as it is torn down — so the notification is never spoken. Deferring lets the menu (and its\n// outlet) unmount and focus return to the toggle first, so the notification lands in the root outlet,\n// in a calm window after the focus re-read.\nconst useDropdownActionButtonProps = ({\n  'aria-pressed': ariaPressed,\n  title,\n  toggle,\n}: ChannelActionBehavior) => {\n  const { closeMenu } = useContextMenuContext();\n\n  return {\n    'aria-pressed': ariaPressed,\n    onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      closeMenu();\n      requestAnimationFrame(() => void toggle());\n    },\n    title,\n  } satisfies ComponentPropsWithoutRef<'button'>;\n};\n\n// Core block/unblock action for the other member of a DM.\nconst useBanAction = (): ChannelActionBehavior => {\n  const { client } = useChatContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const members = useChannelMembersState(channel);\n  const isUserBanned = Object.values(members || {}).some(\n    (member) => member.user?.id !== client.userID && member.banned,\n  );\n\n  const toggle = async () => {\n    try {\n      const otherUserId = Object.keys(channel.state.members).find(\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        (userId) => userId !== client.userID!,\n      );\n      if (!otherUserId) return;\n      if (isUserBanned) {\n        await channel.unbanUser(otherUserId);\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('User unblocked'),\n          severity: 'success',\n          type: 'api:user:unban:success',\n        });\n      } else {\n        await channel.banUser(otherUserId, {});\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('User blocked'),\n          severity: 'success',\n          type: 'api:user:ban:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('Failed to block user'),\n        severity: 'error',\n        type: 'api:user:ban:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': isUserBanned,\n    title: isUserBanned ? t('Unblock User') : t('Block User'),\n    toggle,\n  };\n};\n\n// Core leave-channel action (one-shot — not a toggle).\nconst useLeaveAction = (): ChannelActionBehavior => {\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const { client } = useChatContext();\n  const { addNotification } = useNotificationApi();\n\n  const toggle = async () => {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      await channel.removeMembers([client.userID!]);\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        message: t('Left channel'),\n        severity: 'success',\n        type: 'api:channel:leave:success',\n      });\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('Failed to leave channel'),\n        severity: 'error',\n        type: 'api:channel:leave:failed',\n      });\n    }\n  };\n\n  return { title: t('Leave Channel'), toggle };\n};\n\n// Core pin/unpin action.\nconst usePinAction = (): ChannelActionBehavior => {\n  const { t } = useTranslationContext();\n  const { addNotification } = useNotificationApi();\n  const { channel } = useChannelListItemContext();\n  const membership = useChannelMembershipState(channel);\n\n  const toggle = async () => {\n    try {\n      if (membership.pinned_at) {\n        await channel.unpin();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel unpinned'),\n          severity: 'success',\n          type: 'api:channel:unpin:success',\n        });\n      } else {\n        await channel.pin();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('Channel pinned'),\n          severity: 'success',\n          type: 'api:channel:pin:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('Failed to update channel pinned status'),\n        severity: 'error',\n        type: 'api:channel:pin:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': !!membership.pinned_at,\n    title: membership.pinned_at ? t('Unpin') : t('Pin'),\n    toggle,\n  };\n};\n\ntype ChannelActionItem =\n  | (({ placement: 'quick' } | { placement: 'dropdown' }) & {\n      type: string;\n      Component: React.ComponentType;\n    })\n  | {\n      placement: 'quick-dropdown-toggle';\n      Component: React.ComponentType<ComponentPropsWithRef<'button'>>;\n    };\n\nconst defaultComponents = {\n  dropdown: {\n    Archive() {\n      const behaviorProps = useDropdownActionButtonProps(useArchiveAction());\n      const { IconArchive } = useComponentContextIcons();\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-archive'\n          Icon={IconArchive}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Ban() {\n      const behaviorProps = useDropdownActionButtonProps(useBanAction());\n      const { IconNoSign } = useComponentContextIcons();\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-ban'\n          Icon={IconNoSign}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Leave() {\n      const behaviorProps = useDropdownActionButtonProps(useLeaveAction());\n      const { IconLeave } = useComponentContextIcons();\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-leave'\n          Icon={IconLeave}\n          variant='destructive'\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Mute() {\n      const behaviorProps = useDropdownActionButtonProps(useMuteAction());\n      const { IconMute } = useComponentContextIcons();\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-mute'\n          Icon={IconMute}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Pin() {\n      const behaviorProps = useDropdownActionButtonProps(usePinAction());\n      const { IconPin } = useComponentContextIcons();\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-pin'\n          Icon={IconPin}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n  },\n  quick: {\n    Archive() {\n      const behaviorProps = useQuickActionButtonProps(useArchiveAction());\n      const { IconArchive } = useComponentContextIcons();\n\n      return (\n        <Button\n          appearance='ghost'\n          aria-label={behaviorProps.title}\n          circular\n          data-testid='quick-action-archive'\n          size='sm'\n          variant='secondary'\n          {...behaviorProps}\n        >\n          <IconArchive />\n        </Button>\n      );\n    },\n    Mute() {\n      const behaviorProps = useQuickActionButtonProps(useMuteAction());\n      const { IconMute } = useComponentContextIcons();\n\n      return (\n        <Button\n          appearance='ghost'\n          aria-label={behaviorProps.title}\n          circular\n          data-testid='quick-action-mute'\n          size='sm'\n          variant='secondary'\n          {...behaviorProps}\n        >\n          <IconMute />\n        </Button>\n      );\n    },\n  },\n  QuickDropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {\n    const { channel } = useChannelListItemContext();\n    const { t } = useTranslationContext();\n    const { IconMore } = useComponentContextIcons();\n\n    const dialogId = ChannelListItemActionButtons.getDialogId({\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      channelId: channel.id!,\n    });\n    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n    return (\n      <Button\n        appearance='ghost'\n        aria-expanded={dialogIsOpen}\n        aria-label={t('aria/Open Channel Actions Menu')}\n        aria-pressed={dialogIsOpen}\n        circular\n        data-testid='channel-list-item-dropdown-toggle'\n        onClick={(e) => {\n          e.stopPropagation();\n\n          dialog.toggle();\n        }}\n        ref={ref}\n        size='sm'\n        variant='secondary'\n      >\n        <IconMore />\n      </Button>\n    );\n  }),\n};\n\ndefaultComponents.QuickDropdownToggle.displayName = 'QuickDropdownToggle';\n\nexport const defaultChannelActionSet: ChannelActionItem[] = [\n  {\n    Component: defaultComponents.QuickDropdownToggle,\n    placement: 'quick-dropdown-toggle',\n  },\n  {\n    Component: defaultComponents.quick.Mute,\n    placement: 'quick',\n    type: 'mute',\n  },\n  {\n    Component: defaultComponents.dropdown.Archive,\n    placement: 'dropdown',\n    type: 'archive',\n  },\n  {\n    Component: defaultComponents.dropdown.Ban,\n    placement: 'dropdown',\n    type: 'ban',\n  },\n  {\n    Component: defaultComponents.dropdown.Pin,\n    placement: 'dropdown',\n    type: 'pin',\n  },\n  {\n    Component: defaultComponents.dropdown.Leave,\n    placement: 'dropdown',\n    type: 'leave',\n  },\n];\n\nexport const useBaseChannelActionSetFilter = (channelActionSet: ChannelActionItem[]) => {\n  const { channel } = useChannelListItemContext();\n  const membership = useChannelMembershipState(channel);\n  const memberCount = channel.data?.member_count ?? 0;\n  const connectedUserIsMember = typeof membership.user !== 'undefined';\n  const isDirectMessageChannel = connectedUserIsMember && memberCount === 2;\n\n  const ownCapabilities = channel.data?.own_capabilities;\n\n  return useMemo(() => {\n    const filtered = channelActionSet.filter((action) => {\n      if (action.placement === 'quick-dropdown-toggle') return true;\n\n      switch (action.type) {\n        case 'archive':\n          return connectedUserIsMember;\n        case 'mute':\n          return ownCapabilities?.includes('mute-channel');\n        case 'ban':\n          return (\n            isDirectMessageChannel && ownCapabilities?.includes('ban-channel-members')\n          );\n        case 'leave':\n          return ownCapabilities?.includes('leave-channel');\n        case 'pin':\n          return connectedUserIsMember;\n        default:\n          return true;\n      }\n    });\n\n    return filtered;\n  }, [channelActionSet, connectedUserIsMember, ownCapabilities, isDirectMessageChannel]);\n};\n"],"mappings":"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"}

package/dist/es/components/ChannelListItem/ChannelListItemActionButtons.mjs

@@ -0,0 +1,67 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { ContextMenu } from "../Dialog/components/ContextMenu.mjs";
+import { useSplitActionSet } from "../Chat/hooks/useSplitActionSet.mjs";
+import { defaultChannelActionSet, useBaseChannelActionSetFilter } from "./ChannelListItemActionButtons.defaults.mjs";
+import { useChannelListItemContext } from "./ChannelListItem.mjs";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/ChannelListItem/ChannelListItemActionButtons.tsx
+var ChannelListItemActionButtons = () => {
+	const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
+	const { t } = useTranslationContext();
+	const { channel } = useChannelListItemContext();
+	const [referenceElement, setReferenceElement] = React.useState(null);
+	const [isRestoringFocus, setIsRestoringFocus] = React.useState(false);
+	const dialogId = ChannelListItemActionButtons.getDialogId({ channelId: channel.id });
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+	const closeContextMenu = React.useCallback(() => {
+		setIsRestoringFocus(true);
+		dialog?.close();
+		requestAnimationFrame(() => {
+			if (!referenceElement?.isConnected) {
+				setIsRestoringFocus(false);
+				return;
+			}
+			referenceElement.focus();
+			requestAnimationFrame(() => {
+				if (document.activeElement !== referenceElement) setIsRestoringFocus(false);
+			});
+		});
+	}, [dialog, referenceElement]);
+	const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(useBaseChannelActionSetFilter(defaultChannelActionSet));
+	if (quickActionSet.length + dropdownActionSet.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__channel-list-item__action-buttons", { "str-chat__channel-list-item__action-buttons--active": dialogIsOpen || isRestoringFocus }),
+		"data-testid": "channel-list-item-action-buttons",
+		onFocusCapture: () => {
+			setIsRestoringFocus(false);
+		},
+		children: [
+			quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+			quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type)),
+			/* @__PURE__ */ jsx(ContextMenuComponent, {
+				"aria-label": t("aria/Channel Actions"),
+				className: "str-chat__channel-list-item__action-buttons-context-menu",
+				"data-testid": "channel-list-item-context-menu",
+				dialogManagerId: dialogManager?.id,
+				id: dialog.id,
+				onClose: closeContextMenu,
+				placement: "bottom-start",
+				referenceElement,
+				tabIndex: -1,
+				trapFocus: true,
+				children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type))
+			})
+		]
+	});
+};
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
+//#endregion
+export { ChannelListItemActionButtons };
+
+//# sourceMappingURL=ChannelListItemActionButtons.mjs.map

package/dist/es/components/ChannelListItem/ChannelListItemActionButtons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemActionButtons.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemActionButtons.tsx"],"sourcesContent":["import React, { type ComponentProps, type ComponentType, type ReactNode } from 'react';\n\nimport clsx from 'clsx';\nimport { ContextMenu, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\nimport { useComponentContext, useTranslationContext } from '../../context';\nimport {\n  defaultChannelActionSet,\n  useBaseChannelActionSetFilter,\n} from './ChannelListItemActionButtons.defaults';\nimport { useSplitActionSet } from '../Chat/hooks/useSplitActionSet';\nimport { useChannelListItemContext } from './ChannelListItem';\n\nexport type ChannelListItemActionButtonsProps = ComponentProps<ComponentType>; // hack to allow empty props\n\ninterface ChannelListItemActionButtonsInterface {\n  (props: ChannelListItemActionButtonsProps): ReactNode;\n  getDialogId: (_: { channelId: string }) => string;\n  displayName: string;\n}\n\nexport const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface = () => {\n  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const [referenceElement, setReferenceElement] =\n    React.useState<HTMLButtonElement | null>(null);\n  const [isRestoringFocus, setIsRestoringFocus] = React.useState(false);\n  const dialogId = ChannelListItemActionButtons.getDialogId({\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    channelId: channel.id!,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  const closeContextMenu = React.useCallback(() => {\n    setIsRestoringFocus(true);\n    dialog?.close();\n\n    requestAnimationFrame(() => {\n      if (!referenceElement?.isConnected) {\n        setIsRestoringFocus(false);\n        return;\n      }\n\n      referenceElement.focus();\n\n      requestAnimationFrame(() => {\n        if (document.activeElement !== referenceElement) {\n          setIsRestoringFocus(false);\n        }\n      });\n    });\n  }, [dialog, referenceElement]);\n\n  const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);\n  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } =\n    useSplitActionSet(filteredActionSet);\n\n  if (quickActionSet.length + dropdownActionSet.length === 0) {\n    // no buttons to render, omit rendering wrapper\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx('str-chat__channel-list-item__action-buttons', {\n        'str-chat__channel-list-item__action-buttons--active':\n          dialogIsOpen || isRestoringFocus,\n      })}\n      data-testid='channel-list-item-action-buttons'\n      onFocusCapture={() => {\n        setIsRestoringFocus(false);\n      }}\n    >\n      {quickDropdownToggleAction && dropdownActionSet.length > 0 && (\n        <quickDropdownToggleAction.Component ref={setReferenceElement} />\n      )}\n      {quickActionSet.map(({ Component, type }) => (\n        <Component key={type} />\n      ))}\n      <ContextMenuComponent\n        aria-label={t('aria/Channel Actions')}\n        className='str-chat__channel-list-item__action-buttons-context-menu'\n        data-testid='channel-list-item-context-menu'\n        dialogManagerId={dialogManager?.id}\n        id={dialog.id}\n        onClose={closeContextMenu}\n        placement='bottom-start'\n        referenceElement={referenceElement}\n        tabIndex={-1}\n        trapFocus\n      >\n        {dropdownActionSet.map(({ Component, type }) => (\n          <Component key={type} />\n        ))}\n      </ContextMenuComponent>\n    </div>\n  );\n};\n\nChannelListItemActionButtons.getDialogId = ({ channelId }) =>\n  `channel-action-buttons-${channelId}`;\n\nChannelListItemActionButtons.displayName = 'ChannelListItemActionButtons';\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,qCAA4E;CACvF,MAAM,EAAE,aAAa,uBAAuB,gBAAgB,oBAAoB;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,0BAA0B;CAC9C,MAAM,CAAC,kBAAkB,uBACvB,MAAM,SAAmC,IAAI;CAC/C,MAAM,CAAC,kBAAkB,uBAAuB,MAAM,SAAS,KAAK;CACpE,MAAM,WAAW,6BAA6B,YAAY,EAExD,WAAW,QAAQ,GACrB,CAAC;CACD,MAAM,EAAE,QAAQ,kBAAkB,0BAA0B,EAAE,IAAI,SAAS,CAAC;CAC5E,MAAM,eAAe,gBAAgB,UAAU,eAAe,EAAE;CAEhE,MAAM,mBAAmB,MAAM,kBAAkB;EAC/C,oBAAoB,IAAI;EACxB,QAAQ,MAAM;EAEd,4BAA4B;GAC1B,IAAI,CAAC,kBAAkB,aAAa;IAClC,oBAAoB,KAAK;IACzB;GACF;GAEA,iBAAiB,MAAM;GAEvB,4BAA4B;IAC1B,IAAI,SAAS,kBAAkB,kBAC7B,oBAAoB,KAAK;GAE7B,CAAC;EACH,CAAC;CACH,GAAG,CAAC,QAAQ,gBAAgB,CAAC;CAG7B,MAAM,EAAE,mBAAmB,gBAAgB,8BACzC,kBAFwB,8BAA8B,uBAEpC,CAAiB;CAErC,IAAI,eAAe,SAAS,kBAAkB,WAAW,GAEvD,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,+CAA+C,EAC7D,uDACE,gBAAgB,iBACpB,CAAC;EACD,eAAY;EACZ,sBAAsB;GACpB,oBAAoB,KAAK;EAC3B;YARF;GAUG,6BAA6B,kBAAkB,SAAS,KACvD,oBAAC,0BAA0B,WAA3B,EAAqC,KAAK,oBAAsB,CAAA;GAEjE,eAAe,KAAK,EAAE,WAAW,WAChC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACD,oBAAC,sBAAD;IACE,cAAY,EAAE,sBAAsB;IACpC,WAAU;IACV,eAAY;IACZ,iBAAiB,eAAe;IAChC,IAAI,OAAO;IACX,SAAS;IACT,WAAU;IACQ;IAClB,UAAU;IACV,WAAA;cAEC,kBAAkB,KAAK,EAAE,WAAW,WACnC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACmB,CAAA;EACnB;;AAET;AAEA,6BAA6B,eAAe,EAAE,gBAC5C,0BAA0B;AAE5B,6BAA6B,cAAc"}

package/dist/es/components/ChannelListItem/ChannelListItemTimestamp.mjs

@@ -0,0 +1,30 @@
+import { getDateString, isDate } from "../../i18n/utils.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChannelListItem/ChannelListItemTimestamp.tsx
+function ChannelListItemTimestamp({ lastMessage }) {
+	const { t, tDateTimeParser } = useTranslationContext("ChannelListItemTimestamp");
+	const timestamp = lastMessage?.created_at;
+	const normalizedTimestamp = timestamp && isDate(timestamp) ? timestamp.toISOString() : void 0;
+	const when = useMemo(() => getDateString({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp/ChannelPreviewTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ jsx("time", {
+		className: "str-chat__channel-list-item-timestamp",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+}
+//#endregion
+export { ChannelListItemTimestamp };
+
+//# sourceMappingURL=ChannelListItemTimestamp.mjs.map

package/dist/es/components/ChannelListItem/ChannelListItemTimestamp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemTimestamp.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemTimestamp.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { LocalMessage } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString, isDate } from '../../i18n/utils';\n\nexport type ChannelListItemTimestampProps = {\n  /** The last message in the channel, used to extract the timestamp */\n  lastMessage?: LocalMessage;\n};\n\nexport function ChannelListItemTimestamp({ lastMessage }: ChannelListItemTimestampProps) {\n  const { t, tDateTimeParser } = useTranslationContext('ChannelListItemTimestamp');\n\n  const timestamp = lastMessage?.created_at;\n  const normalizedTimestamp =\n    timestamp && isDate(timestamp) ? timestamp.toISOString() : undefined;\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp/ChannelPreviewTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time\n      className='str-chat__channel-list-item-timestamp'\n      dateTime={normalizedTimestamp}\n    >\n      {when}\n    </time>\n  );\n}\n"],"mappings":";;;;;AAWA,SAAgB,yBAAyB,EAAE,eAA8C;CACvF,MAAM,EAAE,GAAG,oBAAoB,sBAAsB,0BAA0B;CAE/E,MAAM,YAAY,aAAa;CAC/B,MAAM,sBACJ,aAAa,OAAO,SAAS,IAAI,UAAU,YAAY,IAAI,KAAA;CAE7D,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"}