stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/ChannelList/hooks/useChannelListKeyboardNavigation.mjs

@@ -0,0 +1,82 @@
+import { createRowActionKeyHandlers, useListboxKeyboardNavigation } from "../../../a11y/hooks/useListboxKeyboardNavigation.mjs";
+import { useEffect, useRef } from "react";
+//#region src/components/ChannelList/hooks/useChannelListKeyboardNavigation.ts
+var OPTION_SELECTOR = "[role=\"option\"]";
+var ROW_SELECTOR = ".str-chat__channel-list-item-container";
+var ACTION_BUTTON_SELECTOR = ".str-chat__channel-list-item__action-buttons button";
+var LOAD_MORE_SELECTOR = "[data-testid=\"load-more-button\"]";
+var NAVIGABLE_SELECTOR = `${OPTION_SELECTOR}, ${LOAD_MORE_SELECTOR}`;
+var LOAD_MORE_FOCUS_TIMEOUT_MS = 4e3;
+/**
+* Keyboard navigation for the channel list (`role="listbox"`). Returns handlers to spread onto the
+* listbox element:
+* - **ArrowUp/ArrowDown/Home/End** move focus between the channel rows (`role="option"`) and the
+*   **Load more** button (the last roving target when present).
+* - **ArrowRight** moves focus from a row to its actions button (the menu is then navigable with
+*   Up/Down via the ContextMenu's own roving focus).
+* - **ArrowLeft** moves focus from a row's actions back to the row.
+* - When **Load more** is activated, focus moves to the **first item of the newly loaded page** once
+*   it renders.
+*/
+var useChannelListKeyboardNavigation = (listboxRef) => {
+	const { onKeyDown } = useListboxKeyboardNavigation(listboxRef, {
+		enterScope: "container",
+		keyHandlers: createRowActionKeyHandlers({
+			actionSelector: ACTION_BUTTON_SELECTOR,
+			rowSelector: ROW_SELECTOR
+		}),
+		optionSelector: NAVIGABLE_SELECTOR,
+		resolveActiveOption: (active) => active.closest(ROW_SELECTOR)?.querySelector(OPTION_SELECTOR) ?? null
+	});
+	const getChannelOptions = () => Array.from(listboxRef.current?.querySelectorAll(OPTION_SELECTOR) ?? []);
+	const pendingFocusRef = useRef(null);
+	const pendingTimeoutRef = useRef(null);
+	const clearPendingFocus = () => {
+		pendingFocusRef.current = null;
+		if (pendingTimeoutRef.current) {
+			clearTimeout(pendingTimeoutRef.current);
+			pendingTimeoutRef.current = null;
+		}
+	};
+	const onClickCapture = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element) || !target.closest(LOAD_MORE_SELECTOR)) return;
+		const options = getChannelOptions();
+		pendingFocusRef.current = {
+			boundary: options[options.length - 1] ?? null,
+			preLoad: new Set(options)
+		};
+		if (pendingTimeoutRef.current) clearTimeout(pendingTimeoutRef.current);
+		pendingTimeoutRef.current = setTimeout(clearPendingFocus, LOAD_MORE_FOCUS_TIMEOUT_MS);
+	};
+	useEffect(() => {
+		const pending = pendingFocusRef.current;
+		if (!pending) return;
+		const options = getChannelOptions();
+		if (!pending.boundary) {
+			if (options.length > 0) {
+				options[0].focus();
+				clearPendingFocus();
+			}
+			return;
+		}
+		const boundaryIndex = options.indexOf(pending.boundary);
+		if (boundaryIndex === -1) {
+			clearPendingFocus();
+			return;
+		}
+		const firstNewOption = options.slice(boundaryIndex + 1).find((option) => !pending.preLoad.has(option));
+		if (!firstNewOption) return;
+		firstNewOption.focus();
+		clearPendingFocus();
+	});
+	useEffect(() => () => clearPendingFocus(), []);
+	return {
+		onClickCapture,
+		onKeyDown
+	};
+};
+//#endregion
+export { useChannelListKeyboardNavigation };
+
+//# sourceMappingURL=useChannelListKeyboardNavigation.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelListKeyboardNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelListKeyboardNavigation.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelListKeyboardNavigation.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MouseEvent as ReactMouseEvent, RefObject } from 'react';\n\nimport {\n  createRowActionKeyHandlers,\n  useListboxKeyboardNavigation,\n} from '../../../a11y/hooks/useListboxKeyboardNavigation';\n\nconst OPTION_SELECTOR = '[role=\"option\"]';\nconst ROW_SELECTOR = '.str-chat__channel-list-item-container';\nconst ACTION_BUTTON_SELECTOR = '.str-chat__channel-list-item__action-buttons button';\nconst LOAD_MORE_SELECTOR = '[data-testid=\"load-more-button\"]';\n// Roving covers the channel rows AND the Load more button, so Down from the last channel lands on\n// it (and Up/End/Home behave). The load-more \"focus the first new item\" logic below still counts\n// channel rows only, so the button being a roving target does not skew the page-boundary index.\nconst NAVIGABLE_SELECTOR = `${OPTION_SELECTOR}, ${LOAD_MORE_SELECTOR}`;\n\n// Upper bound for how long a pending \"focus the first item of the next page\" request stays armed\n// after the Load more button is pressed. If the new page hasn't rendered within this window we drop\n// the request, so an unrelated later list change (e.g. a channel arriving over the WebSocket) can't\n// trigger a stray focus move.\nconst LOAD_MORE_FOCUS_TIMEOUT_MS = 4000;\n\n/**\n * Keyboard navigation for the channel list (`role=\"listbox\"`). Returns handlers to spread onto the\n * listbox element:\n * - **ArrowUp/ArrowDown/Home/End** move focus between the channel rows (`role=\"option\"`) and the\n *   **Load more** button (the last roving target when present).\n * - **ArrowRight** moves focus from a row to its actions button (the menu is then navigable with\n *   Up/Down via the ContextMenu's own roving focus).\n * - **ArrowLeft** moves focus from a row's actions back to the row.\n * - When **Load more** is activated, focus moves to the **first item of the newly loaded page** once\n *   it renders.\n */\nexport const useChannelListKeyboardNavigation = (\n  listboxRef: RefObject<HTMLElement | null>,\n) => {\n  // Shared roving (channels + Load more) + ArrowRight→actions / ArrowLeft→row. `enterScope:\n  // 'container'` + `resolveActiveOption` make Up/Down/Home/End work even while focus is on a row's\n  // action button — moving to the next/previous channel relative to that row.\n  const { onKeyDown } = useListboxKeyboardNavigation(listboxRef, {\n    enterScope: 'container',\n    keyHandlers: createRowActionKeyHandlers({\n      actionSelector: ACTION_BUTTON_SELECTOR,\n      rowSelector: ROW_SELECTOR,\n    }),\n    optionSelector: NAVIGABLE_SELECTOR,\n    resolveActiveOption: (active) =>\n      active.closest(ROW_SELECTOR)?.querySelector<HTMLElement>(OPTION_SELECTOR) ?? null,\n  });\n\n  // Channel rows only (excludes the Load more button) — used to find the first item of the next page.\n  const getChannelOptions = () =>\n    Array.from(listboxRef.current?.querySelectorAll<HTMLElement>(OPTION_SELECTOR) ?? []);\n\n  // A pending \"focus the first item of the next page\" request. Rather than keying off the raw row\n  // COUNT (which a WebSocket-driven insert/reorder during the load window could satisfy with an\n  // unrelated row), we snapshot the pre-load rows: `boundary` is the last pre-load option (the new\n  // page is appended after it) and `preLoad` is the set of all pre-load option nodes (so a genuinely\n  // new row can be told apart from a reordered existing one). Rows are keyed by cid, so React keeps\n  // their DOM nodes stable across re-renders, making these references reliable identities.\n  const pendingFocusRef = useRef<{\n    boundary: HTMLElement | null;\n    preLoad: Set<HTMLElement>;\n  } | null>(null);\n  const pendingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearPendingFocus = () => {\n    pendingFocusRef.current = null;\n    if (pendingTimeoutRef.current) {\n      clearTimeout(pendingTimeoutRef.current);\n      pendingTimeoutRef.current = null;\n    }\n  };\n\n  // Activating Load more (by mouse or keyboard, which both dispatch a click) arms the focus move.\n  const onClickCapture = (event: ReactMouseEvent<HTMLElement>) => {\n    const target = event.target;\n    if (!(target instanceof Element) || !target.closest(LOAD_MORE_SELECTOR)) return;\n    const options = getChannelOptions();\n    pendingFocusRef.current = {\n      boundary: options[options.length - 1] ?? null,\n      preLoad: new Set(options),\n    };\n    if (pendingTimeoutRef.current) clearTimeout(pendingTimeoutRef.current);\n    pendingTimeoutRef.current = setTimeout(clearPendingFocus, LOAD_MORE_FOCUS_TIMEOUT_MS);\n  };\n\n  // After the newly loaded page renders, focus its first item. Runs after every commit; cheap no-op\n  // unless a focus move is pending. We look for the first option that is BOTH after the pre-load\n  // boundary AND was not present before load — so an unrelated row arriving over the WebSocket (which\n  // sorts above the boundary, and/or is not \"after\" it) does not trigger a stray focus move.\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) return;\n    const options = getChannelOptions();\n    // Empty list when Load more was pressed: the whole list is the new page — focus its first row.\n    if (!pending.boundary) {\n      if (options.length > 0) {\n        options[0].focus();\n        clearPendingFocus();\n      }\n      return;\n    }\n    const boundaryIndex = options.indexOf(pending.boundary);\n    // Boundary row was removed (e.g. the user left that channel) — drop the request rather than\n    // guessing where the page starts.\n    if (boundaryIndex === -1) {\n      clearPendingFocus();\n      return;\n    }\n    const firstNewOption = options\n      .slice(boundaryIndex + 1)\n      .find((option) => !pending.preLoad.has(option));\n    // Nothing new after the boundary yet: keep waiting (within the timeout) for the page to render.\n    if (!firstNewOption) return;\n    firstNewOption.focus();\n    clearPendingFocus();\n  });\n\n  useEffect(() => () => clearPendingFocus(), []);\n\n  return { onClickCapture, onKeyDown };\n};\n"],"mappings":";;;AAQA,IAAM,kBAAkB;AACxB,IAAM,eAAe;AACrB,IAAM,yBAAyB;AAC/B,IAAM,qBAAqB;AAI3B,IAAM,qBAAqB,GAAG,gBAAgB,IAAI;AAMlD,IAAM,6BAA6B;;;;;;;;;;;;AAanC,IAAa,oCACX,eACG;CAIH,MAAM,EAAE,cAAc,6BAA6B,YAAY;EAC7D,YAAY;EACZ,aAAa,2BAA2B;GACtC,gBAAgB;GAChB,aAAa;EACf,CAAC;EACD,gBAAgB;EAChB,sBAAsB,WACpB,OAAO,QAAQ,YAAY,CAAC,EAAE,cAA2B,eAAe,KAAK;CACjF,CAAC;CAGD,MAAM,0BACJ,MAAM,KAAK,WAAW,SAAS,iBAA8B,eAAe,KAAK,CAAC,CAAC;CAQrF,MAAM,kBAAkB,OAGd,IAAI;CACd,MAAM,oBAAoB,OAA6C,IAAI;CAE3E,MAAM,0BAA0B;EAC9B,gBAAgB,UAAU;EAC1B,IAAI,kBAAkB,SAAS;GAC7B,aAAa,kBAAkB,OAAO;GACtC,kBAAkB,UAAU;EAC9B;CACF;CAGA,MAAM,kBAAkB,UAAwC;EAC9D,MAAM,SAAS,MAAM;EACrB,IAAI,EAAE,kBAAkB,YAAY,CAAC,OAAO,QAAQ,kBAAkB,GAAG;EACzE,MAAM,UAAU,kBAAkB;EAClC,gBAAgB,UAAU;GACxB,UAAU,QAAQ,QAAQ,SAAS,MAAM;GACzC,SAAS,IAAI,IAAI,OAAO;EAC1B;EACA,IAAI,kBAAkB,SAAS,aAAa,kBAAkB,OAAO;EACrE,kBAAkB,UAAU,WAAW,mBAAmB,0BAA0B;CACtF;CAMA,gBAAgB;EACd,MAAM,UAAU,gBAAgB;EAChC,IAAI,CAAC,SAAS;EACd,MAAM,UAAU,kBAAkB;EAElC,IAAI,CAAC,QAAQ,UAAU;GACrB,IAAI,QAAQ,SAAS,GAAG;IACtB,QAAQ,EAAE,CAAC,MAAM;IACjB,kBAAkB;GACpB;GACA;EACF;EACA,MAAM,gBAAgB,QAAQ,QAAQ,QAAQ,QAAQ;EAGtD,IAAI,kBAAkB,IAAI;GACxB,kBAAkB;GAClB;EACF;EACA,MAAM,iBAAiB,QACpB,MAAM,gBAAgB,CAAC,CAAC,CACxB,MAAM,WAAW,CAAC,QAAQ,QAAQ,IAAI,MAAM,CAAC;EAEhD,IAAI,CAAC,gBAAgB;EACrB,eAAe,MAAM;EACrB,kBAAkB;CACpB,CAAC;CAED,sBAAsB,kBAAkB,GAAG,CAAC,CAAC;CAE7C,OAAO;EAAE;EAAgB;CAAU;AACrC"}

