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

package/dist/es/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecordingPreviewSlot.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport React from 'react';\nimport {\n  isLocalVoiceRecordingAttachment,\n  type LocalVoiceRecordingAttachment,\n} from 'stream-chat';\nimport { useAttachmentsForPreview, useMessageComposerController } from '../hooks';\nimport { AudioAttachmentPreview } from './AudioAttachmentPreview';\nimport type { UploadAttachmentPreviewProps } from './types';\n\nexport type VoiceRecordingPreviewProps<CustomLocalMetadata = Record<string, unknown>> =\n  UploadAttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;\n\nexport type VoiceRecordingPreviewSlotProps = {\n  /** Custom UI component for each voice recording preview in the slot; defaults to AudioAttachmentPreview */\n  VoiceRecordingPreview?: ComponentType<VoiceRecordingPreviewProps>;\n};\n\n/**\n * Dedicated slot for voice recording preview(s), rendered apart from the main attachment preview list\n */\nexport const VoiceRecordingPreviewSlot = ({\n  VoiceRecordingPreview = AudioAttachmentPreview,\n}: VoiceRecordingPreviewSlotProps) => {\n  const messageComposer = useMessageComposerController();\n  const { attachments } = useAttachmentsForPreview();\n\n  const voiceAttachments = attachments.filter(isLocalVoiceRecordingAttachment);\n  const firstVoice = voiceAttachments[0];\n  if (!firstVoice) return null;\n\n  return (\n    <div\n      className='str-chat__message-composer-voice-preview-slot'\n      data-testid='voice-preview-slot'\n    >\n      <VoiceRecordingPreview\n        attachment={firstVoice}\n        handleRetry={messageComposer.attachmentManager.uploadAttachment}\n        removeAttachments={messageComposer.attachmentManager.removeAttachments}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAa,6BAA6B,EACxC,wBAAwB,6BACY;CACpC,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,gBAAgB,yBAAyB;CAGjD,MAAM,aADmB,YAAY,OAAO,+BACzB,CAAA,CAAiB;CACpC,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEZ,oBAAC,uBAAD;GACE,YAAY;GACZ,aAAa,gBAAgB,kBAAkB;GAC/C,mBAAmB,gBAAgB,kBAAkB;EACtD,CAAA;CACE,CAAA;AAET"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.mjs

@@ -0,0 +1,53 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useState } from "react";
+import { isImageAttachment, isVideoAttachment } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx
+var INTERACTIVE_SELECTOR = "button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]";
+function hasInteractiveAncestorBeforeRoot(target, root) {
+	if (!(target instanceof Element) || !root) return false;
+	let el = target;
+	while (el && el !== root) {
+		if (el.matches(INTERACTIVE_SELECTOR)) return true;
+		el = el.parentElement;
+	}
+	return false;
+}
+var AttachmentPreviewRoot = ({ attachment, onPressed, openPreview, tabIndex = 0, ...props }) => {
+	const { t } = useTranslationContext();
+	const [root, setRoot] = useState(null);
+	const url = attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;
+	const canDownloadAttachment = false;
+	//!!url;
+	const canPreviewAttachment = !!openPreview && (!!url && isImageAttachment(attachment) || isVideoAttachment(attachment));
+	const handlePressed = (e) => {
+		if (e.defaultPrevented) return;
+		if (hasInteractiveAncestorBeforeRoot(e.target, root)) return;
+		if (onPressed) {
+			if (!onPressed(e)) return;
+		}
+		if (canPreviewAttachment) {
+			openPreview();
+			return;
+		}
+	};
+	const isInteractive = canPreviewAttachment || canDownloadAttachment;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": !isInteractive ? void 0 : canPreviewAttachment ? t("messageComposer.attachmentPreviewRoot.showPreview.ariaLabel", "Show preview") : t("common.downloadAttachment.ariaLabel", "Download attachment"),
+		...props,
+		onClick: handlePressed,
+		onKeyDown: isInteractive ? (e) => {
+			if (e.key !== "Enter" && e.key !== " ") return;
+			handlePressed(e);
+			e.preventDefault();
+		} : void 0,
+		ref: setRoot,
+		role: isInteractive ? "button" : void 0,
+		tabIndex: isInteractive ? tabIndex : -1,
+		children: props.children
+	});
+};
+//#endregion
+export { AttachmentPreviewRoot };
+
+//# sourceMappingURL=AttachmentPreviewRoot.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreviewRoot.mjs","names":[],"sources":["../../../../../../src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx"],"sourcesContent":["import React, {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  useState,\n} from 'react';\nimport { useTranslationContext } from '../../../../context';\nimport {\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalUploadAttachment,\n} from 'stream-chat';\n\ntype AttachmentPreviewRootProps = Omit<ComponentProps<'div'>, 'onClick' | 'onKeyDown'> & {\n  attachment: LocalUploadAttachment;\n  /**\n   * Called when the attachment preview is pressed and can be previewed.\n   * The parent is responsible for opening the gallery at the correct index.\n   */\n  openPreview?: () => void;\n  /**\n   * Returns boolean value to signal whether the event handling should be terminated immediately (return false)\n   *  or default logic can be executed next (return true)\n   */\n  onPressed?: (e: MouseEvent<Element> | KeyboardEvent<Element>) => boolean;\n};\n\nconst INTERACTIVE_SELECTOR =\n  'button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]';\n\nfunction hasInteractiveAncestorBeforeRoot(\n  target: EventTarget | null,\n  root: HTMLElement | null,\n): boolean {\n  if (!(target instanceof Element) || !root) return false;\n\n  let el: Element | null = target;\n  while (el && el !== root) {\n    if (el.matches(INTERACTIVE_SELECTOR)) return true;\n    el = el.parentElement;\n  }\n  return false;\n}\n\n// todo: use this component for all the attachment previews\nexport const AttachmentPreviewRoot = ({\n  attachment,\n  onPressed,\n  openPreview,\n  tabIndex = 0,\n  ...props\n}: AttachmentPreviewRootProps) => {\n  const { t } = useTranslationContext();\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const url =\n    attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;\n\n  const canDownloadAttachment = false; //!!url;\n\n  const canPreviewAttachment =\n    !!openPreview &&\n    ((!!url && isImageAttachment(attachment)) || isVideoAttachment(attachment));\n\n  const handlePressed = (e: MouseEvent<Element> | KeyboardEvent<Element>) => {\n    if (e.defaultPrevented) return;\n\n    if (hasInteractiveAncestorBeforeRoot(e.target as Element, root)) return;\n\n    if (onPressed) {\n      const shouldContinue = onPressed(e);\n      if (!shouldContinue) return;\n    }\n\n    if (canPreviewAttachment) {\n      openPreview();\n      return;\n    }\n\n    if (canDownloadAttachment) {\n      window.open(url, '_blank', 'noopener,noreferrer');\n    }\n  };\n\n  const isInteractive = canPreviewAttachment || canDownloadAttachment;\n\n  return (\n    <div\n      aria-label={\n        !isInteractive\n          ? undefined\n          : canPreviewAttachment\n            ? t(\n                'messageComposer.attachmentPreviewRoot.showPreview.ariaLabel',\n                'Show preview',\n              )\n            : t('common.downloadAttachment.ariaLabel', 'Download attachment')\n      }\n      {...props}\n      onClick={handlePressed}\n      onKeyDown={\n        isInteractive\n          ? (e) => {\n              if (e.key !== 'Enter' && e.key !== ' ') return;\n              handlePressed(e);\n              e.preventDefault();\n            }\n          : undefined\n      }\n      ref={setRoot}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? tabIndex : -1}\n    >\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA2BA,IAAM,uBACJ;AAEF,SAAS,iCACP,QACA,MACS;CACT,IAAI,EAAE,kBAAkB,YAAY,CAAC,MAAM,OAAO;CAElD,IAAI,KAAqB;CACzB,OAAO,MAAM,OAAO,MAAM;EACxB,IAAI,GAAG,QAAQ,oBAAoB,GAAG,OAAO;EAC7C,KAAK,GAAG;CACV;CACA,OAAO;AACT;AAGA,IAAa,yBAAyB,EACpC,YACA,WACA,aACA,WAAW,GACX,GAAG,YAC6B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,MAAM,WAAW,SAAgC,IAAI;CAC5D,MAAM,MACJ,WAAW,aAAa,WAAW,aAAa,WAAW,cAAc;CAE3E,MAAM,wBAAwB;;CAE9B,MAAM,uBACJ,CAAC,CAAC,gBACA,CAAC,CAAC,OAAO,kBAAkB,UAAU,KAAM,kBAAkB,UAAU;CAE3E,MAAM,iBAAiB,MAAoD;EACzE,IAAI,EAAE,kBAAkB;EAExB,IAAI,iCAAiC,EAAE,QAAmB,IAAI,GAAG;EAEjE,IAAI;OAEE,CADmB,UAAU,CAC5B,GAAgB;EAAA;EAGvB,IAAI,sBAAsB;GACxB,YAAY;GACZ;EACF;CAKF;CAEA,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EACE,cACE,CAAC,gBACG,KAAA,IACA,uBACE,EACE,+DACA,cACF,IACA,EAAE,uCAAuC,qBAAqB;EAEtE,GAAI;EACJ,SAAS;EACT,WACE,iBACK,MAAM;GACL,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACxC,cAAc,CAAC;GACf,EAAE,eAAe;EACnB,IACA,KAAA;EAEN,KAAK;EACL,MAAM,gBAAgB,WAAW,KAAA;EACjC,UAAU,gBAAgB,WAAW;YAEpC,MAAM;CACJ,CAAA;AAET"}

