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

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, EventType } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.members;\nconst keys: EventType[] = [\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,OAAoB;CACxB;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, EventType } from 'stream-chat';\nimport { useSelectedChannelState } from './useSelectedChannelState';\n\nconst selector = (c: Channel) => c.state.membership;\nconst keys: EventType[] = ['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,OAAoB,CAAC,gBAAgB;AAM3C,SAAgB,0BAA0B,SAAmB;CAC3D,OAAO,wBAAwB;EAAE;EAAS;EAAU,sBAAsB;CAAK,CAAC;AAClF"}

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

@@ -0,0 +1,21 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+//#region src/components/ChannelList/hooks/useChannelPaginatorState.ts
+var selector = (state) => ({
+	channels: state.items,
+	hasNext: state.hasMoreTail,
+	hasPrev: state.hasMoreHead,
+	isLoading: state.isLoading,
+	lastQueryError: state.lastQueryError
+});
+/**
+* Reactive view of a `ChannelPaginator`'s paginated state — the channels plus query status. This
+* is the single supported read path for the paginated list, so consumers never touch the raw
+* store shape (which lets the SDK evolve its internal storage, e.g. id-based, without breaking
+* callers). Items ingested out of pagination order are a separate concern — subscribe to the
+* paginator's `intervalViews` store (`logicalHead` / `logicalTail`) for those.
+*/
+var useChannelPaginatorState = (paginator) => useStateStore(paginator.state, selector);
+//#endregion
+export { useChannelPaginatorState };
+
+//# sourceMappingURL=useChannelPaginatorState.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelPaginatorState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useChannelPaginatorState.ts"],"sourcesContent":["import type { ChannelPaginator, ChannelPaginatorState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\n\nexport type ChannelPaginatorView = {\n  /** The channels currently loaded by pagination, in server order. */\n  channels: ChannelPaginatorState['items'];\n  hasNext: boolean;\n  hasPrev: boolean;\n  isLoading: boolean;\n  lastQueryError?: Error;\n};\n\nconst selector = (state: ChannelPaginatorState): ChannelPaginatorView => ({\n  channels: state.items,\n  hasNext: state.hasMoreTail,\n  hasPrev: state.hasMoreHead,\n  isLoading: state.isLoading,\n  lastQueryError: state.lastQueryError,\n});\n\n/**\n * Reactive view of a `ChannelPaginator`'s paginated state — the channels plus query status. This\n * is the single supported read path for the paginated list, so consumers never touch the raw\n * store shape (which lets the SDK evolve its internal storage, e.g. id-based, without breaking\n * callers). Items ingested out of pagination order are a separate concern — subscribe to the\n * paginator's `intervalViews` store (`logicalHead` / `logicalTail`) for those.\n */\nexport const useChannelPaginatorState = (paginator: ChannelPaginator) =>\n  useStateStore(paginator.state, selector);\n"],"mappings":";;AAaA,IAAM,YAAY,WAAwD;CACxE,UAAU,MAAM;CAChB,SAAS,MAAM;CACf,SAAS,MAAM;CACf,WAAW,MAAM;CACjB,gBAAgB,MAAM;AACxB;;;;;;;;AASA,IAAa,4BAA4B,cACvC,cAAc,UAAU,OAAO,QAAQ"}

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

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+//#region src/components/ChannelList/hooks/useSelectedChannelState.ts
+var noop = () => {};
+function useSelectedChannelState({ channel, selector, stateChangeEventKeys = ["all"] }) {
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!channel) return noop;
+		const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+			onStoreChange(selector(channel));
+		}));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [
+		channel,
+		selector,
+		stateChangeEventKeys
+	]), useCallback(() => {
+		if (!channel) return void 0;
+		return selector(channel);
+	}, [channel, selector]));
+}
+//#endregion
+export { useSelectedChannelState };
+
+//# sourceMappingURL=useSelectedChannelState.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedChannelState.mjs","names":[],"sources":["../../../../../src/components/ChannelList/hooks/useSelectedChannelState.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Channel, EventType } from 'stream-chat';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport function useSelectedChannelState<O>(_: {\n  channel: Channel;\n  selector: (channel: Channel) => O;\n  stateChangeEventKeys?: EventType[];\n}): O;\nexport function useSelectedChannelState<O>(_: {\n  selector: (channel: Channel) => O;\n  channel?: Channel | undefined;\n  stateChangeEventKeys?: EventType[];\n}): O | undefined;\nexport function useSelectedChannelState<O>({\n  channel,\n  selector,\n  stateChangeEventKeys = ['all'],\n}: {\n  selector: (channel: Channel) => O;\n  channel?: Channel;\n  stateChangeEventKeys?: EventType[];\n}): O | undefined {\n  const subscribe = useCallback(\n    (onStoreChange: (value: O) => void) => {\n      if (!channel) return noop;\n\n      const subscriptions = stateChangeEventKeys.map((et) =>\n        channel.on(et, () => {\n          onStoreChange(selector(channel));\n        }),\n      );\n\n      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());\n    },\n    [channel, selector, stateChangeEventKeys],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (!channel) return undefined;\n\n    return selector(channel);\n  }, [channel, selector]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":";;;AAKA,IAAM,aAAa,CAAC;AAYpB,SAAgB,wBAA2B,EACzC,SACA,UACA,uBAAuB,CAAC,KAAK,KAKb;CAsBhB,OAAO,qBArBW,aACf,kBAAsC;EACrC,IAAI,CAAC,SAAS,OAAO;EAErB,MAAM,gBAAgB,qBAAqB,KAAK,OAC9C,QAAQ,GAAG,UAAU;GACnB,cAAc,SAAS,OAAO,CAAC;EACjC,CAAC,CACH;EAEA,aAAa,cAAc,SAAS,iBAAiB,aAAa,YAAY,CAAC;CACjF,GACA;EAAC;EAAS;EAAU;CAAoB,CASd,GANR,kBAAkB;EACpC,IAAI,CAAC,SAAS,OAAO,KAAA;EAErB,OAAO,SAAS,OAAO;CACzB,GAAG,CAAC,SAAS,QAAQ,CAEkB,CAAW;AACpD"}

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

