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

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

@@ -1,34 +1,35 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { AttachmentSelectorContextProvider, useAttachmentSelectorContext } from "../../../context/AttachmentSelectorContext.mjs";
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../../Dialog/hooks/useDialog.mjs";
 import { Portal } from "../../Portal/Portal.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { useStableId } from "../../UtilityComponents/useStableId.mjs";
 import { Button } from "../../Button/Button.mjs";
-import { CHANNEL_CONTAINER_ID } from "../../Channel/constants.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 { getChannelConfig } from "../../../utils/getChannelConfig.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 { PollCreationDialog } from "../../Poll/PollCreationDialog/PollCreationDialog.mjs";
 import { useIsCooldownActive } from "../hooks/useIsCooldownActive.mjs";
 import { CommandsMenu, CommandsMenuClassName, CommandsSubmenuHeader } from "./CommandsMenu.mjs";
-import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
-import { useInertWhenHidden } from "../../Accessibility/hooks/useInertWhenHidden.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 { IconPlus } = useComponentContextIcons();
 	const { AttachmentSelectorInitiationButtonContents } = useComponentContext();
+	const { IconPlus } = useComponentContextIcons();
 	if (AttachmentSelectorInitiationButtonContents) return /* @__PURE__ */ jsx("span", {
 		className,
 		children: /* @__PURE__ */ jsx(AttachmentSelectorInitiationButtonContents, {})
@@ -49,7 +50,7 @@ var AttachmentSelectorButton = forwardRef(function AttachmentSelectorButton({ cl
 	});
 });
 var SimpleAttachmentSelector = ({ buttonProps } = {}) => {
-	const { channelCapabilities } = useChannelStateContext();
+	const channelCapabilities = useChannelCapabilities({ cid: useChannel().cid });
 	const { t } = useTranslationContext();
 	const inputRef = useRef(null);
 	const [buttonElement, setButtonElement] = useState(null);
@@ -69,13 +70,13 @@ var SimpleAttachmentSelector = ({ buttonProps } = {}) => {
 			buttonElement.removeEventListener("keyup", handleKeyUp);
 		};
 	}, [buttonElement]);
-	if (!channelCapabilities["upload-file"]) return null;
+	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("aria/Open Attachment Selector"),
+			"aria-label": t("messageComposer.attachmentSelector.openAttachmentSelector.ariaLabel", "Open Attachment Selector"),
 			disabled: isCooldownActive,
 			onClick: () => inputRef.current?.click(),
 			ref: setButtonElement
@@ -106,12 +107,12 @@ var DefaultAttachmentSelectorComponents = {
 					Submenu: submenuItems
 				});
 			},
-			children: t("Commands")
+			children: t("messageComposer.attachmentSelector.commands.text", "Commands")
 		});
 	},
 	File() {
-		const { IconAttachment } = useComponentContextIcons();
 		const { t } = useTranslationContext();
+		const { IconAttachment } = useComponentContextIcons();
 		const { fileInput } = useAttachmentSelectorContext();
 		const { closeMenu } = useContextMenuContext();
 		return /* @__PURE__ */ jsx(ContextMenuButton, {
@@ -121,7 +122,7 @@ var DefaultAttachmentSelectorComponents = {
 				fileInput?.click();
 				closeMenu();
 			},
-			children: t("File")
+			children: t("messageComposer.attachmentSelector.file.text", "File")
 		});
 	},
 	Location({ openModalForAction }) {
@@ -135,7 +136,7 @@ var DefaultAttachmentSelectorComponents = {
 				openModalForAction("addLocation");
 				closeMenu();
 			},
-			children: t("Location")
+			children: t("common.location.text", "Location")
 		});
 	},
 	Poll({ openModalForAction }) {
@@ -149,7 +150,7 @@ var DefaultAttachmentSelectorComponents = {
 				openModalForAction("createPoll");
 				closeMenu();
 			},
-			children: t("Poll")
+			children: t("common.poll.label", "Poll")
 		});
 	}
 };