package/dist/es/components/ChannelList/hooks/useChannelListShape.mjs

@@ -0,0 +1,310 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { getChannel } from "../../../utils/getChannel.mjs";
+import { extractSortValue, findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels } from "../utils.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region src/components/ChannelList/hooks/useChannelListShape.ts
+var shared = ({ customHandler, event, setChannels }) => {
+	if (typeof customHandler === "function") return customHandler(setChannels, event);
+	setChannels((channels) => {
+		const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+		if (channelIndex < 0) return channels;
+		channels.splice(channelIndex, 1);
+		return [...channels];
+	});
+};
+var useChannelListShapeDefaults = () => {
+	const { client } = useChatContext();
+	const handleMessageNew = useCallback(({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		const channelType = event.channel_type;
+		const channelId = event.channel_id;
+		if (!channelType || !channelId) return;
+		setChannels((currentChannels) => {
+			const targetChannel = client.channel(channelType, channelId);
+			const targetChannelIndex = currentChannels.indexOf(targetChannel);
+			const targetChannelExistsWithinList = targetChannelIndex >= 0;
+			const isTargetChannelPinned = isChannelPinned(targetChannel);
+			const isTargetChannelArchived = isChannelArchived(targetChannel);
+			const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+			const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+			if (considerArchivedChannels && isTargetChannelArchived && !filters.archived || considerArchivedChannels && !isTargetChannelArchived && filters.archived || considerPinnedChannels && isTargetChannelPinned || lockChannelOrder || !targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels) return currentChannels;
+			return moveChannelUpwards({
+				channels: currentChannels,
+				channelToMove: targetChannel,
+				channelToMoveIndexWithinChannels: targetChannelIndex,
+				sort
+			});
+		});
+	}, [client]);
+	const handleNotificationMessageNew = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		if (!event.channel) return;
+		if (!allowNewMessagesFromUnfilteredChannels) return;
+		const channel = await getChannel({
+			client,
+			id: event.channel.id,
+			type: event.channel.type
+		});
+		const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+		if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) return;
+		setChannels((channels) => moveChannelUpwards({
+			channels,
+			channelToMove: channel,
+			sort
+		}));
+	}, [client]);
+	const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		if (!event.channel || !allowNewMessagesFromUnfilteredChannels) return;
+		const channel = await getChannel({
+			client,
+			id: event.channel.id,
+			members: event.channel.members?.reduce((newMembers, { user, user_id }) => {
+				const userId = user_id || user?.id;
+				if (userId) newMembers.push(userId);
+				return newMembers;
+			}, []),
+			type: event.channel.type
+		});
+		setChannels((channels) => moveChannelUpwards({
+			channels,
+			channelToMove: channel,
+			sort
+		}));
+	}, [client]);
+	const handleNotificationRemovedFromChannel = useCallback(({ customHandler, event, setChannels }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
+	}, []);
+	const handleMemberUpdated = useCallback(({ event, filters, lockChannelOrder, setChannels, sort }) => {
+		if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) return;
+		const channelType = event.channel_type;
+		const channelId = event.channel_id;
+		const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+		const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+		if (!considerPinnedChannels && !considerArchivedChannels || lockChannelOrder) return;
+		const pinnedAtSort = extractSortValue({
+			atIndex: 0,
+			sort,
+			targetKey: "pinned_at"
+		});
+		setChannels((currentChannels) => {
+			const targetChannel = client.channel(channelType, channelId);
+			const targetChannelIndex = currentChannels.indexOf(targetChannel);
+			const targetChannelExistsWithinList = targetChannelIndex >= 0;
+			const isTargetChannelArchived = isChannelArchived(targetChannel);
+			const isTargetChannelPinned = isChannelPinned(targetChannel);
+			const newChannels = [...currentChannels];
+			if (targetChannelExistsWithinList) newChannels.splice(targetChannelIndex, 1);
+			if (considerArchivedChannels && isTargetChannelArchived && !filters.archived || considerArchivedChannels && !isTargetChannelArchived && filters.archived) return newChannels;
+			let lastPinnedChannelIndex = null;
+			if (pinnedAtSort === 1 || pinnedAtSort === -1 && !isTargetChannelPinned) lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+			const newTargetChannelIndex = typeof lastPinnedChannelIndex === "number" ? lastPinnedChannelIndex + 1 : 0;
+			newChannels.splice(newTargetChannelIndex, 0, targetChannel);
+			return newChannels;
+		});
+	}, [client]);
+	const handleChannelDeleted = useCallback((p) => shared(p), []);
+	const handleChannelHidden = useCallback((p) => shared(p), []);
+	const handleChannelVisible = useCallback(async ({ customHandler, event, filters, setChannels, sort }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		if (!event.channel_id && !event.channel_type) return;
+		const channel = await getChannel({
+			client,
+			id: event.channel_id,
+			type: event.channel_type
+		});
+		const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+		if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) return;
+		setChannels((channels) => moveChannelUpwards({
+			channels,
+			channelToMove: channel,
+			sort
+		}));
+	}, [client]);
+	const handleChannelTruncated = useCallback(({ customHandler, event, setChannels }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		setChannels((channels) => [...channels]);
+	}, []);
+	const handleChannelUpdated = useCallback(({ customHandler, event, setChannels }) => {
+		if (typeof customHandler === "function") return customHandler(setChannels, event);
+		setChannels((channels) => {
+			const channelIndex = channels.findIndex((channel) => channel.cid === event.channel?.cid);
+			if (channelIndex > -1 && event.channel) {
+				const newChannels = channels;
+				newChannels[channelIndex].data = {
+					...event.channel,
+					hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
+					own_capabilities: event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities
+				};
+				return [...newChannels];
+			}
+			return channels;
+		});
+	}, []);
+	const handleUserPresenceChanged = useCallback(({ event, setChannels }) => {
+		setChannels((channels) => {
+			return channels.map((channel) => {
+				if (!event.user?.id || !channel.state.members[event.user.id]) return channel;
+				const newChannel = channel;
+				newChannel.state.members[event.user.id].user = event.user;
+				return newChannel;
+			});
+		});
+	}, []);
+	return useMemo(() => ({
+		handleChannelDeleted,
+		handleChannelHidden,
+		handleChannelTruncated,
+		handleChannelUpdated,
+		handleChannelVisible,
+		handleMemberUpdated,
+		handleMessageNew,
+		handleNotificationAddedToChannel,
+		handleNotificationMessageNew,
+		handleNotificationRemovedFromChannel,
+		handleUserPresenceChanged
+	}), [
+		handleChannelDeleted,
+		handleChannelHidden,
+		handleChannelTruncated,
+		handleChannelUpdated,
+		handleChannelVisible,
+		handleMemberUpdated,
+		handleMessageNew,
+		handleNotificationAddedToChannel,
+		handleNotificationMessageNew,
+		handleNotificationRemovedFromChannel,
+		handleUserPresenceChanged
+	]);
+};
+var usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort }) => {
+	const defaults = useChannelListShapeDefaults();
+	const defaultHandleChannelListShapeRef = useRef(void 0);
+	const customHandleChannelListShapeRef = useRef(void 0);
+	customHandleChannelListShapeRef.current = (event) => {
+		customHandleChannelListShape?.({
+			defaults,
+			event,
+			setChannels
+		});
+	};
+	defaultHandleChannelListShapeRef.current = (event) => {
+		switch (event.type) {
+			case "message.new":
+				defaults.handleMessageNew({
+					allowNewMessagesFromUnfilteredChannels,
+					customHandler: onMessageNewHandler,
+					event,
+					filters,
+					lockChannelOrder,
+					setChannels,
+					sort
+				});
+				break;
+			case "notification.message_new":
+				defaults.handleNotificationMessageNew({
+					allowNewMessagesFromUnfilteredChannels,
+					customHandler: onMessageNew,
+					event,
+					filters,
+					lockChannelOrder,
+					setChannels,
+					sort
+				});
+				break;
+			case "notification.added_to_channel":
+				defaults.handleNotificationAddedToChannel({
+					allowNewMessagesFromUnfilteredChannels,
+					customHandler: onAddedToChannel,
+					event,
+					lockChannelOrder,
+					setChannels,
+					sort
+				});
+				break;
+			case "notification.removed_from_channel":
+				defaults.handleNotificationRemovedFromChannel({
+					customHandler: onRemovedFromChannel,
+					event,
+					setChannels
+				});
+				break;
+			case "channel.deleted":
+				defaults.handleChannelDeleted({
+					customHandler: onChannelDeleted,
+					event,
+					setChannels
+				});
+				break;
+			case "channel.hidden":
+				defaults.handleChannelHidden({
+					customHandler: onChannelHidden,
+					event,
+					setChannels
+				});
+				break;
+			case "channel.visible":
+				defaults.handleChannelVisible({
+					customHandler: onChannelVisible,
+					event,
+					filters,
+					setChannels,
+					sort
+				});
+				break;
+			case "channel.truncated":
+				defaults.handleChannelTruncated({
+					customHandler: onChannelTruncated,
+					event,
+					setChannels
+				});
+				break;
+			case "channel.updated":
+				defaults.handleChannelUpdated({
+					customHandler: onChannelUpdated,
+					event,
+					setChannels
+				});
+				break;
+			case "user.presence.changed":
+				defaults.handleUserPresenceChanged({
+					event,
+					setChannels
+				});
+				break;
+			case "member.updated":
+				defaults.handleMemberUpdated({
+					event,
+					filters,
+					lockChannelOrder,
+					setChannels,
+					sort
+				});
+				break;
+			default: break;
+		}
+	};
+	const defaultFn = useCallback((e) => {
+		defaultHandleChannelListShapeRef.current?.(e);
+	}, []);
+	return {
+		customHandler: useMemo(() => {
+			if (!customHandleChannelListShape) return null;
+			return (e) => {
+				customHandleChannelListShapeRef.current?.(e);
+			};
+		}, [customHandleChannelListShape]),
+		defaultHandler: defaultFn
+	};
+};
+var useChannelListShape = (handler) => {
+	const { client } = useChatContext();
+	useEffect(() => {
+		return client.on("all", handler).unsubscribe;
+	}, [client, handler]);
+};
+//#endregion
+export { useChannelListShape, useChannelListShapeDefaults, usePrepareShapeHandlers };
+
+//# sourceMappingURL=useChannelListShape.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelListShape.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelListShape.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelListShape.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport type { Channel, Event } from 'stream-chat';\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport {\n  extractSortValue,\n  findLastPinnedChannelIndex,\n  isChannelArchived,\n  isChannelPinned,\n  moveChannelUpwards,\n  shouldConsiderArchivedChannels,\n  shouldConsiderPinnedChannels,\n} from '../utils';\nimport { useChatContext } from '../../../context';\nimport { getChannel } from '../../../utils';\nimport type { ChannelListProps } from '../ChannelList';\n\ntype SetChannels = Dispatch<SetStateAction<Channel[]>>;\n\ntype BaseParameters = {\n  event: Event;\n  setChannels: SetChannels;\n};\n\ntype RepeatedParameters = {\n  customHandler?: (\n    setChannels: BaseParameters['setChannels'],\n    event: BaseParameters['event'],\n  ) => void;\n};\n\ntype HandleMessageNewParameters = BaseParameters &\n  RepeatedParameters & {\n    allowNewMessagesFromUnfilteredChannels: boolean;\n    lockChannelOrder: boolean;\n  } & Required<Pick<ChannelListProps, 'filters' | 'sort'>>;\n\ntype HandleNotificationMessageNewParameters = BaseParameters &\n  RepeatedParameters & {\n    allowNewMessagesFromUnfilteredChannels: boolean;\n    lockChannelOrder: boolean;\n  } & Required<Pick<ChannelListProps, 'filters' | 'sort'>>;\n\ntype HandleNotificationRemovedFromChannelParameters = BaseParameters & RepeatedParameters;\n\ntype HandleNotificationAddedToChannelParameters = BaseParameters &\n  RepeatedParameters & {\n    allowNewMessagesFromUnfilteredChannels: boolean;\n    lockChannelOrder: boolean;\n  } & Required<Pick<ChannelListProps, 'sort'>>;\n\ntype HandleChannelVisibleParameters = BaseParameters &\n  RepeatedParameters &\n  Required<Pick<ChannelListProps, 'sort' | 'filters'>>;\n\ntype HandleMemberUpdatedParameters = BaseParameters & {\n  lockChannelOrder: boolean;\n} & Required<Pick<ChannelListProps, 'sort' | 'filters'>>;\n\ntype HandleChannelDeletedParameters = BaseParameters & RepeatedParameters;\n\ntype HandleChannelHiddenParameters = BaseParameters & RepeatedParameters;\n\ntype HandleChannelTruncatedParameters = BaseParameters & RepeatedParameters;\n\ntype HandleChannelUpdatedParameters = BaseParameters & RepeatedParameters;\n\ntype HandleUserPresenceChangedParameters = BaseParameters;\n\nconst shared = ({\n  customHandler,\n  event,\n  setChannels,\n}: BaseParameters & RepeatedParameters) => {\n  if (typeof customHandler === 'function') {\n    return customHandler(setChannels, event);\n  }\n\n  setChannels((channels) => {\n    const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);\n\n    if (channelIndex < 0) return channels;\n\n    channels.splice(channelIndex, 1);\n\n    return [...channels];\n  });\n};\n\nexport const useChannelListShapeDefaults = () => {\n  const { client } = useChatContext();\n\n  const handleMessageNew = useCallback(\n    ({\n      allowNewMessagesFromUnfilteredChannels,\n      customHandler,\n      event,\n      filters,\n      lockChannelOrder,\n      setChannels,\n      sort,\n    }: HandleMessageNewParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      const channelType = event.channel_type;\n      const channelId = event.channel_id;\n\n      if (!channelType || !channelId) return;\n\n      setChannels((currentChannels) => {\n        const targetChannel = client.channel(channelType, channelId);\n        const targetChannelIndex = currentChannels.indexOf(targetChannel);\n        const targetChannelExistsWithinList = targetChannelIndex >= 0;\n\n        const isTargetChannelPinned = isChannelPinned(targetChannel);\n        const isTargetChannelArchived = isChannelArchived(targetChannel);\n\n        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);\n        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);\n\n        if (\n          // filter is defined, target channel is archived and filter option is set to false\n          (considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||\n          // filter is defined, target channel isn't archived and filter option is set to true\n          (considerArchivedChannels && !isTargetChannelArchived && filters.archived) ||\n          // sort option is defined, target channel is pinned\n          (considerPinnedChannels && isTargetChannelPinned) ||\n          // list order is locked\n          lockChannelOrder ||\n          // target channel is not within the loaded list and loading from cache is disallowed\n          (!targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels)\n        ) {\n          return currentChannels;\n        }\n\n        return moveChannelUpwards({\n          channels: currentChannels,\n          channelToMove: targetChannel,\n          channelToMoveIndexWithinChannels: targetChannelIndex,\n          sort,\n        });\n      });\n    },\n    [client],\n  );\n\n  const handleNotificationMessageNew = useCallback(\n    async ({\n      allowNewMessagesFromUnfilteredChannels,\n      customHandler,\n      event,\n      filters,\n      setChannels,\n      sort,\n    }: HandleNotificationMessageNewParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      if (!event.channel) {\n        return;\n      }\n\n      // Bail out before querying the channel: if new messages from unfiltered\n      // channels are not allowed, this handler would discard the result anyway.\n      // Querying first issued a `channel.watch()` (queryChannel) for every\n      // `notification.message_new`, which could exhaust the rate limit when many\n      // such events arrive at once (#2441).\n      if (!allowNewMessagesFromUnfilteredChannels) {\n        return;\n      }\n\n      const channel = await getChannel({\n        client,\n        id: event.channel.id,\n        type: event.channel.type,\n      });\n\n      const considerArchivedChannels = shouldConsiderArchivedChannels(filters);\n      if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {\n        return;\n      }\n\n      setChannels((channels) =>\n        moveChannelUpwards({\n          channels,\n          channelToMove: channel,\n          sort,\n        }),\n      );\n    },\n    [client],\n  );\n\n  const handleNotificationAddedToChannel = useCallback(\n    async ({\n      allowNewMessagesFromUnfilteredChannels,\n      customHandler,\n      event,\n      setChannels,\n      sort,\n    }: HandleNotificationAddedToChannelParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      if (!event.channel || !allowNewMessagesFromUnfilteredChannels) {\n        return;\n      }\n\n      const channel = await getChannel({\n        client,\n        id: event.channel.id,\n        members: event.channel.members?.reduce<string[]>(\n          (newMembers, { user, user_id }) => {\n            const userId = user_id || user?.id;\n\n            if (userId) newMembers.push(userId);\n\n            return newMembers;\n          },\n          [],\n        ),\n        type: event.channel.type,\n      });\n\n      // membership has been reset (target channel shouldn't be pinned nor archived)\n      setChannels((channels) =>\n        moveChannelUpwards({\n          channels,\n          channelToMove: channel,\n          sort,\n        }),\n      );\n    },\n    [client],\n  );\n\n  const handleNotificationRemovedFromChannel = useCallback(\n    ({\n      customHandler,\n      event,\n      setChannels,\n    }: HandleNotificationRemovedFromChannelParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      setChannels((channels) =>\n        channels.filter((channel) => channel.cid !== event.channel?.cid),\n      );\n    },\n    [],\n  );\n\n  const handleMemberUpdated = useCallback(\n    ({\n      event,\n      filters,\n      lockChannelOrder,\n      setChannels,\n      sort,\n    }: HandleMemberUpdatedParameters) => {\n      if (\n        !event.member?.user ||\n        event.member.user.id !== client.userID ||\n        !event.channel_type\n      ) {\n        return;\n      }\n\n      const channelType = event.channel_type;\n      const channelId = event.channel_id;\n\n      const considerPinnedChannels = shouldConsiderPinnedChannels(sort);\n      const considerArchivedChannels = shouldConsiderArchivedChannels(filters);\n\n      // `pinned_at` nor `archived` properties are set or channel list order is locked, return early\n      if ((!considerPinnedChannels && !considerArchivedChannels) || lockChannelOrder) {\n        return;\n      }\n\n      const pinnedAtSort = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });\n\n      setChannels((currentChannels) => {\n        const targetChannel = client.channel(channelType, channelId);\n        // assumes that channel instances are not changing\n        const targetChannelIndex = currentChannels.indexOf(targetChannel);\n        const targetChannelExistsWithinList = targetChannelIndex >= 0;\n\n        const isTargetChannelArchived = isChannelArchived(targetChannel);\n        const isTargetChannelPinned = isChannelPinned(targetChannel);\n\n        const newChannels = [...currentChannels];\n\n        if (targetChannelExistsWithinList) {\n          newChannels.splice(targetChannelIndex, 1);\n        }\n\n        // handle archiving (remove channel)\n        if (\n          (considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||\n          (considerArchivedChannels && !isTargetChannelArchived && filters.archived)\n        ) {\n          return newChannels;\n        }\n\n        let lastPinnedChannelIndex: number | null = null;\n\n        // calculate last pinned channel index only if `pinned_at` sort is set to\n        // ascending order or if it's in descending order while the pin is being removed, otherwise\n        // we move to the top (index 0)\n        if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !isTargetChannelPinned)) {\n          lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });\n        }\n\n        const newTargetChannelIndex =\n          typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0;\n\n        newChannels.splice(newTargetChannelIndex, 0, targetChannel);\n\n        return newChannels;\n      });\n    },\n    [client],\n  );\n\n  const handleChannelDeleted = useCallback(\n    (p: HandleChannelDeletedParameters) => shared(p),\n    [],\n  );\n\n  const handleChannelHidden = useCallback(\n    (p: HandleChannelHiddenParameters) => shared(p),\n    [],\n  );\n\n  const handleChannelVisible = useCallback(\n    async ({\n      customHandler,\n      event,\n      filters,\n      setChannels,\n      sort,\n    }: HandleChannelVisibleParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      if (!event.channel_id && !event.channel_type) {\n        return;\n      }\n\n      const channel = await getChannel({\n        client,\n        id: event.channel_id,\n        type: event.channel_type,\n      });\n\n      const considerArchivedChannels = shouldConsiderArchivedChannels(filters);\n      if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {\n        return;\n      }\n\n      setChannels((channels) =>\n        moveChannelUpwards({\n          channels,\n          channelToMove: channel,\n          sort,\n        }),\n      );\n    },\n    [client],\n  );\n\n  const handleChannelTruncated = useCallback(\n    ({ customHandler, event, setChannels }: HandleChannelTruncatedParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      // TODO: not sure whether this is needed\n      setChannels((channels) => [...channels]);\n      // if (forceUpdate) {\n      //   forceUpdate();\n      // }\n    },\n    [],\n  );\n\n  const handleChannelUpdated = useCallback(\n    ({ customHandler, event, setChannels }: HandleChannelUpdatedParameters) => {\n      if (typeof customHandler === 'function') {\n        return customHandler(setChannels, event);\n      }\n\n      setChannels((channels) => {\n        const channelIndex = channels.findIndex(\n          (channel) => channel.cid === event.channel?.cid,\n        );\n\n        if (channelIndex > -1 && event.channel) {\n          const newChannels = channels;\n          newChannels[channelIndex].data = {\n            ...event.channel,\n            hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,\n            own_capabilities:\n              event.channel?.own_capabilities ??\n              newChannels[channelIndex].data?.own_capabilities,\n          };\n\n          return [...newChannels];\n        }\n\n        return channels;\n      });\n\n      // if (forceUpdate) {\n      //   forceUpdate();\n      // }\n    },\n    [],\n  );\n\n  const handleUserPresenceChanged = useCallback(\n    ({ event, setChannels }: HandleUserPresenceChangedParameters) => {\n      setChannels((channels) => {\n        const newChannels = channels.map((channel) => {\n          if (!event.user?.id || !channel.state.members[event.user.id]) {\n            return channel;\n          }\n\n          // FIXME: oh no...\n          const newChannel = channel;\n          newChannel.state.members[event.user.id].user = event.user;\n\n          return newChannel;\n        });\n\n        return newChannels;\n      });\n    },\n    [],\n  );\n\n  return useMemo(\n    () => ({\n      handleChannelDeleted,\n      handleChannelHidden,\n      handleChannelTruncated,\n      handleChannelUpdated,\n      handleChannelVisible,\n      handleMemberUpdated,\n      handleMessageNew,\n      handleNotificationAddedToChannel,\n      handleNotificationMessageNew,\n      handleNotificationRemovedFromChannel,\n      handleUserPresenceChanged,\n    }),\n    [\n      handleChannelDeleted,\n      handleChannelHidden,\n      handleChannelTruncated,\n      handleChannelUpdated,\n      handleChannelVisible,\n      handleMemberUpdated,\n      handleMessageNew,\n      handleNotificationAddedToChannel,\n      handleNotificationMessageNew,\n      handleNotificationRemovedFromChannel,\n      handleUserPresenceChanged,\n    ],\n  );\n};\n\ntype UseDefaultHandleChannelListShapeParameters = Required<\n  Pick<\n    ChannelListProps,\n    'allowNewMessagesFromUnfilteredChannels' | 'lockChannelOrder' | 'filters' | 'sort'\n  >\n> &\n  Pick<\n    ChannelListProps,\n    | 'onAddedToChannel'\n    | 'onChannelDeleted'\n    | 'onChannelHidden'\n    | 'onChannelTruncated'\n    | 'onChannelUpdated'\n    | 'onChannelVisible'\n    | 'onMessageNew'\n    | 'onMessageNewHandler'\n    | 'onRemovedFromChannel'\n  > & {\n    setChannels: SetChannels;\n    customHandleChannelListShape?: (data: {\n      defaults: ReturnType<typeof useChannelListShapeDefaults>;\n      event: Event;\n      setChannels: SetChannels;\n    }) => void;\n  };\n\nexport const usePrepareShapeHandlers = ({\n  allowNewMessagesFromUnfilteredChannels,\n  customHandleChannelListShape,\n  filters,\n  lockChannelOrder,\n  onAddedToChannel,\n  onChannelDeleted,\n  onChannelHidden,\n  onChannelTruncated,\n  onChannelUpdated,\n  onChannelVisible,\n  onMessageNew,\n  onMessageNewHandler,\n  onRemovedFromChannel,\n  setChannels,\n  sort,\n}: UseDefaultHandleChannelListShapeParameters) => {\n  const defaults = useChannelListShapeDefaults();\n\n  const defaultHandleChannelListShapeRef = useRef<(e: Event) => void>(undefined);\n\n  const customHandleChannelListShapeRef = useRef<(e: Event) => void>(undefined);\n\n  customHandleChannelListShapeRef.current = (event: Event) => {\n    customHandleChannelListShape?.({ defaults, event, setChannels });\n  };\n\n  defaultHandleChannelListShapeRef.current = (event: Event) => {\n    switch (event.type) {\n      case 'message.new':\n        defaults.handleMessageNew({\n          allowNewMessagesFromUnfilteredChannels,\n          customHandler: onMessageNewHandler,\n          event,\n          filters,\n          lockChannelOrder,\n          setChannels,\n          sort,\n        });\n        break;\n      case 'notification.message_new':\n        defaults.handleNotificationMessageNew({\n          allowNewMessagesFromUnfilteredChannels,\n          customHandler: onMessageNew,\n          event,\n          filters,\n          lockChannelOrder,\n          setChannels,\n          sort,\n        });\n        break;\n      case 'notification.added_to_channel':\n        defaults.handleNotificationAddedToChannel({\n          allowNewMessagesFromUnfilteredChannels,\n          customHandler: onAddedToChannel,\n          event,\n          lockChannelOrder,\n          setChannels,\n          sort,\n        });\n        break;\n      case 'notification.removed_from_channel':\n        defaults.handleNotificationRemovedFromChannel({\n          customHandler: onRemovedFromChannel,\n          event,\n          setChannels,\n        });\n        break;\n      case 'channel.deleted':\n        defaults.handleChannelDeleted({\n          customHandler: onChannelDeleted,\n          event,\n          setChannels,\n        });\n        break;\n      case 'channel.hidden':\n        defaults.handleChannelHidden({\n          customHandler: onChannelHidden,\n          event,\n          setChannels,\n        });\n        break;\n      case 'channel.visible':\n        defaults.handleChannelVisible({\n          customHandler: onChannelVisible,\n          event,\n          filters,\n          setChannels,\n          sort,\n        });\n        break;\n      case 'channel.truncated':\n        defaults.handleChannelTruncated({\n          customHandler: onChannelTruncated,\n          event,\n          setChannels,\n        });\n        break;\n      case 'channel.updated':\n        defaults.handleChannelUpdated({\n          customHandler: onChannelUpdated,\n          event,\n          setChannels,\n        });\n        break;\n      case 'user.presence.changed':\n        defaults.handleUserPresenceChanged({ event, setChannels });\n        break;\n      case 'member.updated':\n        defaults.handleMemberUpdated({\n          event,\n          filters,\n          lockChannelOrder,\n          setChannels,\n          sort,\n        });\n        break;\n      default:\n        break;\n    }\n  };\n\n  const defaultFn = useCallback((e: Event) => {\n    defaultHandleChannelListShapeRef.current?.(e);\n  }, []);\n\n  const customFn = useMemo(() => {\n    if (!customHandleChannelListShape) return null;\n    return (e: Event) => {\n      customHandleChannelListShapeRef.current?.(e);\n    };\n  }, [customHandleChannelListShape]);\n\n  return {\n    customHandler: customFn,\n    defaultHandler: defaultFn,\n  };\n};\n\nexport const useChannelListShape = (handler: (e: Event) => void) => {\n  const { client } = useChatContext();\n\n  useEffect(() => {\n    const subscription = client.on('all', handler);\n\n    return subscription.unsubscribe;\n  }, [client, handler]);\n};\n"],"mappings":"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"}