@@ -0,0 +1,65 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { requireContext } from "../../context/requireContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useChannelMembershipState } from "../ChannelList/hooks/useChannelMembershipState.mjs";
+import { useIsChannelMuted } from "./hooks/useIsChannelMuted.mjs";
+import { useMessageDeliveryStatus } from "./hooks/useMessageDeliveryStatus.mjs";
+import { ChannelListItemUI } from "./ChannelListItemUI.mjs";
+import { useChannelPreviewInfo } from "./hooks/useChannelPreviewInfo.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.mjs";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import throttle from "lodash.throttle";
+//#region src/components/ChannelListItem/ChannelListItem.tsx
+var ChannelListItemContext = React.createContext(void 0);
+var useChannelListItemContext = () => requireContext(useContext(ChannelListItemContext), "useChannelListItemContext", "ChannelListItemUI");
+var lastMessageSelector = ({ lastMessage }) => ({ lastMessage: lastMessage ?? void 0 });
+var ChannelListItem = (props) => {
+	const { active, channel } = props;
+	const { ChannelListItemUI: ChannelListItemUI$1 = ChannelListItemUI } = useComponentContext();
+	const { client } = useChatContext();
+	const channelOpenInSlot = useWorkspaceNavigation().isChannelActive(channel.cid ?? void 0);
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({ channel });
+	const membership = useChannelMembershipState(channel);
+	const { lastMessage: trackedLastMessage } = useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector);
+	const previewedMessage = props.previewedMessage ?? trackedLastMessage;
+	const { messageDeliveryStatus } = useMessageDeliveryStatus({
+		channel,
+		lastMessage: previewedMessage
+	});
+	const isActive = typeof active === "undefined" ? !!channelOpenInSlot : active;
+	const { muted } = useIsChannelMuted(channel);
+	const [unreadCount, setUnreadCount] = useState(() => channel.countUnread());
+	useEffect(() => {
+		const ownUserId = client.user?.id;
+		const apply = throttle(setUnreadCount, 400);
+		const unsubscribe = channel.state.subscribeWithSelector(({ read }) => ({ unreadCount: ownUserId ? read[ownUserId]?.unread_messages ?? 0 : 0 }), ({ unreadCount }) => apply(unreadCount));
+		return () => {
+			apply.cancel();
+			unsubscribe();
+		};
+	}, [channel, client]);
+	const unread = muted ? 0 : unreadCount;
+	const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);
+	if (!ChannelListItemUI$1) return null;
+	return /* @__PURE__ */ jsx(ChannelListItemContext.Provider, {
+		value: channelPreviewContextValue,
+		children: /* @__PURE__ */ jsx(ChannelListItemUI$1, {
+			...props,
+			active: isActive,
+			displayImage,
+			displayTitle,
+			groupChannelDisplayInfo,
+			messageDeliveryStatus,
+			muted,
+			pinned: membership.pinned_at != null,
+			previewedMessage,
+			unread
+		})
+	});
+};
+//#endregion
+export { ChannelListItem, useChannelListItemContext };
+
+//# sourceMappingURL=ChannelListItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItem.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItem.tsx"],"sourcesContent":["import throttle from 'lodash.throttle';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { Channel, LocalMessage, MessagePaginatorAggregateState } from 'stream-chat';\n\nimport { useStateStore } from '../../store';\n\nimport { ChannelListItemUI as DefaultChannelListItemUI } from './ChannelListItemUI';\nimport { useIsChannelMuted } from './hooks/useIsChannelMuted';\nimport { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';\nimport type { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport type { GroupChannelDisplayInfo } from './utils';\nimport type { ChannelListItemLabelConfig } from './utils.a11y';\nimport {\n  useChatContext,\n  useComponentContext,\n  useWorkspaceNavigation,\n} from '../../context';\nimport { useChannelMembershipState } from '../ChannelList';\nimport { requireContext } from '../../context/requireContext';\n\nexport type ChannelListItemUIProps = ChannelListItemProps & {\n  /**\n   * Configures the row's composed accessible name (part overrides, order, separator, or a full\n   * `build`). Supply it from a `ComponentContext`-provided `ChannelListItemUI` to customize the\n   * announcement. See `composeChannelListItemAccessibleLabel`.\n   */\n  accessibleLabelConfig?: ChannelListItemLabelConfig;\n  /** Image of Channel to display */\n  displayImage?: string;\n  /** Title of Channel to display */\n  displayTitle?: string;\n  /** Title of Channel to display */\n  groupChannelDisplayInfo?: GroupChannelDisplayInfo;\n  /** The message previewed by this item — see {@link ChannelListItemProps.previewedMessage}. */\n  previewedMessage?: LocalMessage;\n  /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n  /** Whether the channel is muted by the current user */\n  muted?: boolean;\n  /** Whether the channel is pinned by the current user */\n  pinned?: boolean;\n  /** Number of unread Messages */\n  unread?: number;\n};\n\nexport type ChannelListItemProps = {\n  /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */\n  channel: Channel;\n  /** If the component's channel is the active (selected) Channel */\n  active?: boolean;\n  /** Current selected channel object */\n  activeChannel?: Channel;\n  /** Custom class for the channel preview root */\n  className?: string;\n  /**\n   * The message previewed by this item. Defaults to the channel's reactive latest message\n   * (`channel.messagePaginator.aggregateState.lastMessage`); pass a specific message to preview it\n   * instead — e.g. a search result previewing the matched message, where the channel's latest message\n   * would be misleading.\n   */\n  previewedMessage?: LocalMessage;\n  /** Custom ChannelListItem click handler function */\n  onSelect?: (event: React.MouseEvent) => void;\n};\n\nconst ChannelListItemContext = React.createContext<{ channel: Channel } | undefined>(\n  undefined,\n);\n\nexport const useChannelListItemContext = () =>\n  requireContext(\n    useContext(ChannelListItemContext),\n    'useChannelListItemContext',\n    'ChannelListItemUI',\n  );\n\nconst lastMessageSelector = ({ lastMessage }: MessagePaginatorAggregateState) => ({\n  lastMessage: lastMessage ?? undefined,\n});\n\nexport const ChannelListItem = (props: ChannelListItemProps) => {\n  const { active, channel } = props;\n  const { ChannelListItemUI = DefaultChannelListItemUI } = useComponentContext();\n  const { client } = useChatContext();\n  // Active = THIS channel is currently open in the workspace. Keyed on the channel's own\n  // cid (never \"the first channel slot\"), so multiple open channels each highlight independently.\n  const channelOpenInSlot = useWorkspaceNavigation().isChannelActive(\n    channel.cid ?? undefined,\n  );\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n  });\n  const membership = useChannelMembershipState(channel);\n\n  const { lastMessage: trackedLastMessage } = useStateStore(\n    channel.messagePaginator.aggregateState,\n    lastMessageSelector,\n  );\n  // A caller may override the previewed message per instance (e.g. a search result previewing the\n  // matched message); otherwise use the channel's reactive tracked latest.\n  const previewedMessage = props.previewedMessage ?? trackedLastMessage;\n\n  const { messageDeliveryStatus } = useMessageDeliveryStatus({\n    channel,\n    lastMessage: previewedMessage,\n  });\n\n  const isActive = typeof active === 'undefined' ? !!channelOpenInSlot : active;\n  const { muted } = useIsChannelMuted(channel);\n\n  // The channel already owns this number: `countUnread()` with no argument returns\n  // `read[ownUserId].unread_messages`, and everything that moves it - a new message, a read from\n  // any device, an explicit mark-unread, a truncation, mark-all-read - writes there first. Reading\n  // the store means the guards that come with those writes (a thread read is not a channel read, a\n  // read by somebody else is not ours) hold here too, rather than being restated per event.\n  const [unreadCount, setUnreadCount] = useState(() => channel.countUnread());\n\n  useEffect(() => {\n    const ownUserId = client.user?.id;\n    // Throttled rather than rendered per change: a backfill or a burst of traffic can move the\n    // count many times in a frame, and a badge only has to keep up with the eye. Leading edge, so\n    // the first change still lands at once.\n    const apply = throttle(setUnreadCount, 400);\n\n    const unsubscribe = channel.state.subscribeWithSelector(\n      ({ read }) => ({\n        unreadCount: ownUserId ? (read[ownUserId]?.unread_messages ?? 0) : 0,\n      }),\n      ({ unreadCount }) => apply(unreadCount),\n    );\n\n    return () => {\n      apply.cancel();\n      unsubscribe();\n    };\n  }, [channel, client]);\n\n  // A muted channel still counts unread; it just does not advertise it. Applied at render rather\n  // than inside the subscription so muting and unmuting show up without waiting on the throttle.\n  const unread = muted ? 0 : unreadCount;\n\n  const channelPreviewContextValue = useMemo(() => ({ channel }), [channel]);\n\n  if (!ChannelListItemUI) return null;\n\n  return (\n    <ChannelListItemContext.Provider value={channelPreviewContextValue}>\n      <ChannelListItemUI\n        {...props}\n        active={isActive}\n        displayImage={displayImage}\n        displayTitle={displayTitle}\n        groupChannelDisplayInfo={groupChannelDisplayInfo}\n        messageDeliveryStatus={messageDeliveryStatus}\n        muted={muted}\n        pinned={membership.pinned_at != null}\n        previewedMessage={previewedMessage}\n        unread={unread}\n      />\n    </ChannelListItemContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkEA,IAAM,yBAAyB,MAAM,cACnC,KAAA,CACF;AAEA,IAAa,kCACX,eACE,WAAW,sBAAsB,GACjC,6BACA,mBACF;AAEF,IAAM,uBAAuB,EAAE,mBAAmD,EAChF,aAAa,eAAe,KAAA,EAC9B;AAEA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,YAAY;CAC5B,MAAM,EAAE,mBAAA,sBAAoB,sBAA6B,oBAAoB;CAC7E,MAAM,EAAE,WAAW,eAAe;CAGlC,MAAM,oBAAoB,uBAAuB,CAAC,CAAC,gBACjD,QAAQ,OAAO,KAAA,CACjB;CACA,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB,EACpF,QACF,CAAC;CACD,MAAM,aAAa,0BAA0B,OAAO;CAEpD,MAAM,EAAE,aAAa,uBAAuB,cAC1C,QAAQ,iBAAiB,gBACzB,mBACF;CAGA,MAAM,mBAAmB,MAAM,oBAAoB;CAEnD,MAAM,EAAE,0BAA0B,yBAAyB;EACzD;EACA,aAAa;CACf,CAAC;CAED,MAAM,WAAW,OAAO,WAAW,cAAc,CAAC,CAAC,oBAAoB;CACvE,MAAM,EAAE,UAAU,kBAAkB,OAAO;CAO3C,MAAM,CAAC,aAAa,kBAAkB,eAAe,QAAQ,YAAY,CAAC;CAE1E,gBAAgB;EACd,MAAM,YAAY,OAAO,MAAM;EAI/B,MAAM,QAAQ,SAAS,gBAAgB,GAAG;EAE1C,MAAM,cAAc,QAAQ,MAAM,uBAC/B,EAAE,YAAY,EACb,aAAa,YAAa,KAAK,UAAU,EAAE,mBAAmB,IAAK,EACrE,KACC,EAAE,kBAAkB,MAAM,WAAW,CACxC;EAEA,aAAa;GACX,MAAM,OAAO;GACb,YAAY;EACd;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAIpB,MAAM,SAAS,QAAQ,IAAI;CAE3B,MAAM,6BAA6B,eAAe,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;CAEzE,IAAI,CAAC,qBAAmB,OAAO;CAE/B,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACtC,oBAAC,qBAAD;GACE,GAAI;GACJ,QAAQ;GACM;GACA;GACW;GACF;GAChB;GACP,QAAQ,WAAW,aAAa;GACd;GACV;EACT,CAAA;CAC8B,CAAA;AAErC"}

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