@@ -178,15 +179,15 @@ var defaultAttachmentSelectorActionSet = [
 ];
 var useAttachmentSelectorActionsFiltered = (original) => {
 	const { PollCreationDialog: PollCreationDialog$1 = PollCreationDialog, ShareLocationDialog: ShareLocationDialog$1 = ShareLocationDialog } = useComponentContext();
-	const { channelCapabilities } = useChannelStateContext();
-	const { isUploadEnabled } = useAttachmentManagerState();
+	const { isUploadEnabled, locationEnabled, pollsEnabled } = useAttachmentManagerState();
 	const messageComposer = useMessageComposerController();
-	const channelConfig = getChannelConfig(messageComposer.channel);
+	const channelCapabilities = useChannelCapabilities({ cid: messageComposer.channel.cid });
+	const { availableCommands } = useStateStore(messageComposer.channel.configState, availableCommandsStateSelector);
 	return useMemo(() => original.filter((action) => {
-		if (action.type === "uploadFile") return channelCapabilities["upload-file"] && channelConfig?.uploads && isUploadEnabled;
-		if (action.type === "createPoll") return channelCapabilities["send-poll"] && !messageComposer.threadId && channelConfig?.polls;
-		if (action.type === "addLocation") return channelConfig?.shared_locations && !messageComposer.threadId;
-		if (action.type === "selectCommand") return !!channelConfig?.commands?.some((command) => !!command.name);
+		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 {
@@ -202,10 +203,12 @@ var useAttachmentSelectorActionsFiltered = (original) => {
 		PollCreationDialog$1,
 		ShareLocationDialog$1,
 		channelCapabilities,
-		channelConfig,
+		availableCommands,
 		isUploadEnabled,
+		locationEnabled,
 		messageComposer.threadId,
-		original
+		original,
+		pollsEnabled
 	]);
 };
 var AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelectorActionSet, buttonProps, getModalPortalDestination }) => {
@@ -264,7 +267,7 @@ var AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelec
 					...buttonProps,
 					"aria-expanded": menuDialogIsOpen,
 					"aria-haspopup": "true",
-					"aria-label": t("aria/Open Attachment Selector"),
+					"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(),
@@ -272,8 +275,8 @@ var AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelec
 				}),
 				/* @__PURE__ */ jsx(ContextMenuComponent, {
 					allowFlip: true,
-					"aria-label": t("aria/Attachment Actions"),
-					backLabel: t("Back"),
+					"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,

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

@@ -1 +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  useChannelStateContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport {\n  AttachmentSelectorContextProvider,\n  useAttachmentSelectorContext,\n} from '../../../context/AttachmentSelectorContext';\nimport { getChannelConfig } from '../../../utils/getChannelConfig';\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';\n\nconst textComposerStateSelector = ({ command }: TextComposerState) => ({ command });\n\nconst AttachmentSelectorMenuInitButtonIcon = ({ className }: { className?: string }) => {\n  const { IconPlus } = useComponentContextIcons();\n  const { AttachmentSelectorInitiationButtonContents } = useComponentContext();\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 { channelCapabilities } = useChannelStateContext();\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['upload-file']) return null;\n\n  return (\n    <div className='str-chat__attachment-selector' {...inertProps}>\n      <AttachmentSelectorButton\n        {...buttonProps}\n        aria-label={t('aria/Open Attachment Selector')}\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('Commands')}\n      </ContextMenuButton>\n    );\n  },\n  File() {\n    const { IconAttachment } = useComponentContextIcons();\n    const { t } = useTranslationContext();\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('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('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('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 { channelCapabilities } = useChannelStateContext();\n  const { isUploadEnabled } = useAttachmentManagerState();\n  const messageComposer = useMessageComposerController();\n  const channelConfig = getChannelConfig(messageComposer.channel);\n\n  return useMemo(\n    () =>\n      original\n        .filter((action) => {\n          if (action.type === 'uploadFile')\n            return (\n              channelCapabilities['upload-file'] &&\n              channelConfig?.uploads &&\n              isUploadEnabled\n            );\n\n          if (action.type === 'createPoll')\n            return (\n              channelCapabilities['send-poll'] &&\n              !messageComposer.threadId &&\n              channelConfig?.polls\n            );\n\n          if (action.type === 'addLocation') {\n            return channelConfig?.shared_locations && !messageComposer.threadId;\n          }\n\n          if (action.type === 'selectCommand') {\n            return !!channelConfig?.commands?.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      channelConfig,\n      isUploadEnabled,\n      messageComposer.threadId,\n      original,\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('aria/Open Attachment Selector')}\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('aria/Attachment Actions')}\n          backLabel={t('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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"}
+{"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

@@ -1,25 +1,26 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { asDynamicKey } from "../../../i18n/utils.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { ContextMenuBackButton, ContextMenuButton, ContextMenuHeader, useContextMenuContext } from "../../Dialog/components/ContextMenu.mjs";
 import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
-import { useMessageComposerCommands } from "../hooks/useMessageComposerCommands.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 { IconChevronLeft } = useComponentContextIcons();
 	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("aria/Back to attachments"),
+			"aria-label": t("messageComposer.commandsMenu.backAttachments.ariaLabel", "Back to attachments"),
 			onClick: returnToParentMenu,
-			children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("Instant commands") })]
+			children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("messageComposer.commandsMenu.instantCommands.text", "Instant commands") })]
 		})
 	});
 };