package/dist/es/components/ChannelList/hooks/useChannelMembersState.mjs

@@ -0,0 +1,23 @@
+import { useSelectedChannelState } from "./useSelectedChannelState.mjs";
+//#region src/components/ChannelList/hooks/useChannelMembersState.ts
+var selector = (c) => c.state.members;
+var keys = [
+	"member.updated",
+	"member.added",
+	"member.removed",
+	"user.banned",
+	"user.unbanned",
+	"user.deleted",
+	"user.presence.changed"
+];
+function useChannelMembersState(channel) {
+	return useSelectedChannelState({
+		channel,
+		selector,
+		stateChangeEventKeys: keys
+	});
+}
+//#endregion
+export { useChannelMembersState };
+
+//# sourceMappingURL=useChannelMembersState.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelMembersState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMembersState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembersState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.members;\nconst keys: EventTypes[] = [\n  'member.updated',\n  'member.added',\n  'member.removed',\n  'user.banned',\n  'user.unbanned',\n  'user.deleted',\n  'user.presence.changed',\n];\n\nexport function useChannelMembersState(\n  channel: Channel,\n): Record<string, ChannelMemberResponse>;\nexport function useChannelMembersState(\n  channel?: Channel | undefined,\n): Record<string, ChannelMemberResponse> | undefined;\nexport function useChannelMembersState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAQA,SAAgB,uBAAuB,SAAmB;CACxD,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}