@@ -0,0 +1,432 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.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 { useComponentContextIcons } from "../../context/useComponentContextIcons.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("common.channelUnmuted.text", "Channel unmuted"),
+					severity: "success",
+					type: "api:channel:unmute:success"
+				});
+			} else {
+				await channel.mute();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("common.channelMuted.text", "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("channelListItem.failedUpdateChannelMute.text", "Failed to update channel mute status"),
+				severity: "error",
+				type: "api:channel:mute:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": isMuted,
+		title: isMuted ? t("common.unmute.title", "Unmute") : t("common.mute.title", "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 != null) {
+				await channel.unarchive();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("channelListItem.channelUnarchived.text", "Channel unarchived"),
+					severity: "success",
+					type: "api:channel:unarchive:success"
+				});
+			} else {
+				await channel.archive();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("channelListItem.channelArchived.text", "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("channelListItem.failedUpdateChannelArchive.text", "Failed to update channel archive status"),
+				severity: "error",
+				type: "api:channel:archive:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": membership.archived_at != null,
+		title: membership.archived_at != null ? t("channelListItem.unarchive.title", "Unarchive") : t("channelListItem.archive.title", "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("common.userUnblocked.text", "User unblocked"),
+					severity: "success",
+					type: "api:user:unban:success"
+				});
+			} else {
+				await channel.banUser(otherUserId, {});
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("common.userBlocked.text", "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("channelListItem.failedBlockUser.text", "Failed to block user"),
+				severity: "error",
+				type: "api:user:ban:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": isUserBanned,
+		title: isUserBanned ? t("channelListItem.unblockUser.title", "Unblock User") : t("common.blockUser.title", "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("common.leftChannel.text", "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("common.failedLeaveChannel.text", "Failed to leave channel"),
+				severity: "error",
+				type: "api:channel:leave:failed"
+			});
+		}
+	};
+	return {
+		title: t("channelListItem.leaveChannel.title", "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 != null) {
+				await channel.unpin();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("channelListItem.channelUnpinned.text", "Channel unpinned"),
+					severity: "success",
+					type: "api:channel:unpin:success"
+				});
+			} else {
+				await channel.pin();
+				addNotification({
+					context: { channel },
+					emitter: ChannelListItemActionButtons.name,
+					message: t("channelListItem.channelPinned.text", "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("channelListItem.failedUpdateChannelPinned.text", "Failed to update channel pinned status"),
+				severity: "error",
+				type: "api:channel:pin:failed"
+			});
+		}
+	};
+	return {
+		"aria-pressed": membership.pinned_at != null,
+		title: membership.pinned_at != null ? t("common.unpin.title", "Unpin") : t("common.pin.title", "Pin"),
+		toggle
+	};
+};
+var defaultComponents = {
+	dropdown: {
+		Archive() {
+			const { IconArchive } = useComponentContextIcons();
+			const behaviorProps = useDropdownActionButtonProps(useArchiveAction());
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-archive",
+				Icon: IconArchive,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Ban() {
+			const { IconNoSign } = useComponentContextIcons();
+			const behaviorProps = useDropdownActionButtonProps(useBanAction());
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-ban",
+				Icon: IconNoSign,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Leave() {
+			const { IconLeave } = useComponentContextIcons();
+			const behaviorProps = useDropdownActionButtonProps(useLeaveAction());
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-leave",
+				Icon: IconLeave,
+				variant: "destructive",
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Mute() {
+			const { IconMute } = useComponentContextIcons();
+			const behaviorProps = useDropdownActionButtonProps(useMuteAction());
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-mute",
+				Icon: IconMute,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		},
+		Pin() {
+			const { IconPin } = useComponentContextIcons();
+			const behaviorProps = useDropdownActionButtonProps(usePinAction());
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				"aria-label": behaviorProps.title,
+				"data-testid": "dropdown-action-pin",
+				Icon: IconPin,
+				...behaviorProps,
+				children: behaviorProps.title
+			});
+		}
+	},
+	quick: {
+		Archive() {
+			const { IconArchive } = useComponentContextIcons();
+			const behaviorProps = useQuickActionButtonProps(useArchiveAction());
+			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 { IconMute } = useComponentContextIcons();
+			const behaviorProps = useQuickActionButtonProps(useMuteAction());
+			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 { IconMore } = useComponentContextIcons();
+		const { channel } = useChannelListItemContext();
+		const { t } = useTranslationContext();
+		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("channelListItem.openChannelActionsMenu.ariaLabel", "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