package/dist/es/components/MessageComposer/AttachmentSelector/AttachmentSelector.mjs

@@ -0,0 +1,311 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { AttachmentSelectorContextProvider, useAttachmentSelectorContext } from "../../../context/AttachmentSelectorContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../../Dialog/hooks/useDialog.mjs";
+import { Portal } from "../../Portal/Portal.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useInertWhenHidden } from "../../Accessibility/hooks/useInertWhenHidden.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { ContextMenu, ContextMenuButton, useContextMenuContext } from "../../Dialog/components/ContextMenu.mjs";
+import { useChannelCapabilities } from "../../Channel/hooks/useChannelCapabilities.mjs";
+import { GlobalModal } from "../../Modal/GlobalModal.mjs";
+import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
+import { PollCreationDialog } from "../../Poll/PollCreationDialog/PollCreationDialog.mjs";
+import { useAttachmentManagerState } from "../hooks/useAttachmentManagerState.mjs";
+import { UploadFileInput } from "../../ReactFileUtilities/UploadButton.mjs";
+import { useMessageComposerCommands } from "../hooks/useMessageComposerCommands.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { CHANNEL_CONTAINER_ID } from "../../Channel/constants.mjs";
+import { ShareLocationDialog } from "../../Location/ShareLocationDialog.mjs";
+import { useIsCooldownActive } from "../hooks/useIsCooldownActive.mjs";
+import { CommandsMenu, CommandsMenuClassName, CommandsSubmenuHeader } from "./CommandsMenu.mjs";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx
+var availableCommandsStateSelector = ({ availableCommands }) => ({ availableCommands });
+var textComposerStateSelector = ({ command }) => ({ command });
+var AttachmentSelectorMenuInitButtonIcon = ({ className }) => {
+	const { AttachmentSelectorInitiationButtonContents } = useComponentContext();
+	const { IconPlus } = useComponentContextIcons();
+	if (AttachmentSelectorInitiationButtonContents) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: /* @__PURE__ */ jsx(AttachmentSelectorInitiationButtonContents, {})
+	});
+	return /* @__PURE__ */ jsx(IconPlus, { className: clsx("str-chat__attachment-selector__menu-button__icon", className) });
+};
+var AttachmentSelectorButton = forwardRef(function AttachmentSelectorButton({ className, iconClassName, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		circular: true,
+		className: clsx("str-chat__attachment-selector__menu-button", className),
+		"data-testid": "invoke-attachment-selector-button",
+		size: "lg",
+		variant: "secondary",
+		...props,
+		ref,
+		children: /* @__PURE__ */ jsx(AttachmentSelectorMenuInitButtonIcon, { className: iconClassName })
+	});
+});
+var SimpleAttachmentSelector = ({ buttonProps } = {}) => {
+	const channelCapabilities = useChannelCapabilities({ cid: useChannel().cid });
+	const { t } = useTranslationContext();
+	const inputRef = useRef(null);
+	const [buttonElement, setButtonElement] = useState(null);
+	const id = useStableId();
+	const isCooldownActive = useIsCooldownActive();
+	const { command } = useStateStore(useMessageComposerController().textComposer.state, textComposerStateSelector);
+	const inertProps = useInertWhenHidden(!!command, { setHiddenAttribute: false });
+	useEffect(() => {
+		if (!buttonElement) return;
+		const handleKeyUp = (event) => {
+			if (![" ", "Enter"].includes(event.key) || !inputRef.current) return;
+			event.preventDefault();
+			inputRef.current.click();
+		};
+		buttonElement.addEventListener("keyup", handleKeyUp);
+		return () => {
+			buttonElement.removeEventListener("keyup", handleKeyUp);
+		};
+	}, [buttonElement]);
+	if (!channelCapabilities.has("upload-file")) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__attachment-selector",
+		...inertProps,
+		children: [/* @__PURE__ */ jsx(AttachmentSelectorButton, {
+			...buttonProps,
+			"aria-label": t("messageComposer.attachmentSelector.openAttachmentSelector.ariaLabel", "Open Attachment Selector"),
+			disabled: isCooldownActive,
+			onClick: () => inputRef.current?.click(),
+			ref: setButtonElement
+		}), /* @__PURE__ */ jsx(UploadFileInput, {
+			id,
+			ref: inputRef
+		})]
+	});
+};
+var DefaultAttachmentSelectorComponents = {
+	Command({ submenuHeader, submenuItems }) {
+		const { t } = useTranslationContext();
+		const { IconCommand } = useComponentContextIcons();
+		const { openSubmenu } = useContextMenuContext();
+		const hasEnabledCommands = useMessageComposerCommands().some(({ enabled }) => enabled);
+		const hasSubmenu = !!submenuItems;
+		return /* @__PURE__ */ jsx(ContextMenuButton, {
+			className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__commands-button",
+			disabled: !hasEnabledCommands,
+			hasSubMenu: hasSubmenu,
+			Icon: IconCommand,
+			onClick: (event) => {
+				if (!hasSubmenu) return;
+				openSubmenu({
+					focusReturnTarget: event.currentTarget,
+					Header: submenuHeader,
+					menuClassName: CommandsMenuClassName,
+					Submenu: submenuItems
+				});
+			},
+			children: t("messageComposer.attachmentSelector.commands.text", "Commands")
+		});
+	},
+	File() {
+		const { t } = useTranslationContext();
+		const { IconAttachment } = useComponentContextIcons();
+		const { fileInput } = useAttachmentSelectorContext();
+		const { closeMenu } = useContextMenuContext();
+		return /* @__PURE__ */ jsx(ContextMenuButton, {
+			className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button",
+			Icon: IconAttachment,
+			onClick: () => {
+				fileInput?.click();
+				closeMenu();
+			},
+			children: t("messageComposer.attachmentSelector.file.text", "File")
+		});
+	},
+	Location({ openModalForAction }) {
+		const { t } = useTranslationContext();
+		const { IconLocation } = useComponentContextIcons();
+		const { closeMenu } = useContextMenuContext();
+		return /* @__PURE__ */ jsx(ContextMenuButton, {
+			className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__add-location-button",
+			Icon: IconLocation,
+			onClick: () => {
+				openModalForAction("addLocation");
+				closeMenu();
+			},
+			children: t("common.location.text", "Location")
+		});
+	},
+	Poll({ openModalForAction }) {
+		const { t } = useTranslationContext();
+		const { IconPoll } = useComponentContextIcons();
+		const { closeMenu } = useContextMenuContext();
+		return /* @__PURE__ */ jsx(ContextMenuButton, {
+			className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
+			Icon: IconPoll,
+			onClick: () => {
+				openModalForAction("createPoll");
+				closeMenu();
+			},
+			children: t("common.poll.label", "Poll")
+		});
+	}
+};
+/**
+* Order of AttachmentSelectorAction objects defines the order in the context menu width index 0 being at the top.
+*/
+var defaultAttachmentSelectorActionSet = [
+	{
+		ActionButton: DefaultAttachmentSelectorComponents.File,
+		type: "uploadFile"
+	},
+	{
+		ActionButton: DefaultAttachmentSelectorComponents.Poll,
+		type: "createPoll"
+	},
+	{
+		ActionButton: DefaultAttachmentSelectorComponents.Location,
+		type: "addLocation"
+	},
+	{
+		ActionButton: DefaultAttachmentSelectorComponents.Command,
+		Header: CommandsSubmenuHeader,
+		Submenu: CommandsMenu,
+		type: "selectCommand"
+	}
+];
+var useAttachmentSelectorActionsFiltered = (original) => {
+	const { PollCreationDialog: PollCreationDialog$1 = PollCreationDialog, ShareLocationDialog: ShareLocationDialog$1 = ShareLocationDialog } = useComponentContext();
+	const { isUploadEnabled, locationEnabled, pollsEnabled } = useAttachmentManagerState();
+	const messageComposer = useMessageComposerController();
+	const channelCapabilities = useChannelCapabilities({ cid: messageComposer.channel.cid });
+	const { availableCommands } = useStateStore(messageComposer.channel.configState, availableCommandsStateSelector);
+	return useMemo(() => original.filter((action) => {
+		if (action.type === "uploadFile") return isUploadEnabled;
+		if (action.type === "createPoll") return channelCapabilities.has("send-poll") && !messageComposer.threadId && pollsEnabled;
+		if (action.type === "addLocation") return locationEnabled && !messageComposer.threadId;
+		if (action.type === "selectCommand") return !!availableCommands.some((command) => !!command.name);
+		return true;
+	}).map((action) => {
+		if (action.type === "createPoll" && !action.ModalContent) return {
+			...action,
+			ModalContent: PollCreationDialog$1
+		};
+		if (action.type === "addLocation" && !action.ModalContent) return {
+			...action,
+			ModalContent: ShareLocationDialog$1
+		};
+		return action;
+	}), [
+		PollCreationDialog$1,
+		ShareLocationDialog$1,
+		channelCapabilities,
+		availableCommands,
+		isUploadEnabled,
+		locationEnabled,
+		messageComposer.threadId,
+		original,
+		pollsEnabled
+	]);
+};
+var AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelectorActionSet, buttonProps, getModalPortalDestination }) => {
+	const { t } = useTranslationContext();
+	const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = useComponentContext();
+	const messageComposer = useMessageComposerController();
+	const isCooldownActive = useIsCooldownActive();
+	const { command } = useStateStore(messageComposer.textComposer.state, textComposerStateSelector);
+	const inertProps = useInertWhenHidden(!!command, { setHiddenAttribute: false });
+	const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);
+	const menuDialogId = `attachment-actions-menu${messageComposer.threadId ? "-thread" : ""}`;
+	const { dialog: menuDialog, dialogManager } = useDialogOnNearestManager({ id: menuDialogId });
+	const menuDialogIsOpen = useDialogIsOpen(menuDialogId, dialogManager?.id);
+	const [modalContentAction, setModalContentActionAction] = useState();
+	const shouldRestoreFocusToTriggerRef = useRef(false);
+	const openModalForAction = useCallback((actionType) => {
+		const action = actions.find((a) => a.type === actionType);
+		if (!action?.ModalContent) return;
+		if (actionType === "createPoll") messageComposer.pollComposer.initState();
+		setModalContentActionAction(action);
+	}, [actions, messageComposer]);
+	const closeModal = useCallback(() => {
+		shouldRestoreFocusToTriggerRef.current = true;
+		setModalContentActionAction(void 0);
+	}, []);
+	const [fileInput, setFileInput] = useState(null);
+	const menuButtonRef = useRef(null);
+	useEffect(() => {
+		if (modalContentAction || !shouldRestoreFocusToTriggerRef.current) return;
+		const frame = requestAnimationFrame(() => {
+			shouldRestoreFocusToTriggerRef.current = false;
+			const active = document.activeElement;
+			if (active && active !== document.body) return;
+			menuButtonRef.current?.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [modalContentAction]);
+	const contextMenuItems = useMemo(() => actions.map((action) => /* @__PURE__ */ jsx(action.ActionButton, {
+		openModalForAction,
+		submenuHeader: action.Header,
+		submenuItems: action.Submenu
+	}, action.type)), [actions, openModalForAction]);
+	const getDefaultPortalDestination = useCallback(() => document.getElementById(CHANNEL_CONTAINER_ID), []);
+	if (actions.length === 0) return null;
+	if (actions.length === 1 && actions[0].type === "uploadFile") return /* @__PURE__ */ jsx(SimpleAttachmentSelector, { buttonProps });
+	const ModalContent = modalContentAction?.ModalContent;
+	const modalIsOpen = !!ModalContent;
+	return /* @__PURE__ */ jsx(AttachmentSelectorContextProvider, {
+		value: { fileInput },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment-selector",
+			...inertProps,
+			children: [
+				/* @__PURE__ */ jsx(UploadFileInput, { ref: setFileInput }),
+				/* @__PURE__ */ jsx(AttachmentSelectorButton, {
+					...buttonProps,
+					"aria-expanded": menuDialogIsOpen,
+					"aria-haspopup": "true",
+					"aria-label": t("messageComposer.attachmentSelector.openAttachmentSelector.ariaLabel", "Open Attachment Selector"),
+					disabled: isCooldownActive,
+					iconClassName: clsx("str-chat__prepare-rotate45", { "str-chat__rotate45": menuDialogIsOpen }),
+					onClick: () => menuDialog?.toggle(),
+					ref: menuButtonRef
+				}),
+				/* @__PURE__ */ jsx(ContextMenuComponent, {
+					allowFlip: true,
+					"aria-label": t("messageComposer.attachmentSelector.attachmentActions.ariaLabel", "Attachment Actions"),
+					backLabel: t("common.back.label", "Back"),
+					className: "str-chat__attachment-selector-actions-menu",
+					"data-testid": "attachment-selector-actions-menu",
+					dialogManagerId: dialogManager?.id,
+					id: menuDialogId,
+					onClose: menuDialog.close,
+					placement: "top-start",
+					referenceElement: menuButtonRef.current,
+					tabIndex: -1,
+					children: contextMenuItems
+				}),
+				/* @__PURE__ */ jsx(Portal, {
+					getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination,
+					isOpen: modalIsOpen,
+					children: /* @__PURE__ */ jsx(Modal, {
+						className: clsx({
+							"str-chat__create-poll-modal": modalContentAction?.type === "createPoll",
+							"str-chat__share-location-modal": modalContentAction?.type === "addLocation"
+						}),
+						initialFocusStrategy: "dialog",
+						onClose: closeModal,
+						open: modalIsOpen,
+						children: ModalContent && /* @__PURE__ */ jsx(ModalContent, { close: closeModal })
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { AttachmentSelector, AttachmentSelectorButton, DefaultAttachmentSelectorComponents, SimpleAttachmentSelector, defaultAttachmentSelectorActionSet };
+
+//# sourceMappingURL=AttachmentSelector.mjs.map

package/dist/es/components/MessageComposer/AttachmentSelector/AttachmentSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentSelector.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useAttachmentManagerState,\n  useMessageComposerCommands,\n  useMessageComposerController,\n} from '../hooks';\nimport { CHANNEL_CONTAINER_ID } from '../../Channel/constants';\nimport {\n  ContextMenu,\n  ContextMenuButton,\n  type ContextMenuHeaderComponent,\n  type ContextMenuSubmenu,\n  useContextMenuContext,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../../Dialog';\nimport { GlobalModal } from '../../Modal';\nimport { ShareLocationDialog as DefaultLocationDialog } from '../../Location';\nimport { PollCreationDialog as DefaultPollCreationDialog } from '../../Poll';\nimport { Portal } from '../../Portal/Portal';\nimport { UploadFileInput } from '../../ReactFileUtilities';\nimport {\n  useChannel,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport {\n  AttachmentSelectorContextProvider,\n  useAttachmentSelectorContext,\n} from '../../../context/AttachmentSelectorContext';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport { useInertWhenHidden } from '../../Accessibility';\nimport { useStateStore } from '../../../store';\nimport type { TextComposerState } from 'stream-chat';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport { useIsCooldownActive } from '../hooks/useIsCooldownActive';\nimport {\n  CommandsMenu,\n  CommandsMenuClassName,\n  CommandsSubmenuHeader,\n} from './CommandsMenu';\nimport { useChannelCapabilities } from '../../Channel/hooks/useChannelCapabilities';\nimport type { ChannelConfig } from 'stream-chat';\n\nconst availableCommandsStateSelector = ({ availableCommands }: ChannelConfig) => ({\n  availableCommands,\n});\n\nconst textComposerStateSelector = ({ command }: TextComposerState) => ({ command });\n\nconst AttachmentSelectorMenuInitButtonIcon = ({ className }: { className?: string }) => {\n  const { AttachmentSelectorInitiationButtonContents } = useComponentContext();\n  const { IconPlus } = useComponentContextIcons();\n\n  if (AttachmentSelectorInitiationButtonContents) {\n    return (\n      <span className={className}>\n        <AttachmentSelectorInitiationButtonContents />\n      </span>\n    );\n  }\n\n  return (\n    <IconPlus\n      className={clsx('str-chat__attachment-selector__menu-button__icon', className)}\n    />\n  );\n};\n\nexport const AttachmentSelectorButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps & { iconClassName?: string }\n>(function AttachmentSelectorButton({ className, iconClassName, ...props }, ref) {\n  return (\n    <Button\n      appearance='outline'\n      circular\n      className={clsx('str-chat__attachment-selector__menu-button', className)}\n      data-testid='invoke-attachment-selector-button'\n      size='lg'\n      variant='secondary'\n      {...props}\n      ref={ref}\n    >\n      <AttachmentSelectorMenuInitButtonIcon className={iconClassName} />\n    </Button>\n  );\n});\n\ntype SimpleAttachmentSelectorProps = {\n  buttonProps?: Omit<ButtonProps, 'onClick'>;\n};\n\nexport const SimpleAttachmentSelector = ({\n  buttonProps,\n}: SimpleAttachmentSelectorProps = {}) => {\n  const channel = useChannel();\n  const channelCapabilities = useChannelCapabilities({ cid: channel.cid });\n  const { t } = useTranslationContext();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);\n  const id = useStableId();\n  const isCooldownActive = useIsCooldownActive();\n  const messageComposer = useMessageComposerController();\n  const { command } = useStateStore(\n    messageComposer.textComposer.state,\n    textComposerStateSelector,\n  );\n  // Visually hidden via a CSS transition while a command is active; keep it out\n  // of the a11y tree and tab order without setting `display: none`.\n  const inertProps = useInertWhenHidden(!!command, { setHiddenAttribute: false });\n\n  useEffect(() => {\n    if (!buttonElement) return;\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (![' ', 'Enter'].includes(event.key) || !inputRef.current) return;\n      event.preventDefault();\n      inputRef.current.click();\n    };\n    buttonElement.addEventListener('keyup', handleKeyUp);\n    return () => {\n      buttonElement.removeEventListener('keyup', handleKeyUp);\n    };\n  }, [buttonElement]);\n\n  if (!channelCapabilities.has('upload-file')) return null;\n\n  return (\n    <div className='str-chat__attachment-selector' {...inertProps}>\n      <AttachmentSelectorButton\n        {...buttonProps}\n        aria-label={t(\n          'messageComposer.attachmentSelector.openAttachmentSelector.ariaLabel',\n          'Open Attachment Selector',\n        )}\n        disabled={isCooldownActive}\n        onClick={() => inputRef.current?.click()}\n        ref={setButtonElement}\n      />\n      <UploadFileInput id={id} ref={inputRef} />\n    </div>\n  );\n};\n\nexport type AttachmentSelectorModalContentProps = {\n  close: () => void;\n};\n\nexport type AttachmentSelectorAction = {\n  ActionButton: ComponentType<AttachmentSelectorActionProps>;\n  id?: string;\n  ModalContent?: React.ComponentType<AttachmentSelectorModalContentProps>;\n  Submenu?: ContextMenuSubmenu;\n  Header?: ContextMenuHeaderComponent;\n  type: 'uploadFile' | 'createPoll' | 'addLocation' | 'selectCommand' | (string & {});\n};\n\nexport type AttachmentSelectorActionProps = {\n  openModalForAction: (actionType: AttachmentSelectorAction['type']) => void;\n  submenuItems?: ContextMenuSubmenu;\n  submenuHeader?: ContextMenuHeaderComponent;\n};\n\nexport const DefaultAttachmentSelectorComponents = {\n  Command({ submenuHeader, submenuItems }: AttachmentSelectorActionProps) {\n    const { t } = useTranslationContext();\n    const { IconCommand } = useComponentContextIcons();\n    const { openSubmenu } = useContextMenuContext();\n    const commands = useMessageComposerCommands();\n    const hasEnabledCommands = commands.some(({ enabled }) => enabled);\n    const hasSubmenu = !!submenuItems;\n\n    return (\n      <ContextMenuButton\n        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__commands-button'\n        disabled={!hasEnabledCommands}\n        hasSubMenu={hasSubmenu}\n        Icon={IconCommand}\n        onClick={(event) => {\n          if (!hasSubmenu) return;\n          openSubmenu({\n            focusReturnTarget: event.currentTarget,\n            Header: submenuHeader,\n            menuClassName: CommandsMenuClassName,\n            Submenu: submenuItems,\n          });\n        }}\n      >\n        {t('messageComposer.attachmentSelector.commands.text', 'Commands')}\n      </ContextMenuButton>\n    );\n  },\n  File() {\n    const { t } = useTranslationContext();\n    const { IconAttachment } = useComponentContextIcons();\n    const { fileInput } = useAttachmentSelectorContext();\n    const { closeMenu } = useContextMenuContext();\n\n    return (\n      <ContextMenuButton\n        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button'\n        Icon={IconAttachment}\n        onClick={() => {\n          fileInput?.click();\n          closeMenu();\n        }}\n      >\n        {t('messageComposer.attachmentSelector.file.text', 'File')}\n      </ContextMenuButton>\n    );\n  },\n  Location({ openModalForAction }: AttachmentSelectorActionProps) {\n    const { t } = useTranslationContext();\n    const { IconLocation } = useComponentContextIcons();\n    const { closeMenu } = useContextMenuContext();\n    return (\n      <ContextMenuButton\n        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__add-location-button'\n        Icon={IconLocation}\n        onClick={() => {\n          openModalForAction('addLocation');\n          closeMenu();\n        }}\n      >\n        {t('common.location.text', 'Location')}\n      </ContextMenuButton>\n    );\n  },\n  Poll({ openModalForAction }: AttachmentSelectorActionProps) {\n    const { t } = useTranslationContext();\n    const { IconPoll } = useComponentContextIcons();\n    const { closeMenu } = useContextMenuContext();\n    return (\n      <ContextMenuButton\n        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button'\n        Icon={IconPoll}\n        onClick={() => {\n          openModalForAction('createPoll');\n          closeMenu();\n        }}\n      >\n        {t('common.poll.label', 'Poll')}\n      </ContextMenuButton>\n    );\n  },\n};\n\n/**\n * Order of AttachmentSelectorAction objects defines the order in the context menu width index 0 being at the top.\n */\nexport const defaultAttachmentSelectorActionSet: AttachmentSelectorAction[] = [\n  {\n    ActionButton: DefaultAttachmentSelectorComponents.File,\n    type: 'uploadFile',\n  },\n  {\n    ActionButton: DefaultAttachmentSelectorComponents.Poll,\n    type: 'createPoll',\n  },\n  {\n    ActionButton: DefaultAttachmentSelectorComponents.Location,\n    type: 'addLocation',\n  },\n  {\n    ActionButton: DefaultAttachmentSelectorComponents.Command,\n    Header: CommandsSubmenuHeader,\n    Submenu: CommandsMenu,\n    type: 'selectCommand',\n  },\n];\n\nexport type AttachmentSelectorProps = {\n  attachmentSelectorActionSet?: AttachmentSelectorAction[];\n  buttonProps?: Omit<ButtonProps, 'onClick'>;\n  getModalPortalDestination?: () => HTMLElement | null;\n};\n\nconst useAttachmentSelectorActionsFiltered = (original: AttachmentSelectorAction[]) => {\n  const {\n    PollCreationDialog = DefaultPollCreationDialog,\n    ShareLocationDialog = DefaultLocationDialog,\n  } = useComponentContext();\n  const { isUploadEnabled, locationEnabled, pollsEnabled } = useAttachmentManagerState();\n  const messageComposer = useMessageComposerController();\n  const channelCapabilities = useChannelCapabilities({\n    cid: messageComposer.channel.cid,\n  });\n  const { availableCommands } = useStateStore(\n    messageComposer.channel.configState,\n    availableCommandsStateSelector,\n  );\n\n  return useMemo(\n    () =>\n      original\n        .filter((action) => {\n          if (action.type === 'uploadFile') return isUploadEnabled;\n\n          if (action.type === 'createPoll')\n            return (\n              channelCapabilities.has('send-poll') &&\n              !messageComposer.threadId &&\n              pollsEnabled\n            );\n\n          if (action.type === 'addLocation') {\n            return locationEnabled && !messageComposer.threadId;\n          }\n\n          if (action.type === 'selectCommand') {\n            return !!availableCommands.some((command) => !!command.name);\n          }\n\n          return true;\n        })\n        .map((action) => {\n          if (action.type === 'createPoll' && !action.ModalContent) {\n            return { ...action, ModalContent: PollCreationDialog };\n          }\n          if (action.type === 'addLocation' && !action.ModalContent) {\n            return { ...action, ModalContent: ShareLocationDialog };\n          }\n          return action;\n        }),\n    [\n      PollCreationDialog,\n      ShareLocationDialog,\n      channelCapabilities,\n      availableCommands,\n      isUploadEnabled,\n      locationEnabled,\n      messageComposer.threadId,\n      original,\n      pollsEnabled,\n    ],\n  );\n};\n\nexport const AttachmentSelector = ({\n  attachmentSelectorActionSet = defaultAttachmentSelectorActionSet,\n  buttonProps,\n  getModalPortalDestination,\n}: AttachmentSelectorProps) => {\n  const { t } = useTranslationContext();\n  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } =\n    useComponentContext();\n  const messageComposer = useMessageComposerController();\n  const isCooldownActive = useIsCooldownActive();\n  const { command } = useStateStore(\n    messageComposer.textComposer.state,\n    textComposerStateSelector,\n  );\n  // The selector is visually hidden via a CSS transition while a command is\n  // active; keep it out of the a11y tree and tab order without setting\n  // `display: none` (which would break the transition).\n  const inertProps = useInertWhenHidden(!!command, { setHiddenAttribute: false });\n  const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);\n\n  const menuDialogId = `attachment-actions-menu${messageComposer.threadId ? '-thread' : ''}`;\n  const { dialog: menuDialog, dialogManager } = useDialogOnNearestManager({\n    id: menuDialogId,\n  });\n  const menuDialogIsOpen = useDialogIsOpen(menuDialogId, dialogManager?.id);\n\n  const [modalContentAction, setModalContentActionAction] =\n    useState<AttachmentSelectorAction>();\n  const shouldRestoreFocusToTriggerRef = useRef(false);\n  const openModalForAction = useCallback(\n    (actionType: AttachmentSelectorAction['type']) => {\n      const action = actions.find((a) => a.type === actionType);\n      if (!action?.ModalContent) return;\n      // Reset composer state when the dialog is opened (not on close), so every\n      // open starts from a fresh form without flashing cleared fields right\n      // before the modal unmounts on cancel/submit.\n      if (actionType === 'createPoll') {\n        messageComposer.pollComposer.initState();\n      }\n      setModalContentActionAction(action);\n    },\n    [actions, messageComposer],\n  );\n\n  const closeModal = useCallback(() => {\n    shouldRestoreFocusToTriggerRef.current = true;\n    setModalContentActionAction(undefined);\n  }, []);\n\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modalContentAction || !shouldRestoreFocusToTriggerRef.current) return;\n\n    const frame = requestAnimationFrame(() => {\n      shouldRestoreFocusToTriggerRef.current = false;\n      // Only restore focus to the trigger if focus actually fell to <body> when the dialog closed\n      // (the cancel/escape case). If the dialog content purposefully moved focus elsewhere — e.g.\n      // the poll dialog returns focus to the composer on a successful send — leave it there. This\n      // mirrors react-aria FocusScope's own restore guard and prevents a focus blip through the\n      // trigger before the content's intended target.\n      const active = document.activeElement;\n      if (active && active !== document.body) return;\n      menuButtonRef.current?.focus();\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [modalContentAction]);\n\n  const contextMenuItems = useMemo(\n    () =>\n      actions.map((action) => (\n        <action.ActionButton\n          key={action.type}\n          openModalForAction={openModalForAction}\n          submenuHeader={action.Header}\n          submenuItems={action.Submenu}\n        />\n      )),\n    [actions, openModalForAction],\n  );\n\n  const getDefaultPortalDestination = useCallback(\n    () => document.getElementById(CHANNEL_CONTAINER_ID),\n    [],\n  );\n\n  if (actions.length === 0) return null;\n\n  if (actions.length === 1 && actions[0].type === 'uploadFile')\n    return <SimpleAttachmentSelector buttonProps={buttonProps} />;\n\n  const ModalContent = modalContentAction?.ModalContent;\n  const modalIsOpen = !!ModalContent;\n  return (\n    <AttachmentSelectorContextProvider value={{ fileInput }}>\n      <div className='str-chat__attachment-selector' {...inertProps}>\n        <UploadFileInput ref={setFileInput} />\n        <AttachmentSelectorButton\n          {...buttonProps}\n          aria-expanded={menuDialogIsOpen}\n          aria-haspopup='true'\n          aria-label={t(\n            'messageComposer.attachmentSelector.openAttachmentSelector.ariaLabel',\n            'Open Attachment Selector',\n          )}\n          disabled={isCooldownActive}\n          iconClassName={clsx('str-chat__prepare-rotate45', {\n            'str-chat__rotate45': menuDialogIsOpen,\n          })}\n          onClick={() => menuDialog?.toggle()}\n          ref={menuButtonRef}\n        />\n        <ContextMenuComponent\n          allowFlip\n          aria-label={t(\n            'messageComposer.attachmentSelector.attachmentActions.ariaLabel',\n            'Attachment Actions',\n          )}\n          backLabel={t('common.back.label', 'Back')}\n          className='str-chat__attachment-selector-actions-menu'\n          data-testid='attachment-selector-actions-menu'\n          dialogManagerId={dialogManager?.id}\n          id={menuDialogId}\n          onClose={menuDialog.close}\n          placement='top-start'\n          referenceElement={menuButtonRef.current}\n          tabIndex={-1}\n        >\n          {contextMenuItems}\n        </ContextMenuComponent>\n        <Portal\n          getPortalDestination={getModalPortalDestination ?? getDefaultPortalDestination}\n          isOpen={modalIsOpen}\n        >\n          <Modal\n            className={clsx({\n              'str-chat__create-poll-modal': modalContentAction?.type === 'createPoll',\n              'str-chat__share-location-modal':\n                modalContentAction?.type === 'addLocation',\n            })}\n            // Focus the dialog surface on open (not a field): a field's focus would supersede the\n            // screen reader's dialog identity/description announcement. The user then presses Enter\n            // to step into the dialog's default field (see GlobalModal's `[data-autofocus]`\n            // handling).\n            initialFocusStrategy='dialog'\n            onClose={closeModal}\n            open={modalIsOpen}\n          >\n            {ModalContent && <ModalContent close={closeModal} />}\n          </Modal>\n        </Portal>\n      </div>\n    </AttachmentSelectorContextProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/MessageComposer/AttachmentSelector/CommandsMenu.mjs

@@ -0,0 +1,99 @@
+import { asDynamicKey } from "../../../i18n/utils.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { ContextMenuBackButton, ContextMenuButton, ContextMenuHeader, useContextMenuContext } from "../../Dialog/components/ContextMenu.mjs";
+import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
+import { useMessageComposerCommands } from "../hooks/useMessageComposerCommands.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { createElement, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx
+var CommandsMenuClassName = "str-chat__context-menu--commands";
+var CommandsSubmenuHeader = () => {
+	const { t } = useTranslationContext();
+	const { returnToParentMenu } = useContextMenuContext();
+	const { IconChevronLeft } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(ContextMenuHeader, {
+		className: "str-chat__context-menu__header--commands str-chat__context-menu__header--submenu-commands",
+		children: /* @__PURE__ */ jsxs(ContextMenuBackButton, {
+			"aria-label": t("messageComposer.commandsMenu.backAttachments.ariaLabel", "Back to attachments"),
+			onClick: returnToParentMenu,
+			children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("messageComposer.commandsMenu.instantCommands.text", "Instant commands") })]
+		})
+	});
+};
+var CommandsMenuHeader = () => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(ContextMenuHeader, {
+		className: "str-chat__context-menu__header--commands",
+		children: /* @__PURE__ */ jsx("span", { children: t("messageComposer.commandsMenu.instantCommands.text", "Instant commands") })
+	});
+};
+var CommandsMenu = () => {
+	const { closeMenu } = useContextMenuContext();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const messageComposer = useMessageComposerController();
+	const { textareaRef } = useMessageComposerContext();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: useMessageComposerCommands().map(({ command, enabled }) => /* @__PURE__ */ jsx(CommandContextMenuItem, {
+		command,
+		enabled,
+		onClick: () => {
+			if (!command.name || !enabled) return;
+			messageComposer.textComposer.setCommand(command);
+			closeMenu();
+			requestAnimationFrame(() => textareaRef.current?.focus());
+			announceInteraction("command.selected", { command: command.name });
+		}
+	}, command.name)) });
+};
+var useCommandTranslation = (command) => {
+	const { t } = useTranslationContext();
+	const knownArgsTranslations = useMemo(() => ({
+		ban: t("command.ban.args", "[@username] [text]"),
+		giphy: t("command.giphy.args", "[text]"),
+		mute: t("command.mute.args", "[@username]"),
+		unban: t("command.unban.args", "[@username]"),
+		unmute: t("command.unmute.args", "[@username]")
+	}), [t]);
+	const knownDescriptionTranslations = useMemo(() => ({
+		ban: t("command.ban.description", "Ban a user"),
+		giphy: t("command.giphy.description", "Post a random gif to the channel"),
+		mute: t("command.mute.description", "Mute a user"),
+		unban: t("command.unban.description", "Unban a user"),
+		unmute: t("command.unmute.description", "Unmute a user")
+	}), [t]);
+	return {
+		args: command.args && (knownArgsTranslations[command.name ?? ""] ?? t(asDynamicKey(command.args))),
+		description: command.description && (knownDescriptionTranslations[command.name ?? ""] ?? t(asDynamicKey(command.description)))
+	};
+};
+var CommandContextMenuItem = ({ className, command, enabled = true, ...props }) => {
+	const { args, description } = useCommandTranslation(command);
+	const details = useMemo(() => args ? `/${command.name} ${args}` : `/${command.name}`, [args, command.name]);
+	const ariaLabel = useMemo(() => description ? `${description}, ${details}` : details, [description, details]);
+	const { IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove } = useComponentContextIcons();
+	const icons = {
+		ban: IconUserRemove,
+		flag: IconFlag,
+		giphy: IconGiphy,
+		mute: IconMute,
+		unban: IconUserAdd,
+		unmute: IconAudio
+	};
+	return /* @__PURE__ */ createElement(ContextMenuButton, {
+		"aria-label": ariaLabel,
+		...props,
+		className: clsx("str-chat__context-menu__button--command", className),
+		details,
+		disabled: !enabled,
+		Icon: icons[command.name],
+		key: command.name,
+		label: command.name
+	});
+};
+//#endregion
+export { CommandContextMenuItem, CommandsMenu, CommandsMenuClassName, CommandsMenuHeader, CommandsSubmenuHeader, useCommandTranslation };
+
+//# sourceMappingURL=CommandsMenu.mjs.map

package/dist/es/components/MessageComposer/AttachmentSelector/CommandsMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandsMenu.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx"],"sourcesContent":["import React, { type ComponentProps, type ComponentType, useMemo } from 'react';\nimport type { Command } from 'stream-chat';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useMessageComposerCommands, useMessageComposerController } from '../hooks';\nimport {\n  ContextMenuBackButton,\n  ContextMenuButton,\n  ContextMenuHeader,\n  useContextMenuContext,\n} from '../../Dialog';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport clsx from 'clsx';\nimport { asDynamicKey } from '../../../i18n/utils';\n\nexport const CommandsMenuClassName = 'str-chat__context-menu--commands';\n\nexport const CommandsSubmenuHeader = () => {\n  const { t } = useTranslationContext();\n  const { returnToParentMenu } = useContextMenuContext();\n  const { IconChevronLeft } = useComponentContextIcons();\n  return (\n    <ContextMenuHeader className='str-chat__context-menu__header--commands str-chat__context-menu__header--submenu-commands'>\n      <ContextMenuBackButton\n        aria-label={t(\n          'messageComposer.commandsMenu.backAttachments.ariaLabel',\n          'Back to attachments',\n        )}\n        onClick={returnToParentMenu}\n      >\n        <IconChevronLeft />\n        <span>\n          {t('messageComposer.commandsMenu.instantCommands.text', 'Instant commands')}\n        </span>\n      </ContextMenuBackButton>\n    </ContextMenuHeader>\n  );\n};\n\nexport const CommandsMenuHeader = () => {\n  const { t } = useTranslationContext();\n  return (\n    <ContextMenuHeader className='str-chat__context-menu__header--commands'>\n      <span>\n        {t('messageComposer.commandsMenu.instantCommands.text', 'Instant commands')}\n      </span>\n    </ContextMenuHeader>\n  );\n};\n\nexport const CommandsMenu = () => {\n  const { closeMenu } = useContextMenuContext();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const messageComposer = useMessageComposerController();\n  const { textareaRef } = useMessageComposerContext();\n  // Render commands in the channel config's own order (no client re-sort) — matches the composer's\n  // suggestion list, which likewise trusts the SDK's ordering.\n  const commands = useMessageComposerCommands();\n\n  return (\n    <>\n      {commands.map(({ command, enabled }) => (\n        <CommandContextMenuItem\n          command={command}\n          enabled={enabled}\n          key={command.name}\n          onClick={() => {\n            if (!command.name || !enabled) return;\n            messageComposer.textComposer.setCommand(command);\n            closeMenu();\n            // Defer the focus to the next frame so it wins over FocusScope's restore-to-attachment-selector-button behavior.\n            requestAnimationFrame(() => textareaRef.current?.focus());\n            announceInteraction('command.selected', { command: command.name });\n          }}\n        />\n      ))}\n    </>\n  );\n};\n\nexport const useCommandTranslation = (command: Command) => {\n  const { t } = useTranslationContext();\n\n  const knownArgsTranslations = useMemo<Record<string, string>>(\n    () => ({\n      ban: t('command.ban.args', '[@username] [text]'),\n      giphy: t('command.giphy.args', '[text]'),\n      mute: t('command.mute.args', '[@username]'),\n      unban: t('command.unban.args', '[@username]'),\n      unmute: t('command.unmute.args', '[@username]'),\n    }),\n    [t],\n  );\n  const knownDescriptionTranslations = useMemo<Record<string, string>>(\n    () => ({\n      ban: t('command.ban.description', 'Ban a user'),\n      giphy: t('command.giphy.description', 'Post a random gif to the channel'),\n      mute: t('command.mute.description', 'Mute a user'),\n      unban: t('command.unban.description', 'Unban a user'),\n      unmute: t('command.unmute.description', 'Unmute a user'),\n    }),\n    [t],\n  );\n\n  const args =\n    command.args &&\n    (knownArgsTranslations[command.name ?? ''] ?? t(asDynamicKey(command.args)));\n  const description =\n    command.description &&\n    (knownDescriptionTranslations[command.name ?? ''] ??\n      t(asDynamicKey(command.description)));\n\n  return { args, description };\n};\n\nexport const CommandContextMenuItem = ({\n  className,\n  command,\n  enabled = true,\n  ...props\n}: ComponentProps<'button'> & {\n  command: Command & { name: string };\n  enabled?: boolean;\n}) => {\n  const { args, description } = useCommandTranslation(command);\n\n  // todo: retrieve the command trigger char from textComposer - needed adjustment in LLC\n  const details = useMemo(\n    () => (args ? `/${command.name} ${args}` : `/${command.name}`),\n    [args, command.name],\n  );\n  const ariaLabel = useMemo(\n    () => (description ? `${description}, ${details}` : details),\n    [description, details],\n  );\n\n  const { IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove } =\n    useComponentContextIcons();\n\n  const icons: Record<string, ComponentType> = {\n    ban: IconUserRemove,\n    flag: IconFlag,\n    giphy: IconGiphy,\n    mute: IconMute,\n    unban: IconUserAdd,\n    unmute: IconAudio,\n  };\n\n  return (\n    <ContextMenuButton\n      aria-label={ariaLabel}\n      {...props}\n      className={clsx('str-chat__context-menu__button--command', className)}\n      details={details}\n      disabled={!enabled}\n      Icon={icons[command.name]}\n      key={command.name}\n      label={command.name}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/MessageComposer/CommandChip.mjs

@@ -0,0 +1,37 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/CommandChip.tsx
+var CommandChip = ({ command }) => {
+	const { IconBolt, IconXmark } = useComponentContextIcons();
+	const { textComposer } = useMessageComposerController();
+	const { textareaRef } = useMessageComposerContext();
+	const { t } = useTranslationContext();
+	if (!command) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__command-chip",
+		children: [
+			/* @__PURE__ */ jsx(IconBolt, {}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				tabIndex: -1,
+				children: command.name
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": t("messageComposer.commandChip.exitCommand.ariaLabel", "Exit command {{ command }}", { command: command.name }),
+				className: "str-chat__command-chip__close-button",
+				onClick: () => {
+					textComposer.setCommand(null);
+					textareaRef.current?.focus();
+				},
+				children: /* @__PURE__ */ jsx(IconXmark, {})
+			})
+		]
+	});
+};
+//#endregion
+export { CommandChip };
+
+//# sourceMappingURL=CommandChip.mjs.map

package/dist/es/components/MessageComposer/CommandChip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandChip.mjs","names":[],"sources":["../../../../src/components/MessageComposer/CommandChip.tsx"],"sourcesContent":["import { useMessageComposerController } from './hooks';\nimport type { TextComposerState } from 'stream-chat';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\n\nexport type CommandChipProps = {\n  command?: TextComposerState['command'];\n};\n\nexport const CommandChip = ({ command }: CommandChipProps) => {\n  const { IconBolt, IconXmark } = useComponentContextIcons();\n  const { textComposer } = useMessageComposerController();\n  const { textareaRef } = useMessageComposerContext();\n  const { t } = useTranslationContext();\n  if (!command) return null;\n\n  return (\n    <div className='str-chat__command-chip'>\n      <IconBolt />\n      <span aria-hidden='true' tabIndex={-1}>\n        {command.name}\n      </span>\n      <button\n        aria-label={t(\n          'messageComposer.commandChip.exitCommand.ariaLabel',\n          'Exit command {{ command }}',\n          { command: command.name },\n        )}\n        className={'str-chat__command-chip__close-button'}\n        onClick={() => {\n          textComposer.setCommand(null);\n          textareaRef.current?.focus();\n        }}\n      >\n        <IconXmark />\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,eAAe,EAAE,cAAgC;CAC5D,MAAM,EAAE,UAAU,cAAc,yBAAyB;CACzD,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,gBAAgB,0BAA0B;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,UAAD,CAAW,CAAA;GACX,oBAAC,QAAD;IAAM,eAAY;IAAO,UAAU;cAChC,QAAQ;GACL,CAAA;GACN,oBAAC,UAAD;IACE,cAAY,EACV,qDACA,8BACA,EAAE,SAAS,QAAQ,KAAK,CAC1B;IACA,WAAW;IACX,eAAe;KACb,aAAa,WAAW,IAAI;KAC5B,YAAY,SAAS,MAAM;IAC7B;cAEA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EACL;;AAET"}

package/dist/es/components/MessageComposer/CooldownTimer.mjs

@@ -0,0 +1,15 @@
+import { useCooldownRemaining } from "./hooks/useCooldownRemaining.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/CooldownTimer.tsx
+var CooldownTimer = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-composer-cooldown",
+		"data-testid": "cooldown-timer",
+		children: useCooldownRemaining()
+	});
+};
+//#endregion
+export { CooldownTimer };
+
+//# sourceMappingURL=CooldownTimer.mjs.map

package/dist/es/components/MessageComposer/CooldownTimer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CooldownTimer.mjs","names":[],"sources":["../../../../src/components/MessageComposer/CooldownTimer.tsx"],"sourcesContent":["import React from 'react';\nimport { useCooldownRemaining } from './hooks';\n\nexport const CooldownTimer = () => {\n  const secondsLeft = useCooldownRemaining();\n\n  return (\n    <div className='str-chat__message-composer-cooldown' data-testid='cooldown-timer'>\n      {secondsLeft}\n    </div>\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,sBAAsB;CAGjC,OACE,oBAAC,OAAD;EAAK,WAAU;EAAsC,eAAY;YAH/C,qBAIf;CACE,CAAA;AAET"}