package/dist/es/components/ChannelList/hooks/useChannelMembershipState.mjs

@@ -0,0 +1,15 @@
+import { useSelectedChannelState } from "./useSelectedChannelState.mjs";
+//#region src/components/ChannelList/hooks/useChannelMembershipState.ts
+var selector = (c) => c.state.membership;
+var keys = ["member.updated"];
+function useChannelMembershipState(channel) {
+	return useSelectedChannelState({
+		channel,
+		selector,
+		stateChangeEventKeys: keys
+	});
+}
+//#endregion
+export { useChannelMembershipState };
+
+//# sourceMappingURL=useChannelMembershipState.mjs.map

package/dist/es/components/ChannelList/hooks/useChannelMembershipState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMembershipState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelMembershipState.ts"],"sourcesContent":["import type { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.membership;\nconst keys: EventTypes[] = ['member.updated'];\n\nexport function useChannelMembershipState(channel: Channel): ChannelMemberResponse;\nexport function useChannelMembershipState(\n  channel?: Channel | undefined,\n): ChannelMemberResponse | undefined;\nexport function useChannelMembershipState(channel?: Channel) {\n  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });\n}\n"],"mappings":";;AAGA,IAAM,YAAY,MAAe,EAAE,MAAM;AACzC,IAAM,OAAqB,CAAC,gBAAgB;AAM5C,SAAgB,0BAA0B,SAAmB;CAC3D,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}