@@ -27,7 +28,7 @@ var CommandsMenuHeader = () => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(ContextMenuHeader, {
 		className: "str-chat__context-menu__header--commands",
-		children: /* @__PURE__ */ jsx("span", { children: t("Instant commands") })
+		children: /* @__PURE__ */ jsx("span", { children: t("messageComposer.commandsMenu.instantCommands.text", "Instant commands") })
 	});
 };
 var CommandsMenu = () => {
@@ -50,45 +51,39 @@ var CommandsMenu = () => {
 var useCommandTranslation = (command) => {
 	const { t } = useTranslationContext();
 	const knownArgsTranslations = useMemo(() => ({
-		ban: t("ban-command-args"),
-		giphy: t("giphy-command-args"),
-		mute: t("mute-command-args"),
-		unban: t("unban-command-args"),
-		unmute: t("unmute-command-args")
+		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("ban-command-description"),
-		giphy: t("giphy-command-description"),
-		mute: t("mute-command-description"),
-		unban: t("unban-command-description"),
-		unmute: t("unmute-command-description")
+		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(command.args)),
-		description: command.description && (knownDescriptionTranslations[command.name ?? ""] ?? t(command.description))
+		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 = useMemo(() => ({
+	const icons = {
 		ban: IconUserRemove,
 		flag: IconFlag,
 		giphy: IconGiphy,
 		mute: IconMute,
 		unban: IconUserAdd,
 		unmute: IconAudio
-	}), [
-		IconAudio,
-		IconFlag,
-		IconGiphy,
-		IconMute,
-		IconUserAdd,
-		IconUserRemove
-	]);
-	const details = useMemo(() => args ? `/${command.name} ${args}` : `/${command.name}`, [args, command.name]);
+	};
 	return /* @__PURE__ */ createElement(ContextMenuButton, {
-		"aria-label": useMemo(() => description ? `${description}, ${details}` : details, [description, details]),
+		"aria-label": ariaLabel,
 		...props,
 		className: clsx("str-chat__context-menu__button--command", className),
 		details,

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

@@ -1 +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 { CommandResponse } 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';\n\nexport const CommandsMenuClassName = 'str-chat__context-menu--commands';\n\nexport const CommandsSubmenuHeader = () => {\n  const { IconChevronLeft } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const { returnToParentMenu } = useContextMenuContext();\n  return (\n    <ContextMenuHeader className='str-chat__context-menu__header--commands str-chat__context-menu__header--submenu-commands'>\n      <ContextMenuBackButton\n        aria-label={t('aria/Back to attachments')}\n        onClick={returnToParentMenu}\n      >\n        <IconChevronLeft />\n        <span>{t('Instant commands')}</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>{t('Instant commands')}</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: CommandResponse) => {\n  const { t } = useTranslationContext();\n\n  const knownArgsTranslations = useMemo<Record<string, string>>(\n    () => ({\n      ban: t('ban-command-args'),\n      giphy: t('giphy-command-args'),\n      mute: t('mute-command-args'),\n      unban: t('unban-command-args'),\n      unmute: t('unmute-command-args'),\n    }),\n    [t],\n  );\n  const knownDescriptionTranslations = useMemo<Record<string, string>>(\n    () => ({\n      ban: t('ban-command-description'),\n      giphy: t('giphy-command-description'),\n      mute: t('mute-command-description'),\n      unban: t('unban-command-description'),\n      unmute: t('unmute-command-description'),\n    }),\n    [t],\n  );\n\n  const args =\n    command.args && (knownArgsTranslations[command.name ?? ''] ?? t(command.args));\n  const description =\n    command.description &&\n    (knownDescriptionTranslations[command.name ?? ''] ?? t(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: CommandResponse & { name: string };\n  enabled?: boolean;\n}) => {\n  const { args, description } = useCommandTranslation(command);\n  const { IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove } =\n    useComponentContextIcons();\n\n  const icons = useMemo<Record<string, ComponentType>>(\n    () => ({\n      ban: IconUserRemove,\n      flag: IconFlag,\n      giphy: IconGiphy,\n      mute: IconMute,\n      unban: IconUserAdd,\n      unmute: IconAudio,\n    }),\n    [IconAudio, IconFlag, IconGiphy, IconMute, IconUserAdd, IconUserRemove],\n  );\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  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":";;;;;;;;;;;AAiBA,IAAa,wBAAwB;AAErC,IAAa,8BAA8B;CACzC,MAAM,EAAE,oBAAoB,yBAAyB;CAErD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,uBAAuB,sBAAsB;CACrD,OACE,oBAAC,mBAAD;EAAmB,WAAU;YAC3B,qBAAC,uBAAD;GACE,cAAY,EAAE,0BAA0B;GACxC,SAAS;aAFX,CAIE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,QAAD,EAAA,UAAO,EAAE,kBAAkB,EAAQ,CAAA,CACd;;CACN,CAAA;AAEvB;AAEA,IAAa,2BAA2B;CACtC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,mBAAD;EAAmB,WAAU;YAC3B,oBAAC,QAAD,EAAA,UAAO,EAAE,kBAAkB,EAAQ,CAAA;CAClB,CAAA;AAEvB;AAEA,IAAa,qBAAqB;CAChC,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,gBAAgB,0BAA0B;CAKlD,OACE,oBAAA,YAAA,EAAA,UAHe,2BAIZ,CAAA,CAAS,KAAK,EAAE,SAAS,cACxB,oBAAC,wBAAD;EACW;EACA;EAET,eAAe;GACb,IAAI,CAAC,QAAQ,QAAQ,CAAC,SAAS;GAC/B,gBAAgB,aAAa,WAAW,OAAO;GAC/C,UAAU;GAEV,4BAA4B,YAAY,SAAS,MAAM,CAAC;GACxD,oBAAoB,oBAAoB,EAAE,SAAS,QAAQ,KAAK,CAAC;EACnE;CACD,GATM,QAAQ,IASd,CACF,EACD,CAAA;AAEN;AAEA,IAAa,yBAAyB,YAA6B;CACjE,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,wBAAwB,eACrB;EACL,KAAK,EAAE,kBAAkB;EACzB,OAAO,EAAE,oBAAoB;EAC7B,MAAM,EAAE,mBAAmB;EAC3B,OAAO,EAAE,oBAAoB;EAC7B,QAAQ,EAAE,qBAAqB;CACjC,IACA,CAAC,CAAC,CACJ;CACA,MAAM,+BAA+B,eAC5B;EACL,KAAK,EAAE,yBAAyB;EAChC,OAAO,EAAE,2BAA2B;EACpC,MAAM,EAAE,0BAA0B;EAClC,OAAO,EAAE,2BAA2B;EACpC,QAAQ,EAAE,4BAA4B;CACxC,IACA,CAAC,CAAC,CACJ;CAQA,OAAO;EAAE,MALP,QAAQ,SAAS,sBAAsB,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI;EAK/D,aAHb,QAAQ,gBACP,6BAA6B,QAAQ,QAAQ,OAAO,EAAE,QAAQ,WAAW;CAEjD;AAC7B;AAEA,IAAa,0BAA0B,EACrC,WACA,SACA,UAAU,MACV,GAAG,YAIC;CACJ,MAAM,EAAE,MAAM,gBAAgB,sBAAsB,OAAO;CAC3D,MAAM,EAAE,WAAW,UAAU,WAAW,UAAU,aAAa,mBAC7D,yBAAyB;CAE3B,MAAM,QAAQ,eACL;EACL,KAAK;EACL,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;CACV,IACA;EAAC;EAAW;EAAU;EAAW;EAAU;EAAa;CAAc,CACxE;CAGA,MAAM,UAAU,cACP,OAAO,IAAI,QAAQ,KAAK,GAAG,SAAS,IAAI,QAAQ,QACvD,CAAC,MAAM,QAAQ,IAAI,CACrB;CAMA,OACE,8BAAC,mBAAD;EACE,cAPc,cACT,cAAc,GAAG,YAAY,IAAI,YAAY,SACpD,CAAC,aAAa,OAAO,CAKP;EACZ,GAAI;EACJ,WAAW,KAAK,2CAA2C,SAAS;EAC3D;EACT,UAAU,CAAC;EACX,MAAM,MAAM,QAAQ;EACpB,KAAK,QAAQ;EACb,OAAO,QAAQ;CAChB,CAAA;AAEL"}
+{"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

@@ -1,7 +1,7 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
-import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
 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 }) => {
@@ -20,7 +20,7 @@ var CommandChip = ({ command }) => {
 				children: command.name
 			}),
 			/* @__PURE__ */ jsx("button", {
-				"aria-label": t("Exit command {{ command }}", { command: command.name }),
+				"aria-label": t("messageComposer.commandChip.exitCommand.ariaLabel", "Exit command {{ command }}", { command: command.name }),
 				className: "str-chat__command-chip__close-button",
 				onClick: () => {
 					textComposer.setCommand(null);

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

@@ -1 +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\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('Exit command {{ command }}', { command: command.name })}\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;CAEzD,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,EAAE,8BAA8B,EAAE,SAAS,QAAQ,KAAK,CAAC;IACrE,WAAW;IACX,eAAe;KACb,aAAa,WAAW,IAAI;KAC5B,YAAY,SAAS,MAAM;IAC7B;cAEA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EACL;;AAET"}
+{"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/EditedMessagePreview.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 var EditedMessagePreview = ({ message, onCancel }) => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(QuotedMessagePreviewUI, {
-		authorLabel: t("Edit Message"),
+		authorLabel: t("common.editMessage.text", "Edit Message"),
 		onRemove: onCancel,
 		quotedMessage: message
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"EditedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/EditedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { QuotedMessagePreviewUI } from './QuotedMessagePreview';\nimport type { LocalMessage } from 'stream-chat';\nimport { useTranslationContext } from '../../context';\n\nexport type EditedMessagePreviewProps = {\n  message: LocalMessage;\n  onCancel: () => void;\n};\n\nexport const EditedMessagePreview = ({\n  message,\n  onCancel,\n}: EditedMessagePreviewProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <QuotedMessagePreviewUI\n      authorLabel={t('Edit Message')}\n      onRemove={onCancel}\n      quotedMessage={message}\n    />\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,wBAAwB,EACnC,SACA,eAC+B;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,wBAAD;EACE,aAAa,EAAE,cAAc;EAC7B,UAAU;EACV,eAAe;CAChB,CAAA;AAEL"}
+{"version":3,"file":"EditedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/EditedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { QuotedMessagePreviewUI } from './QuotedMessagePreview';\nimport type { LocalMessage } from 'stream-chat';\nimport { useTranslationContext } from '../../context';\n\nexport type EditedMessagePreviewProps = {\n  message: LocalMessage;\n  onCancel: () => void;\n};\n\nexport const EditedMessagePreview = ({\n  message,\n  onCancel,\n}: EditedMessagePreviewProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <QuotedMessagePreviewUI\n      authorLabel={t('common.editMessage.text', 'Edit Message')}\n      onRemove={onCancel}\n      quotedMessage={message}\n    />\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,wBAAwB,EACnC,SACA,eAC+B;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,wBAAD;EACE,aAAa,EAAE,2BAA2B,cAAc;EACxD,UAAU;EACV,eAAe;CAChB,CAAA;AAEL"}

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

@@ -1,14 +1,14 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
 import { PopperTooltip } from "../Tooltip/Tooltip.mjs";
 import { useEnterLeaveHandlers } from "../Tooltip/hooks/useEnterLeaveHandlers.mjs";
 import { BaseImage } from "../BaseImage/BaseImage.mjs";
 import { RemoveAttachmentPreviewButton } from "./RemoveAttachmentPreviewButton.mjs";
-import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useState } from "react";
+import { LinkPreviewsManager } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { LinkPreviewsManager } from "stream-chat";
 //#region src/components/MessageComposer/LinkPreviewList.tsx
 var linkPreviewsManagerStateSelector = (state) => ({ linkPreviews: Array.from(state.previews.values()).filter((preview) => LinkPreviewsManager.previewIsLoaded(preview) || LinkPreviewsManager.previewIsLoading(preview)) });
 var LinkPreviewList = ({ displayLinkCount = 1 }) => {

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

@@ -1,36 +1,31 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
-import { MessageComposerContextProvider } from "../../context/MessageComposerContext.mjs";
 import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
 import { useMessageComposerBindings } from "./hooks/useMessageComposerBindings.mjs";
+import { MessageComposerContextProvider } from "../../context/MessageComposerContext.mjs";
+import { useMessageComposerControllerContext } from "../../context/MessageComposerControllerContext.mjs";
 import { useRegisterDropHandlers } from "./WithDragAndDropUpload.mjs";
 import { MessageComposerUI } from "./MessageComposerUI.mjs";
 import { useCreateMessageComposerContext } from "./hooks/useCreateMessageComposerContext.mjs";
-import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/MessageComposer/MessageComposer.tsx
-var MessageComposerControllerContext = React.createContext(void 0);
-var MessageComposerControllerProvider = ({ children, messageComposerController }) => /* @__PURE__ */ jsx(MessageComposerControllerContext.Provider, {
-	value: messageComposerController,
-	children
-});
-var useMessageComposerControllerContext = () => useContext(MessageComposerControllerContext);
 var MessageComposerProvider = (props) => {
 	const messageComposerBindings = useMessageComposerBindings(props);
-	const { emojiSearchIndex } = useComponentContext("MessageComposer");
+	const { emojiSearchIndex } = useComponentContext();
 	const messageComposerContextValue = useCreateMessageComposerContext({
 		...messageComposerBindings,
 		...props,
 		emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
 	});
 	const messageComposer = useMessageComposerController();
+	const suppliedComposer = useMessageComposerControllerContext();
 	useEffect(() => () => {
-		if (messageComposer.channel.disconnected) return;
-		const promise = messageComposer.config.drafts.enabled ? messageComposer.createDraft().catch(console.error) : Promise.resolve();
-		if (props.preventClearingOnUnmount) return;
-		promise.finally(() => messageComposer.clear());
-	}, [messageComposer, props.preventClearingOnUnmount]);
+		const draftSaved = messageComposer.createDraft().catch(console.error);
+		if (messageComposer === suppliedComposer) return;
+		draftSaved.finally(() => messageComposer.clear());
+	}, [messageComposer, suppliedComposer]);
 	useEffect(() => {
 		const threadId = messageComposer.threadId;
 		if (!threadId || !messageComposer.channel || !messageComposer.contentIsEmpty || !messageComposer.config.drafts.enabled) return;
@@ -45,7 +40,7 @@ var MessageComposerProvider = (props) => {
 	});
 };
 var UnMemoizedMessageComposer = (props) => {
-	const { MessageComposerUI: MessageComposerUI$1 = MessageComposerUI } = useComponentContext("MessageComposer");
+	const { MessageComposerUI: MessageComposerUI$1 = MessageComposerUI } = useComponentContext();
 	const messageComposer = useMessageComposerController();
 	const id = useStableId();
 	return /* @__PURE__ */ jsx(DialogManagerProvider, {
@@ -61,6 +56,6 @@ var UnMemoizedMessageComposer = (props) => {
 */
 var MessageComposer = React.memo(UnMemoizedMessageComposer);
 //#endregion
-export { MessageComposer, MessageComposerControllerProvider, useMessageComposerControllerContext };
+export { MessageComposer };
 
 //# sourceMappingURL=MessageComposer.mjs.map