package/dist/es/components/ChannelList/hooks/useConnectionRecoveredListener.mjs

@@ -0,0 +1,19 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useEffect } from "react";
+//#region src/components/ChannelList/hooks/useConnectionRecoveredListener.ts
+var useConnectionRecoveredListener = (forceUpdate) => {
+	const { client } = useChatContext("useConnectionRecoveredListener");
+	useEffect(() => {
+		const handleEvent = () => {
+			if (forceUpdate) forceUpdate();
+		};
+		client.on("connection.recovered", handleEvent);
+		return () => {
+			client.off("connection.recovered", handleEvent);
+		};
+	}, [client, forceUpdate]);
+};
+//#endregion
+export { useConnectionRecoveredListener };
+
+//# sourceMappingURL=useConnectionRecoveredListener.mjs.map

package/dist/es/components/ChannelList/hooks/useConnectionRecoveredListener.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConnectionRecoveredListener.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useConnectionRecoveredListener.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nexport const useConnectionRecoveredListener = (forceUpdate?: () => void) => {\n  const { client } = useChatContext('useConnectionRecoveredListener');\n\n  useEffect(() => {\n    const handleEvent = () => {\n      if (forceUpdate) {\n        forceUpdate();\n      }\n    };\n\n    client.on('connection.recovered', handleEvent);\n\n    return () => {\n      client.off('connection.recovered', handleEvent);\n    };\n  }, [client, forceUpdate]);\n};\n"],"mappings":";;;AAIA,IAAa,kCAAkC,gBAA6B;CAC1E,MAAM,EAAE,WAAW,eAAe,gCAAgC;CAElE,gBAAgB;EACd,MAAM,oBAAoB;GACxB,IAAI,aACF,YAAY;EAEhB;EAEA,OAAO,GAAG,wBAAwB,WAAW;EAE7C,aAAa;GACX,OAAO,IAAI,wBAAwB,WAAW;EAChD;CACF,GAAG,CAAC,QAAQ,WAAW,CAAC;AAC1B"}

package/dist/es/components/ChannelList/hooks/usePaginatedChannels.mjs

@@ -0,0 +1,110 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import uniqBy from "lodash.uniqby";
+//#region src/components/ChannelList/hooks/usePaginatedChannels.ts
+var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5e3;
+var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2e3;
+/**
+* The `predefined_filter` response carries sort as
+* `[{ field, direction }]`. `ChannelSort` expects `[{ field: direction }]`.
+*/
+var mapPredefinedFilterSortToChannelSort = (sort) => sort.map(({ direction = 1, field }) => ({ [field]: direction }));
+var usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
+	const { addNotification } = useNotificationApi();
+	const { channelsQueryState: { error, setError, setQueryInProgress } } = useChatContext("usePaginatedChannels");
+	const { t } = useTranslationContext();
+	const [channels, setChannels] = useState([]);
+	const [hasNextPage, setHasNextPage] = useState(true);
+	const [responseFilters, setResponseFilters] = useState(void 0);
+	const [responseSort, setResponseSort] = useState(void 0);
+	const lastRecoveryTimestamp = useRef(void 0);
+	const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;
+	const filterString = useMemo(() => JSON.stringify(filters), [filters]);
+	const sortString = useMemo(() => JSON.stringify(sort), [sort]);
+	const queryChannels = async (queryType = "load-more") => {
+		setError(null);
+		const offset = queryType === "reload" ? 0 : channels.length;
+		const isFirstPage = offset === 0;
+		if (queryType === "reload") setChannels([]);
+		setQueryInProgress(queryType);
+		try {
+			if (customQueryChannels) {
+				await customQueryChannels({
+					currentChannels: channels,
+					queryType,
+					setChannels,
+					setHasNextPage
+				});
+				setResponseFilters(void 0);
+				setResponseSort(void 0);
+			} else {
+				const newOptions = {
+					offset,
+					...options
+				};
+				const channelQueryResponse = await client.queryChannels(filters, sort || {}, newOptions, { withResponse: true });
+				const newChannels = queryType === "reload" ? channelQueryResponse.channels : uniqBy([...channels, ...channelQueryResponse.channels], "cid");
+				setChannels(newChannels);
+				setHasNextPage(channelQueryResponse.channels.length >= (newOptions.limit ?? 1));
+				const predefinedFilter = channelQueryResponse.predefined_filter;
+				const nextResponseFilters = predefinedFilter ? predefinedFilter.filter : void 0;
+				const nextResponseSort = predefinedFilter?.sort ? mapPredefinedFilterSortToChannelSort(predefinedFilter.sort) : void 0;
+				setResponseFilters(nextResponseFilters);
+				setResponseSort(nextResponseSort);
+				if (!offset && activeChannelHandler) activeChannelHandler(newChannels, setChannels, {
+					filters: nextResponseFilters ?? filters,
+					sort: nextResponseSort ?? sort
+				});
+			}
+		} catch (error) {
+			console.warn(error);
+			addNotification({
+				emitter: "ChannelList",
+				error: error instanceof Error ? error : void 0,
+				message: isFirstPage ? t("Failed to load channels") : t("Failed to load more channels"),
+				severity: "error",
+				targetPanels: ["channel-list"],
+				type: isFirstPage ? "api:channel-list:load:failed" : "api:channel-list:load-more:failed"
+			});
+			if (isFirstPage) setError(error);
+		}
+		setQueryInProgress(null);
+	};
+	const throttleRecover = useCallback(() => {
+		const now = Date.now();
+		const isFirstRecovery = !lastRecoveryTimestamp.current;
+		const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current ? now - lastRecoveryTimestamp.current : 0;
+		if (!isFirstRecovery && timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval && !error) return;
+		lastRecoveryTimestamp.current = now;
+		queryChannels("reload");
+	}, [
+		error,
+		queryChannels,
+		recoveryThrottleInterval
+	]);
+	const loadNextPage = () => queryChannels();
+	useEffect(() => {
+		if (client.recoverStateOnReconnect) return;
+		const { unsubscribe } = client.on("connection.recovered", throttleRecover);
+		return () => {
+			unsubscribe();
+		};
+	}, [client, throttleRecover]);
+	useEffect(() => {
+		queryChannels("reload");
+	}, [filterString, sortString]);
+	return {
+		channels,
+		effectiveFilters: responseFilters ?? filters,
+		effectiveSort: responseSort ?? sort,
+		hasNextPage,
+		loadNextPage,
+		setChannels
+	};
+};
+//#endregion
+export { usePaginatedChannels };
+
+//# sourceMappingURL=usePaginatedChannels.mjs.map