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

package/dist/es/components/Dialog/components/ContextMenu.mjs

@@ -0,0 +1,551 @@
+import { requireContext } from "../../../context/requireContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../hooks/useDialog.mjs";
+import { createRovingFocusKeyDownHandler } from "../../../a11y/a11yUtils.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Avatar } from "../../Avatar/Avatar.mjs";
+import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.mjs";
+import { DialogAnchor, useDialogAnchor } from "../service/DialogAnchor.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import React, { createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/components/ContextMenu.tsx
+var BaseContextMenuButton = ({ children, className, details, hasSubMenu, Icon, label, role = "menuitem", SubmenuIcon, variant, ...props }) => {
+	const { IconChevronRight } = useComponentContextIcons();
+	const ResolvedSubmenuIcon = SubmenuIcon ?? IconChevronRight;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		className: clsx("str-chat__context-menu__button", {
+			"str-chat__context-menu__button--with-submenu": hasSubMenu,
+			[`str-chat__context-menu__button--${variant}`]: typeof variant === "string"
+		}, className),
+		role,
+		type: "button",
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "str-chat__context-menu__button__icon" }),
+			label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				className: "str-chat__context-menu__button__label",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "str-chat__context-menu__button__details",
+				children: details
+			})] }) : /* @__PURE__ */ jsx("div", {
+				className: "str-chat__context-menu__button__label",
+				children
+			}),
+			!!hasSubMenu && /* @__PURE__ */ jsx(ResolvedSubmenuIcon, { className: "str-chat__context-menu__button__submenu-icon" })
+		]
+	});
+};
+var UserContextMenuButton = ({ children, className, imageUrl, role = "menuitem", userName, ...props }) => {
+	const { Avatar: Avatar$1 = Avatar } = useComponentContext();
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		className: clsx("str-chat__context-menu__button str-chat__user-context-menu__button", className),
+		role,
+		type: "button",
+		children: [/* @__PURE__ */ jsx(Avatar$1, {
+			"aria-hidden": true,
+			imageUrl,
+			size: "sm",
+			userName
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__context-menu__button__label",
+			children: children ?? userName
+		})]
+	});
+};
+var EmojiContextMenuButton = ({ children, className, emoji, label, role = "menuitem", ...props }) => /* @__PURE__ */ jsxs("button", {
+	...props,
+	className: clsx("str-chat__context-menu__button str-chat__emoji-context-menu__button", className),
+	role,
+	type: "button",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "str-chat__context-menu__button__emoji str-chat__emoji-item--entity",
+		children: emoji
+	}), /* @__PURE__ */ jsx("div", {
+		className: "str-chat__context-menu__button__label",
+		children: children ?? label
+	})]
+});
+var ContextMenuButtonWithSubmenu = ({ children, className, Submenu, submenuContainerProps, submenuPlacement = "right-start", submenuRollAxis = "x", ...buttonProps }) => {
+	const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+	const { registerDialogSubmenu, unregisterDialogSubmenu } = useContextMenuContext();
+	const buttonRef = useRef(null);
+	const [dialogContainer, setDialogContainer] = useState(null);
+	const keepSubmenuOpenFlag = useRef(false);
+	const dialogCloseTimeout = useRef(null);
+	const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+	useEffect(() => {
+		if (!dialogIsOpen) return;
+		registerDialogSubmenu();
+		return () => unregisterDialogSubmenu();
+	}, [
+		dialogIsOpen,
+		registerDialogSubmenu,
+		unregisterDialogSubmenu
+	]);
+	const { placement: chosenPlacement, setPopperElement, styles } = useDialogAnchor({
+		offset: 8,
+		open: dialogIsOpen,
+		placement: submenuPlacement,
+		referenceElement: buttonRef.current
+	});
+	const closeDialogLazily = useCallback(() => {
+		if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+		dialogCloseTimeout.current = setTimeout(() => {
+			if (keepSubmenuOpenFlag.current) return;
+			dialog.close();
+		}, 100);
+	}, [dialog]);
+	const keepSubmenuOpen = useCallback(() => {
+		keepSubmenuOpenFlag.current = true;
+	}, []);
+	const allowToCloseSubmenu = useCallback(() => {
+		keepSubmenuOpenFlag.current = false;
+	}, []);
+	const closeSubmenu = useCallback(() => {
+		allowToCloseSubmenu();
+		closeDialogLazily();
+	}, [allowToCloseSubmenu, closeDialogLazily]);
+	const handleClose = useCallback((event) => {
+		const parentButton = buttonRef.current;
+		if (!dialogIsOpen || !parentButton) return;
+		event.stopPropagation();
+		closeDialogLazily();
+		parentButton.focus();
+	}, [
+		closeDialogLazily,
+		dialogIsOpen,
+		buttonRef
+	]);
+	const handleFocusParentButton = () => {
+		if (dialogIsOpen) return;
+		dialog.open();
+		keepSubmenuOpen();
+	};
+	useEffect(() => {
+		const parentButton = buttonRef.current;
+		if (!dialogIsOpen || !parentButton) return;
+		const hideOnEscape = (event) => {
+			if (event.key !== "Escape") return;
+			handleClose(event);
+			closeSubmenu();
+		};
+		document.addEventListener("keyup", hideOnEscape, { capture: true });
+		return () => {
+			document.removeEventListener("keyup", hideOnEscape, { capture: true });
+		};
+	}, [
+		dialogIsOpen,
+		handleClose,
+		closeSubmenu
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseContextMenuButton, {
+		"aria-expanded": dialogIsOpen,
+		"aria-haspopup": "menu",
+		className: clsx(className, "str_chat__button-with-submenu", { "str_chat__button-with-submenu--submenu-open": dialogIsOpen }),
+		hasSubMenu: true,
+		onBlur: closeSubmenu,
+		onClick: (event) => {
+			event.stopPropagation();
+			dialog.toggle();
+		},
+		onFocus: handleFocusParentButton,
+		onMouseEnter: handleFocusParentButton,
+		onMouseLeave: closeSubmenu,
+		...buttonProps,
+		ref: buttonRef,
+		children
+	}), dialogIsOpen && /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__context-menu__submenu-container", submenuClassName),
+		"data-str-chat-placement": chosenPlacement,
+		"data-str-chat-roll-axis": submenuRollAxis,
+		onBlur: (event) => {
+			if (event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget)) return;
+			closeSubmenu();
+		},
+		onFocus: keepSubmenuOpen,
+		onMouseEnter: keepSubmenuOpen,
+		onMouseLeave: closeSubmenu,
+		ref: (element) => {
+			setPopperElement(element);
+			setDialogContainer(element);
+		},
+		style: styles,
+		tabIndex: -1,
+		...submenuContainerRestProps,
+		children: /* @__PURE__ */ jsx(Submenu, {})
+	})] });
+};
+var ContextMenuButton = (props) => {
+	const { Submenu, submenuContainerProps, submenuPlacement, submenuRollAxis, ...buttonProps } = props;
+	if (Submenu) return /* @__PURE__ */ jsx(ContextMenuButtonWithSubmenu, {
+		...buttonProps,
+		Submenu,
+		submenuContainerProps,
+		submenuPlacement,
+		submenuRollAxis
+	});
+	return /* @__PURE__ */ jsx(BaseContextMenuButton, { ...buttonProps });
+};
+var ContextMenuBackButton = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, role = "menuitem", ...props }) => {
+	const { t } = useTranslationContext();
+	const generatedBackNavigationLabelId = useStableId();
+	const generatedVisibleLabelId = useStableId();
+	const resolvedAriaLabel = ariaLabel ?? t("dialog.contextMenu.backParentMenuButton.ariaLabel", "Back to parent menu button");
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? `${generatedVisibleLabelId} ${generatedBackNavigationLabelId}`;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		"aria-labelledby": resolvedAriaLabelledBy,
+		className: clsx("str-chat__context-menu__back-button", className),
+		role,
+		type: "button",
+		children: [!ariaLabelledBy && /* @__PURE__ */ jsx(VisuallyHidden, {
+			id: generatedBackNavigationLabelId,
+			children: resolvedAriaLabel
+		}), /* @__PURE__ */ jsx("span", {
+			className: "str-chat__context-menu__back-button__content",
+			id: generatedVisibleLabelId,
+			children
+		})]
+	});
+};
+var ContextMenuHeader = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__context-menu__header", className),
+	children
+});
+var ContextMenuBody = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__context-menu__body", className),
+	children
+});
+var ContextMenuRoot = React.forwardRef(function ContextMenuRoot({ className, role = "menu", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__context-menu", className),
+		ref,
+		role
+	});
+});
+var DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR = [
+	"[role=\"menuitem\"]:not(:disabled)",
+	"[role=\"menuitemradio\"]:not(:disabled)",
+	"[role=\"menuitemcheckbox\"]:not(:disabled)"
+].join(",");
+var isVisibleContextMenuKeyboardNavigationItem = (item) => {
+	if (item.offsetParent !== null || item.offsetHeight > 0) return true;
+	if (item.hidden) return false;
+	if (item.style.display === "none") return false;
+	return true;
+};
+var getVisibleContextMenuKeyboardNavigationItems = (contextMenuRoot, itemSelector = DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR) => Array.from(contextMenuRoot?.querySelectorAll(itemSelector) ?? []).filter(isVisibleContextMenuKeyboardNavigationItem);
+var createContextMenuFocusRestoreRequest = ({ contextMenuRoot, focusReturnTarget }) => {
+	const target = focusReturnTarget ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+	if (!target) return {
+		index: -1,
+		target: null
+	};
+	return {
+		index: getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot).findIndex((menuItem) => menuItem === target),
+		target
+	};
+};
+var resolveContextMenuFocusRestoreTarget = ({ contextMenuRoot, request }) => {
+	if (!request) return null;
+	if (request.target?.isConnected) return request.target;
+	if (request.index >= 0) return getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot)[request.index] ?? null;
+	return null;
+};
+var CONTEXT_MENU_HEADER_SELECTOR = ".str-chat__context-menu__header";
+var resolveSubmenuInitialFocusTarget = ({ contextMenuRoot, initialFocus, itemSelector }) => {
+	if (initialFocus === "none") return null;
+	const items = getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot, itemSelector);
+	if (initialFocus === "first") return items[0] ?? null;
+	return items.find((item) => !item.closest(CONTEXT_MENU_HEADER_SELECTOR)) ?? items[0] ?? null;
+};
+var ContextMenuContext = React.createContext(void 0);
+var useContextMenuContext = () => requireContext(useContext(ContextMenuContext), "useContextMenuContext", "ContextMenu");
+/**
+* Internal/default content renderer for {@link ContextMenu}.
+*
+* Override this through `ComponentContext.ContextMenuContent` when you need to
+* customize submenu/back navigation behavior while keeping the same anchor/focus
+* handling from `ContextMenu`.
+*/
+function ContextMenuContent({ anchorReferenceElement, backButtonAriaLabel, backLabel, children, className, enableAnimations = true, Header, items, ItemsWrapper, keyboardNavigation, menuClassName, onClose, onMenuLevelChange, transitionDirection, ...props }) {
+	const { t } = useTranslationContext();
+	const { IconChevronLeft } = useComponentContextIcons();
+	const resolvedBackLabel = backLabel ?? t("common.back.label", "Back");
+	const { ["aria-describedby"]: rootAriaDescribedBy, ["aria-label"]: rootAriaLabel, ["aria-labelledby"]: rootAriaLabelledBy, ...contextMenuRootProps } = props;
+	const rootLevel = useMemo(() => ({
+		Header,
+		items,
+		ItemsWrapper,
+		menuClassName
+	}), [
+		Header,
+		items,
+		ItemsWrapper,
+		menuClassName
+	]);
+	const [menuStack, setMenuStack] = useState(() => [rootLevel]);
+	const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);
+	const contextMenuRootRef = useRef(null);
+	const focusRestoreRequestRef = useRef(null);
+	const pendingForwardFocusRef = useRef(null);
+	const activeMenu = menuStack[menuStack.length - 1];
+	const keyboardNavigationItemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
+	const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
+	const closeMenu = useCallback(() => {
+		onClose?.();
+	}, [onClose]);
+	const openSubmenu = useCallback(({ focusReturnTarget, Header, initialFocus = "first-item", ItemsWrapper: SubmenuItemsWrapper, menuClassName, Submenu }) => {
+		pendingForwardFocusRef.current = initialFocus;
+		focusRestoreRequestRef.current = null;
+		const nextLevel = {
+			focusRestoreRequest: createContextMenuFocusRestoreRequest({
+				contextMenuRoot: contextMenuRootRef.current,
+				focusReturnTarget
+			}),
+			Header,
+			initialFocus,
+			ItemsWrapper: SubmenuItemsWrapper ?? ItemsWrapper,
+			menuClassName,
+			Submenu
+		};
+		setMenuStack((current) => [...current, nextLevel]);
+	}, [ItemsWrapper]);
+	const returnToParentMenu = useCallback(() => {
+		setMenuStack((current) => {
+			if (current.length <= 1) return current;
+			focusRestoreRequestRef.current = current[current.length - 1]?.focusRestoreRequest ?? null;
+			pendingForwardFocusRef.current = null;
+			return current.slice(0, -1);
+		});
+	}, []);
+	useEffect(() => {
+		setMenuStack((current) => {
+			if (current.length === 1 && current[0] === rootLevel) return current;
+			return [rootLevel];
+		});
+	}, [rootLevel]);
+	useEffect(() => {
+		onMenuLevelChange?.(menuStack.length);
+	}, [menuStack.length, onMenuLevelChange]);
+	useLayoutEffect(() => {
+		const focusRestoreRequest = focusRestoreRequestRef.current;
+		const pendingForwardFocus = pendingForwardFocusRef.current;
+		if (!focusRestoreRequest && !pendingForwardFocus) return;
+		const contextMenuRoot = contextMenuRootRef.current;
+		(focusRestoreRequest ? resolveContextMenuFocusRestoreTarget({
+			contextMenuRoot,
+			request: focusRestoreRequest
+		}) : resolveSubmenuInitialFocusTarget({
+			contextMenuRoot,
+			initialFocus: pendingForwardFocus,
+			itemSelector: keyboardNavigationItemSelector
+		}))?.focus();
+	}, [
+		keyboardNavigationItemSelector,
+		menuBodyAnimationKey,
+		menuStack.length
+	]);
+	useEffect(() => {
+		if (!transitionDirection) return;
+		setMenuBodyAnimationKey((value) => value + 1);
+	}, [transitionDirection, menuStack.length]);
+	const dialogSubmenuOpenCountRef = useRef(0);
+	const registerDialogSubmenu = useCallback(() => {
+		dialogSubmenuOpenCountRef.current += 1;
+	}, []);
+	const unregisterDialogSubmenu = useCallback(() => {
+		dialogSubmenuOpenCountRef.current = Math.max(0, dialogSubmenuOpenCountRef.current - 1);
+	}, []);
+	const rovingFocusKeyDownHandler = useMemo(() => createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, keyboardNavigationItemSelector) }), [keyboardNavigationItemSelector]);
+	const escapeConsumedRef = useRef(false);
+	const keyboardNavigationHandler = useCallback((event) => {
+		if (event.key === "Escape") {
+			if (dialogSubmenuOpenCountRef.current > 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (menuStack.length > 1) {
+				escapeConsumedRef.current = true;
+				returnToParentMenu();
+			} else closeMenu();
+			return;
+		}
+		rovingFocusKeyDownHandler(event);
+	}, [
+		closeMenu,
+		menuStack.length,
+		returnToParentMenu,
+		rovingFocusKeyDownHandler
+	]);
+	const suppressEscapeKeyUp = useCallback((event) => {
+		if (event.key === "Escape" && escapeConsumedRef.current) {
+			escapeConsumedRef.current = false;
+			event.stopPropagation();
+		}
+	}, []);
+	const isSubmenuLevel = menuStack.length > 1;
+	return /* @__PURE__ */ jsx(ContextMenuContext.Provider, {
+		value: {
+			anchorReferenceElement,
+			closeMenu,
+			openSubmenu,
+			registerDialogSubmenu,
+			returnToParentMenu,
+			unregisterDialogSubmenu
+		},
+		children: /* @__PURE__ */ jsxs(ContextMenuRoot, {
+			"aria-describedby": isSubmenuLevel ? void 0 : rootAriaDescribedBy,
+			"aria-label": isSubmenuLevel ? t("dialog.contextMenu.submenu.ariaLabel", "Submenu") : rootAriaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : rootAriaLabelledBy,
+			className: clsx(className, activeMenu.menuClassName),
+			"data-str-chat-enable-animations": enableAnimations,
+			onKeyDownCapture: keyboardNavigationHandler,
+			onKeyUpCapture: suppressEscapeKeyUp,
+			ref: contextMenuRootRef,
+			...contextMenuRootProps,
+			children: [activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, {
+				"aria-label": backButtonAriaLabel,
+				onClick: returnToParentMenu,
+				children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: resolvedBackLabel })]
+			}) }) : null, /* @__PURE__ */ jsx(ContextMenuBody, {
+				className: clsx({
+					"str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+					"str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+				}),
+				children: activeMenu.Submenu ? /* @__PURE__ */ jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item, index) => /* @__PURE__ */ jsx(Item, {}, `context-menu-item-${index}`)) })
+			}, `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`)]
+		})
+	});
+}
+/**
+* Contextual actions menu that can be used in two modes:
+*
+* - Anchored dialog mode: pass `id` + `referenceElement` (submenu-aware positioning).
+* - Inline mode: omit `id` and render a plain contextual list.
+*
+* Customization via `ComponentContext`:
+*
+* - `ContextMenu`: replace the whole menu container/behavior.
+* - `ContextMenuContent`: keep default container behavior but customize menu content
+*   rendering (items, submenu transitions, back navigation UI).
+* - To customize outside-click dismissal via `ComponentContext`, provide a custom
+*   `ContextMenu` that sets `closeOnClickOutside`:
+*
+* ```tsx
+* const CustomContextMenu = (props: ContextMenuProps) => (
+*   <ContextMenu {...props} closeOnClickOutside={false} />
+* );
+*
+* <ComponentProvider value={{ ContextMenu: CustomContextMenu }}>
+*   <Chat client={client}>{children}</Chat>
+* </ComponentProvider>
+* ```
+*
+* Example:
+* ```tsx
+* <ComponentProvider
+*   value={{
+*     ContextMenu: MyContextMenu,
+*     ContextMenuContent: MyContextMenuContent,
+*   }}
+* >
+*   <Chat client={client}>{children}</Chat>
+* </ComponentProvider>
+* ```
+*/
+var ContextMenu = (props) => {
+	const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = useComponentContext();
+	const { allowFlip, closeOnClickOutside, closeTransitionMs = 130, dialogManagerId, focus, id, offset = 8, onMenuLevelChange: onMenuLevelChangeProp, placement, referenceElement, submenuTransitionDurationMs, tabIndex, trapFocus, ...menuProps } = props;
+	const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
+	const isAnchored = id != null;
+	const [menuLevel, setMenuLevel] = useState(1);
+	const [transitionDirection, setTransitionDirection] = useState(void 0);
+	const [contentResetToken, setContentResetToken] = useState(0);
+	const transitionTimeoutRef = useRef(null);
+	const previousMenuLevelRef = useRef(1);
+	const open = useDialogIsOpen(id ?? "", dialogManagerId);
+	const previousOpenRef = useRef(open);
+	useEffect(() => {
+		if (!isAnchored) return;
+		if (previousOpenRef.current && !open) {
+			setMenuLevel(1);
+			setTransitionDirection(void 0);
+			setContentResetToken((value) => value + 1);
+			previousMenuLevelRef.current = 1;
+			if (transitionTimeoutRef.current) {
+				clearTimeout(transitionTimeoutRef.current);
+				transitionTimeoutRef.current = null;
+			}
+		}
+		previousOpenRef.current = open;
+	}, [isAnchored, open]);
+	useEffect(() => () => {
+		if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+	}, []);
+	const handleMenuLevelChange = useCallback((level) => {
+		if (isAnchored) {
+			const previousLevel = previousMenuLevelRef.current;
+			if (level !== previousLevel) {
+				setTransitionDirection(level > previousLevel ? "forward" : "backward");
+				if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+				transitionTimeoutRef.current = setTimeout(() => {
+					setTransitionDirection(void 0);
+					transitionTimeoutRef.current = null;
+				}, resolvedSubmenuTransitionDurationMs);
+			}
+			previousMenuLevelRef.current = level;
+			setMenuLevel(level);
+			return;
+		}
+		onMenuLevelChangeProp?.(level);
+	}, [
+		isAnchored,
+		onMenuLevelChangeProp,
+		resolvedSubmenuTransitionDurationMs
+	]);
+	const content = /* @__PURE__ */ createElement(ContextMenuContentComponent, {
+		anchorReferenceElement: isAnchored ? referenceElement : void 0,
+		...menuProps,
+		key: `context-menu-content-${contentResetToken}`,
+		onMenuLevelChange: handleMenuLevelChange,
+		transitionDirection
+	});
+	if (isAnchored) {
+		const { ["aria-describedby"]: ariaDescribedBy, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, backButtonAriaLabel: _bbal, backLabel: _b, enableAnimations: _ea, Header: _h, items: _i, ItemsWrapper: _w, keyboardNavigation: _kn, menuClassName: _m, onClose: _c, role: _r, ...anchorDivProps } = menuProps;
+		const isSubmenuLevel = menuLevel > 1;
+		return /* @__PURE__ */ jsx(DialogAnchor, {
+			allowFlip,
+			"aria-describedby": isSubmenuLevel ? void 0 : ariaDescribedBy,
+			"aria-label": isSubmenuLevel ? void 0 : ariaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : ariaLabelledBy,
+			closeOnClickOutside,
+			closeTransitionMs,
+			dialogManagerId,
+			focus,
+			id,
+			offset,
+			placement,
+			referenceElement,
+			tabIndex,
+			trapFocus,
+			updateKey: menuLevel,
+			...anchorDivProps,
+			children: content
+		});
+	}
+	return content;
+};
+//#endregion
+export { BaseContextMenuButton, ContextMenu, ContextMenuBackButton, ContextMenuBody, ContextMenuButton, ContextMenuContent, ContextMenuHeader, ContextMenuRoot, DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR, EmojiContextMenuButton, UserContextMenuButton, useContextMenuContext };
+
+//# sourceMappingURL=ContextMenu.mjs.map

package/dist/es/components/Dialog/components/ContextMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/ContextMenu.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { type AvatarProps, Avatar as DefaultAvatar } from '../../Avatar';\nimport type { PopperLikePlacement } from '../hooks';\nimport { useDialogIsOpen, useDialogOnNearestManager } from '../hooks';\nimport type { DialogAnchorProps } from '../service/DialogAnchor';\nimport { DialogAnchor, useDialogAnchor } from '../service/DialogAnchor';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport { createRovingFocusKeyDownHandler } from '../../../a11y/a11yUtils';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport { requireContext } from '../../../context/requireContext';\n\n/**\n * ContextMenu module\n *\n * What this file provides\n * - Primitives for contextual action UIs:\n *   `ContextMenu`, `ContextMenuContent`, `ContextMenuButton`, `ContextMenuHeader`,\n *   `ContextMenuBody`, `ContextMenuBackButton`, and user/emoji button variants.\n * - A small runtime context (`useContextMenuContext`) used by menu items to:\n *   - close the current menu (`closeMenu`)\n *   - open a submenu (`openSubmenu`)\n *   - return to parent level (`returnToParentMenu`)\n *\n * Rendering modes\n * - Anchored mode (most common): pass `id` and `referenceElement`.\n *   The component renders inside `DialogAnchor` and uses dialog manager state.\n * - Inline mode: omit anchor props and render as a plain contextual list.\n * - Outside click dismissal can be overridden per menu via `closeOnClickOutside`;\n *   otherwise manager default is used.\n *\n * Submenu model\n * - Submenus are represented as a stack of menu levels.\n * - Each level can define `Header`, `Submenu`, `items`, `ItemsWrapper`,\n *   and `menuClassName`.\n * - Opening submenu pushes a level to the stack; going back pops one level.\n * - When anchored menu closes, stack resets to root to avoid stale submenu state\n *   on next open.\n *\n * Animation model\n * - Root menu open/close is handled by `DialogAnchor` transition timing.\n * - `ContextMenu` defaults `closeTransitionMs` to `130` so close animations can be visible.\n * - `DialogAnchor` marks rendered content with `data-str-chat-dialog-state`:\n *   - `open` while visible\n *   - `closing` during delayed unmount window (`closeTransitionMs`)\n * - Context-menu closing keyframes in `ContextMenu.scss` target\n *   `[data-str-chat-dialog-state='closing']` + placement selectors.\n * - Level-to-level transitions are directional:\n *   - forward: parent -> submenu\n *   - backward: submenu -> parent\n * - Direction is tracked in `ContextMenu` and passed to `ContextMenuContent`.\n * - `ContextMenuContent` bumps an internal key for `ContextMenuBody` so React\n *   remounts the body and CSS enter animation reliably restarts on each level change.\n * - Initial/root menu render does not apply submenu forward/backward classes;\n *   directional animation classes are used only for submenu transitions.\n * - `enableAnimations` can disable content animations through data attributes/CSS.\n * - `submenuTransitionDurationMs` controls how long directional transition state is kept.\n *\n * Submenu popover behavior (`ContextMenuButton` with `Submenu`)\n * - Submenu can be rendered by passing `Submenu` (and optional placement/container props).\n * - Default submenu roll axis is `x` (override with `submenuRollAxis`).\n * - Hover/focus management uses a \"keep open\" ref flag plus lazy close timeout to avoid\n *   accidental submenu dismissal when moving pointer/focus between parent and submenu.\n *\n * Customization via `ComponentContext`\n * - `ComponentContext.ContextMenu` replaces the whole menu component at SDK call sites.\n * - `ComponentContext.ContextMenuContent` replaces content-level behavior while preserving\n *   default anchoring/dialog integration from `ContextMenu`.\n * - Built-in call sites (message actions, channel list action buttons, attachment selector,\n *   suggestion list) resolve `ContextMenu` from `ComponentContext` with fallback to default.\n */\nexport type BaseContextMenuButtonProps = {\n  details?: ReactNode;\n  hasSubMenu?: boolean;\n  label?: ReactNode;\n  Icon?: ComponentType<ComponentProps<'svg'>>;\n  SubmenuIcon?: ComponentType<ComponentProps<'svg'>>;\n  variant?: 'destructive';\n} & ComponentProps<'button'>;\n\nexport const BaseContextMenuButton = ({\n  children,\n  className,\n  details,\n  hasSubMenu,\n  Icon,\n  label,\n  role = 'menuitem',\n  SubmenuIcon,\n  variant,\n  ...props\n}: BaseContextMenuButtonProps) => {\n  const { IconChevronRight } = useComponentContextIcons();\n  const ResolvedSubmenuIcon = SubmenuIcon ?? IconChevronRight;\n\n  return (\n    <button\n      {...props}\n      className={clsx(\n        'str-chat__context-menu__button',\n        {\n          'str-chat__context-menu__button--with-submenu': hasSubMenu,\n          [`str-chat__context-menu__button--${variant}`]: typeof variant === 'string',\n        },\n        className,\n      )}\n      role={role}\n      type='button'\n    >\n      {Icon && <Icon className='str-chat__context-menu__button__icon' />}\n      {label ? (\n        <>\n          <div className='str-chat__context-menu__button__label'>{label}</div>\n          <div className='str-chat__context-menu__button__details'>{details}</div>\n        </>\n      ) : (\n        <div className='str-chat__context-menu__button__label'>{children}</div>\n      )}\n      {!!hasSubMenu && (\n        <ResolvedSubmenuIcon className='str-chat__context-menu__button__submenu-icon' />\n      )}\n    </button>\n  );\n};\n\nexport type UserContextMenuButtonProps = Pick<AvatarProps, 'imageUrl' | 'userName'> &\n  ComponentProps<'button'>;\n\nexport const UserContextMenuButton = ({\n  children,\n  className,\n  imageUrl,\n  role = 'menuitem',\n  userName,\n  ...props\n}: UserContextMenuButtonProps) => {\n  const { Avatar = DefaultAvatar } = useComponentContext();\n  return (\n    <button\n      {...props}\n      className={clsx(\n        'str-chat__context-menu__button str-chat__user-context-menu__button',\n        className,\n      )}\n      role={role}\n      type='button'\n    >\n      {/* The avatar is decorative here: the button already carries the user's name as its\n          label, so exposing the avatar (its fallback initials, title, and role=\"button\")\n          to assistive tech only adds noise to the option's accessible name. */}\n      <Avatar aria-hidden imageUrl={imageUrl} size='sm' userName={userName} />\n      <div className='str-chat__context-menu__button__label'>{children ?? userName}</div>\n    </button>\n  );\n};\n\nexport type EmojiContextMenuButtonProps = { emoji: string } & Pick<\n  BaseContextMenuButtonProps,\n  'label'\n> &\n  ComponentProps<'button'>;\n\nexport const EmojiContextMenuButton = ({\n  children,\n  className,\n  emoji,\n  label,\n  role = 'menuitem',\n  ...props\n}: EmojiContextMenuButtonProps) => (\n  <button\n    {...props}\n    className={clsx(\n      'str-chat__context-menu__button str-chat__emoji-context-menu__button',\n      className,\n    )}\n    role={role}\n    type='button'\n  >\n    <span className='str-chat__context-menu__button__emoji str-chat__emoji-item--entity'>\n      {emoji}\n    </span>\n    <div className='str-chat__context-menu__button__label'>{children ?? label}</div>\n  </button>\n);\n\ntype ButtonWithSubmenuProps = {\n  Submenu: ComponentType;\n  submenuContainerProps?: ComponentProps<'div'>;\n  submenuPlacement?: PopperLikePlacement;\n  submenuRollAxis?: 'x' | 'y';\n};\n\nconst ContextMenuButtonWithSubmenu = ({\n  children,\n  className,\n  Submenu,\n  submenuContainerProps,\n  submenuPlacement = 'right-start',\n  submenuRollAxis = 'x',\n  ...buttonProps\n}: BaseContextMenuButtonProps & ButtonWithSubmenuProps) => {\n  const { className: submenuClassName, ...submenuContainerRestProps } =\n    submenuContainerProps ?? {};\n  const { registerDialogSubmenu, unregisterDialogSubmenu } = useContextMenuContext();\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const [dialogContainer, setDialogContainer] = useState<HTMLDivElement | null>(null);\n  const keepSubmenuOpenFlag = useRef(false);\n  const dialogCloseTimeout = useRef<NodeJS.Timeout | null>(null);\n  const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  useEffect(() => {\n    if (!dialogIsOpen) return;\n    registerDialogSubmenu();\n    return () => unregisterDialogSubmenu();\n  }, [dialogIsOpen, registerDialogSubmenu, unregisterDialogSubmenu]);\n  const {\n    placement: chosenPlacement,\n    setPopperElement,\n    styles,\n  } = useDialogAnchor<HTMLDivElement>({\n    offset: 8,\n    open: dialogIsOpen,\n    placement: submenuPlacement,\n    referenceElement: buttonRef.current,\n  });\n\n  const closeDialogLazily = useCallback(() => {\n    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);\n    dialogCloseTimeout.current = setTimeout(() => {\n      if (keepSubmenuOpenFlag.current) return;\n      dialog.close();\n    }, 100);\n  }, [dialog]);\n\n  const keepSubmenuOpen = useCallback(() => {\n    keepSubmenuOpenFlag.current = true;\n  }, []);\n\n  const allowToCloseSubmenu = useCallback(() => {\n    keepSubmenuOpenFlag.current = false;\n  }, []);\n\n  const closeSubmenu = useCallback(() => {\n    allowToCloseSubmenu();\n    closeDialogLazily();\n  }, [allowToCloseSubmenu, closeDialogLazily]);\n\n  const handleClose = useCallback(\n    (event: Event) => {\n      const parentButton = buttonRef.current;\n      if (!dialogIsOpen || !parentButton) return;\n      event.stopPropagation();\n      closeDialogLazily();\n      parentButton.focus();\n    },\n    [closeDialogLazily, dialogIsOpen, buttonRef],\n  );\n\n  const handleFocusParentButton = () => {\n    if (dialogIsOpen) return;\n    dialog.open();\n    keepSubmenuOpen();\n  };\n\n  useEffect(() => {\n    const parentButton = buttonRef.current;\n    if (!dialogIsOpen || !parentButton) return;\n    const hideOnEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      handleClose(event);\n      closeSubmenu();\n    };\n\n    document.addEventListener('keyup', hideOnEscape, { capture: true });\n\n    return () => {\n      document.removeEventListener('keyup', hideOnEscape, { capture: true });\n    };\n  }, [dialogIsOpen, handleClose, closeSubmenu]);\n\n  return (\n    <>\n      <BaseContextMenuButton\n        aria-expanded={dialogIsOpen}\n        aria-haspopup='menu'\n        className={clsx(className, 'str_chat__button-with-submenu', {\n          'str_chat__button-with-submenu--submenu-open': dialogIsOpen,\n        })}\n        hasSubMenu\n        onBlur={closeSubmenu}\n        onClick={(event) => {\n          event.stopPropagation();\n          dialog.toggle();\n        }}\n        onFocus={handleFocusParentButton}\n        onMouseEnter={handleFocusParentButton}\n        onMouseLeave={closeSubmenu}\n        {...buttonProps}\n        ref={buttonRef}\n      >\n        {children}\n      </BaseContextMenuButton>\n      {dialogIsOpen && (\n        <div\n          className={clsx('str-chat__context-menu__submenu-container', submenuClassName)}\n          data-str-chat-placement={chosenPlacement}\n          data-str-chat-roll-axis={submenuRollAxis}\n          onBlur={(event) => {\n            const isBlurredDescendant =\n              event.relatedTarget instanceof Node &&\n              dialogContainer?.contains(event.relatedTarget);\n            if (isBlurredDescendant) return;\n            closeSubmenu();\n          }}\n          onFocus={keepSubmenuOpen}\n          onMouseEnter={keepSubmenuOpen}\n          onMouseLeave={closeSubmenu}\n          ref={(element) => {\n            setPopperElement(element);\n            setDialogContainer(element);\n          }}\n          style={styles}\n          tabIndex={-1}\n          {...submenuContainerRestProps}\n        >\n          <Submenu />\n        </div>\n      )}\n    </>\n  );\n};\n\ntype ContextMenuButtonProps = BaseContextMenuButtonProps &\n  Partial<ButtonWithSubmenuProps>;\n\nexport const ContextMenuButton = (props: ContextMenuButtonProps) => {\n  const {\n    Submenu,\n    submenuContainerProps,\n    submenuPlacement,\n    submenuRollAxis,\n    ...buttonProps\n  } = props;\n  if (Submenu) {\n    return (\n      <ContextMenuButtonWithSubmenu\n        {...buttonProps}\n        Submenu={Submenu}\n        submenuContainerProps={submenuContainerProps}\n        submenuPlacement={submenuPlacement}\n        submenuRollAxis={submenuRollAxis}\n      />\n    );\n  }\n\n  return <BaseContextMenuButton {...buttonProps} />;\n};\n\nexport const ContextMenuBackButton = ({\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  className,\n  role = 'menuitem',\n  ...props\n}: ComponentProps<'button'>) => {\n  const { t } = useTranslationContext();\n  const generatedBackNavigationLabelId = useStableId();\n  const generatedVisibleLabelId = useStableId();\n  const resolvedAriaLabel =\n    ariaLabel ??\n    t('dialog.contextMenu.backParentMenuButton.ariaLabel', 'Back to parent menu button');\n  const resolvedAriaLabelledBy =\n    ariaLabelledBy ?? `${generatedVisibleLabelId} ${generatedBackNavigationLabelId}`;\n\n  return (\n    <button\n      {...props}\n      aria-labelledby={resolvedAriaLabelledBy}\n      className={clsx('str-chat__context-menu__back-button', className)}\n      role={role}\n      type='button'\n    >\n      {!ariaLabelledBy && (\n        <VisuallyHidden id={generatedBackNavigationLabelId}>\n          {resolvedAriaLabel}\n        </VisuallyHidden>\n      )}\n      <span\n        className='str-chat__context-menu__back-button__content'\n        id={generatedVisibleLabelId}\n      >\n        {children}\n      </span>\n    </button>\n  );\n};\n\nexport const ContextMenuHeader = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__context-menu__header', className)}>\n    {children}\n  </div>\n);\n\nexport const ContextMenuBody = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__context-menu__body', className)}>\n    {children}\n  </div>\n);\n\nexport const ContextMenuRoot = React.forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  function ContextMenuRoot({ className, role = 'menu', ...props }, ref) {\n    return (\n      <div\n        {...props}\n        className={clsx('str-chat__context-menu', className)}\n        ref={ref}\n        role={role}\n      />\n    );\n  },\n);\n\nexport type ContextMenuHeaderComponent = ComponentType;\nexport type ContextMenuSubmenu = ComponentType;\n\nexport type ContextMenuOpenSubmenuParams = Omit<\n  ContextMenuLevel,\n  'focusRestoreRequest' | 'items'\n> & {\n  focusReturnTarget?: HTMLElement | null;\n};\n\nexport type ContextMenuItemProps = ComponentProps<'button'>;\n\nexport type ContextMenuItemComponent = ComponentType<ContextMenuItemProps>;\n\nexport const DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR = [\n  '[role=\"menuitem\"]:not(:disabled)',\n  '[role=\"menuitemradio\"]:not(:disabled)',\n  '[role=\"menuitemcheckbox\"]:not(:disabled)',\n].join(',');\n\nconst isVisibleContextMenuKeyboardNavigationItem = (item: HTMLElement) => {\n  // Fast path: offsetParent is null for display:none elements (and their descendants).\n  // offsetHeight covers position:fixed elements which have no offsetParent.\n  if (item.offsetParent !== null || item.offsetHeight > 0) return true;\n\n  // In environments without layout (e.g. jsdom), offsetParent/offsetHeight are always 0/null.\n  // Fall back to checking inline style and the `hidden` attribute.\n  if (item.hidden) return false;\n  const display = item.style.display;\n  if (display === 'none') return false;\n\n  // If no layout info and no explicit hiding signal, assume visible.\n  return true;\n};\n\ntype ContextMenuFocusRestoreRequest = {\n  /** Positional fallback used when the target element is no longer in the DOM. */\n  index: number;\n  target: HTMLElement | null;\n};\n\nconst getVisibleContextMenuKeyboardNavigationItems = (\n  contextMenuRoot: Element | null,\n  itemSelector: string = DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR,\n) =>\n  Array.from(contextMenuRoot?.querySelectorAll<HTMLElement>(itemSelector) ?? []).filter(\n    isVisibleContextMenuKeyboardNavigationItem,\n  );\n\nconst createContextMenuFocusRestoreRequest = ({\n  contextMenuRoot,\n  focusReturnTarget,\n}: {\n  contextMenuRoot: Element | null;\n  focusReturnTarget?: HTMLElement | null;\n}): ContextMenuFocusRestoreRequest => {\n  const target =\n    focusReturnTarget ??\n    (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n  if (!target) return { index: -1, target: null };\n\n  const index = getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot).findIndex(\n    (menuItem) => menuItem === target,\n  );\n\n  return { index, target };\n};\n\nconst resolveContextMenuFocusRestoreTarget = ({\n  contextMenuRoot,\n  request,\n}: {\n  contextMenuRoot: Element | null;\n  request: ContextMenuFocusRestoreRequest | null;\n}) => {\n  if (!request) return null;\n\n  // Prefer the original element if it's still in the DOM.\n  if (request.target?.isConnected) return request.target;\n\n  // Fall back to positional index when the element has been unmounted.\n  if (request.index >= 0) {\n    return (\n      getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot)[request.index] ?? null\n    );\n  }\n\n  return null;\n};\n\nconst CONTEXT_MENU_HEADER_SELECTOR = '.str-chat__context-menu__header';\n\n/**\n * Where focus should land when a submenu OPENS (forward navigation):\n * - `'first-item'` (default): the first focusable item that is NOT in the header — i.e. the first\n *   real menu option, skipping a back-button header — falling back to the very first item when the\n *   body has none.\n * - `'first'`: the first focusable item overall (the back-button header when present).\n * - `'none'`: do not move focus on open.\n */\nexport type ContextMenuSubmenuInitialFocus = 'first' | 'first-item' | 'none';\n\nconst resolveSubmenuInitialFocusTarget = ({\n  contextMenuRoot,\n  initialFocus,\n  itemSelector,\n}: {\n  contextMenuRoot: Element | null;\n  initialFocus: ContextMenuSubmenuInitialFocus;\n  itemSelector?: string;\n}): HTMLElement | null => {\n  if (initialFocus === 'none') return null;\n\n  const items = getVisibleContextMenuKeyboardNavigationItems(\n    contextMenuRoot,\n    itemSelector,\n  );\n  if (initialFocus === 'first') return items[0] ?? null;\n\n  // 'first-item': skip the header (e.g. the back button) and land on the first content item;\n  // fall back to the first item overall if the body has no focusable item.\n  return (\n    items.find((item) => !item.closest(CONTEXT_MENU_HEADER_SELECTOR)) ?? items[0] ?? null\n  );\n};\n\nexport type ContextMenuKeyboardNavigation = {\n  /**\n   * CSS selector used to collect focusable menu items.\n   * Defaults to `[role=\"menuitem\"]:not(:disabled)`.\n   */\n  itemSelector?: string;\n};\n\ntype ContextMenuContextValue = {\n  anchorReferenceElement?: HTMLElement | null;\n  closeMenu: () => void;\n  openSubmenu: (params: ContextMenuOpenSubmenuParams) => void;\n  registerDialogSubmenu: () => void;\n  returnToParentMenu: () => void;\n  unregisterDialogSubmenu: () => void;\n};\n\nconst ContextMenuContext = React.createContext<ContextMenuContextValue | undefined>(\n  undefined,\n);\n\nexport const useContextMenuContext = () =>\n  requireContext(useContext(ContextMenuContext), 'useContextMenuContext', 'ContextMenu');\n\ntype ContextMenuLevel = {\n  focusRestoreRequest?: ContextMenuFocusRestoreRequest;\n  /**\n   * Where focus lands when this level is opened as a submenu (forward navigation). Defaults to\n   * `'first-item'`. Ignored for the root level (its initial focus is the dialog's `autoFocus`).\n   */\n  initialFocus?: ContextMenuSubmenuInitialFocus;\n  items?: ContextMenuItemComponent[];\n  Submenu?: ContextMenuSubmenu;\n  Header?: ContextMenuHeaderComponent;\n  ItemsWrapper?: ComponentType;\n  menuClassName?: string;\n};\n\ntype ContextMenuBaseProps = ComponentPropsWithoutRef<'div'> & {\n  backButtonAriaLabel?: string;\n  backLabel?: ReactNode;\n  enableAnimations?: boolean;\n  Header?: ContextMenuHeaderComponent;\n  /**\n   * Customizes roving-focus keyboard navigation for menu items.\n   * ArrowUp/ArrowDown/Home/End move focus across items matched by\n   * `keyboardNavigation.itemSelector` (defaults to `[role=\"menuitem\"]:not(:disabled)`).\n   * Navigation is always enabled; use this prop only to override the item selector.\n   */\n  keyboardNavigation?: ContextMenuKeyboardNavigation;\n  onClose?: () => void;\n  onMenuLevelChange?: (level: number) => void;\n  /** Duration (ms) to keep submenu transition direction active for forward/backward animations. */\n  submenuTransitionDurationMs?: number;\n} & ContextMenuLevel;\n\n/** When provided, ContextMenu renders inside DialogAnchor and wires menu level for submenu alignment. */\ntype ContextMenuAnchorProps = Partial<\n  Pick<\n    DialogAnchorProps,\n    | 'id'\n    | 'dialogManagerId'\n    | 'placement'\n    | 'referenceElement'\n    | 'tabIndex'\n    | 'trapFocus'\n    | 'allowFlip'\n    | 'closeOnClickOutside'\n    | 'focus'\n    | 'closeTransitionMs'\n    | 'offset'\n  >\n>;\n\nexport type ContextMenuProps = ContextMenuBaseProps & ContextMenuAnchorProps;\n\nexport type ContextMenuContentProps = ContextMenuBaseProps & {\n  anchorReferenceElement?: HTMLElement | null;\n  transitionDirection?: 'forward' | 'backward';\n};\n\n/**\n * Internal/default content renderer for {@link ContextMenu}.\n *\n * Override this through `ComponentContext.ContextMenuContent` when you need to\n * customize submenu/back navigation behavior while keeping the same anchor/focus\n * handling from `ContextMenu`.\n */\nexport function ContextMenuContent({\n  anchorReferenceElement,\n  backButtonAriaLabel,\n  backLabel,\n  children,\n  className,\n  enableAnimations = true,\n  Header,\n  items,\n  ItemsWrapper,\n  keyboardNavigation,\n  menuClassName,\n  onClose,\n  onMenuLevelChange,\n  transitionDirection,\n  ...props\n}: ContextMenuContentProps) {\n  const { t } = useTranslationContext();\n  const { IconChevronLeft } = useComponentContextIcons();\n  const resolvedBackLabel = backLabel ?? t('common.back.label', 'Back');\n  const {\n    ['aria-describedby']: rootAriaDescribedBy,\n    ['aria-label']: rootAriaLabel,\n    ['aria-labelledby']: rootAriaLabelledBy,\n    ...contextMenuRootProps\n  } = props;\n  const rootLevel = useMemo<ContextMenuLevel>(\n    () => ({\n      Header,\n      items,\n      ItemsWrapper,\n      menuClassName,\n    }),\n    [Header, items, ItemsWrapper, menuClassName],\n  );\n  const [menuStack, setMenuStack] = useState<ContextMenuLevel[]>(() => [rootLevel]);\n  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);\n  const contextMenuRootRef = useRef<HTMLDivElement | null>(null);\n  const focusRestoreRequestRef = useRef<ContextMenuFocusRestoreRequest | null>(null);\n  // Where to place focus when the NEXT level opens (forward navigation). Symmetric to\n  // `focusRestoreRequestRef`, which handles returning to the parent (backward).\n  const pendingForwardFocusRef = useRef<ContextMenuSubmenuInitialFocus | null>(null);\n  const activeMenu = menuStack[menuStack.length - 1];\n\n  const keyboardNavigationItemSelector =\n    keyboardNavigation?.itemSelector ??\n    DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;\n\n  const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;\n\n  const closeMenu = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const openSubmenu = useCallback(\n    ({\n      focusReturnTarget,\n      Header,\n      initialFocus = 'first-item',\n      ItemsWrapper: SubmenuItemsWrapper,\n      menuClassName,\n      Submenu,\n    }: ContextMenuOpenSubmenuParams) => {\n      // Record where focus should land in the opening submenu, so the level-change effect can move\n      // it there once the new level has rendered (mirrors the backward focus restore). Clear any\n      // backward request so the forward intent is what applies for this transition.\n      pendingForwardFocusRef.current = initialFocus;\n      focusRestoreRequestRef.current = null;\n      const nextLevel: ContextMenuLevel = {\n        focusRestoreRequest: createContextMenuFocusRestoreRequest({\n          contextMenuRoot: contextMenuRootRef.current,\n          focusReturnTarget,\n        }),\n        Header,\n        initialFocus,\n        ItemsWrapper: SubmenuItemsWrapper ?? ItemsWrapper,\n        menuClassName,\n        Submenu,\n      };\n      setMenuStack((current) => [...current, nextLevel]);\n    },\n    [ItemsWrapper],\n  );\n\n  const returnToParentMenu = useCallback(() => {\n    setMenuStack((current) => {\n      if (current.length <= 1) return current;\n      focusRestoreRequestRef.current =\n        current[current.length - 1]?.focusRestoreRequest ?? null;\n      // Clear any forward intent so the backward restore is what applies for this transition.\n      pendingForwardFocusRef.current = null;\n      return current.slice(0, -1);\n    });\n  }, []);\n\n  useEffect(() => {\n    setMenuStack((current) => {\n      if (current.length === 1 && current[0] === rootLevel) return current;\n      return [rootLevel];\n    });\n  }, [rootLevel]);\n\n  useEffect(() => {\n    onMenuLevelChange?.(menuStack.length);\n  }, [menuStack.length, onMenuLevelChange]);\n\n  // Move focus on menu-level changes. Runs in a LAYOUT effect (before paint) and re-runs when the\n  // body remounts (`menuBodyAnimationKey`) — the body is remounted a step after the level changes\n  // to restart the enter animation, which removes the just-focused node. Re-applying focus in the\n  // same commit that mounts the new body keeps focus in the menu with no `<body>` flicker (a naive\n  // post-paint / single-rAF focus lands one frame before that remount and gets dropped). The\n  // request refs are NOT consumed here (so this re-run can re-apply); each transition\n  // (`openSubmenu`/`returnToParentMenu`) sets one ref and clears the other.\n  useLayoutEffect(() => {\n    const focusRestoreRequest = focusRestoreRequestRef.current;\n    const pendingForwardFocus = pendingForwardFocusRef.current;\n    if (!focusRestoreRequest && !pendingForwardFocus) return;\n\n    const contextMenuRoot = contextMenuRootRef.current;\n    // Backward (return to parent) restores the remembered element; it takes precedence.\n    const target = focusRestoreRequest\n      ? resolveContextMenuFocusRestoreTarget({\n          contextMenuRoot,\n          request: focusRestoreRequest,\n        })\n      : // Forward (submenu opened): move focus INTO the new level per its `initialFocus`, so it is\n        // not lost to <body> when the parent item that had focus unmounts.\n        resolveSubmenuInitialFocusTarget({\n          contextMenuRoot,\n          initialFocus: pendingForwardFocus as ContextMenuSubmenuInitialFocus,\n          itemSelector: keyboardNavigationItemSelector,\n        });\n\n    target?.focus();\n  }, [keyboardNavigationItemSelector, menuBodyAnimationKey, menuStack.length]);\n\n  useEffect(() => {\n    if (!transitionDirection) return;\n    setMenuBodyAnimationKey((value) => value + 1);\n  }, [transitionDirection, menuStack.length]);\n\n  const dialogSubmenuOpenCountRef = useRef(0);\n\n  const registerDialogSubmenu = useCallback(() => {\n    dialogSubmenuOpenCountRef.current += 1;\n  }, []);\n\n  const unregisterDialogSubmenu = useCallback(() => {\n    dialogSubmenuOpenCountRef.current = Math.max(\n      0,\n      dialogSubmenuOpenCountRef.current - 1,\n    );\n  }, []);\n\n  const rovingFocusKeyDownHandler = useMemo(\n    () =>\n      createRovingFocusKeyDownHandler<HTMLElement>({\n        getItems: (event) =>\n          getVisibleContextMenuKeyboardNavigationItems(\n            event.currentTarget,\n            keyboardNavigationItemSelector,\n          ),\n      }),\n    [keyboardNavigationItemSelector],\n  );\n\n  const escapeConsumedRef = useRef(false);\n\n  const keyboardNavigationHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Escape') {\n        if (dialogSubmenuOpenCountRef.current > 0) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (menuStack.length > 1) {\n          escapeConsumedRef.current = true;\n          returnToParentMenu();\n        } else {\n          closeMenu();\n        }\n        return;\n      }\n\n      rovingFocusKeyDownHandler(event);\n    },\n    [closeMenu, menuStack.length, returnToParentMenu, rovingFocusKeyDownHandler],\n  );\n\n  const suppressEscapeKeyUp = useCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === 'Escape' && escapeConsumedRef.current) {\n      escapeConsumedRef.current = false;\n      event.stopPropagation();\n    }\n  }, []);\n  const isSubmenuLevel = menuStack.length > 1;\n\n  return (\n    <ContextMenuContext.Provider\n      value={{\n        anchorReferenceElement,\n        closeMenu,\n        openSubmenu,\n        registerDialogSubmenu,\n        returnToParentMenu,\n        unregisterDialogSubmenu,\n      }}\n    >\n      <ContextMenuRoot\n        aria-describedby={isSubmenuLevel ? undefined : rootAriaDescribedBy}\n        aria-label={\n          isSubmenuLevel\n            ? t('dialog.contextMenu.submenu.ariaLabel', 'Submenu')\n            : rootAriaLabel\n        }\n        aria-labelledby={isSubmenuLevel ? undefined : rootAriaLabelledBy}\n        className={clsx(className, activeMenu.menuClassName)}\n        data-str-chat-enable-animations={enableAnimations}\n        onKeyDownCapture={keyboardNavigationHandler}\n        onKeyUpCapture={suppressEscapeKeyUp}\n        ref={contextMenuRootRef}\n        {...contextMenuRootProps}\n      >\n        {activeMenu.Header ? (\n          <activeMenu.Header />\n        ) : menuStack.length > 1 ? (\n          <ContextMenuHeader>\n            <ContextMenuBackButton\n              aria-label={backButtonAriaLabel}\n              onClick={returnToParentMenu}\n            >\n              <IconChevronLeft />\n              <span>{resolvedBackLabel}</span>\n            </ContextMenuBackButton>\n          </ContextMenuHeader>\n        ) : null}\n        <ContextMenuBody\n          className={clsx({\n            'str-chat__context-menu__body--submenu-backward':\n              transitionDirection === 'backward',\n            'str-chat__context-menu__body--submenu-forward':\n              transitionDirection === 'forward',\n          })}\n          key={`context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`}\n        >\n          {activeMenu.Submenu ? (\n            <activeMenu.Submenu />\n          ) : (\n            <ActiveMenuItemsWrapper>\n              {typeof children !== 'undefined'\n                ? children\n                : activeMenu.items?.map((Item, index) => (\n                    <Item key={`context-menu-item-${index}`} />\n                  ))}\n            </ActiveMenuItemsWrapper>\n          )}\n        </ContextMenuBody>\n      </ContextMenuRoot>\n    </ContextMenuContext.Provider>\n  );\n}\n\n/**\n * Contextual actions menu that can be used in two modes:\n *\n * - Anchored dialog mode: pass `id` + `referenceElement` (submenu-aware positioning).\n * - Inline mode: omit `id` and render a plain contextual list.\n *\n * Customization via `ComponentContext`:\n *\n * - `ContextMenu`: replace the whole menu container/behavior.\n * - `ContextMenuContent`: keep default container behavior but customize menu content\n *   rendering (items, submenu transitions, back navigation UI).\n * - To customize outside-click dismissal via `ComponentContext`, provide a custom\n *   `ContextMenu` that sets `closeOnClickOutside`:\n *\n * ```tsx\n * const CustomContextMenu = (props: ContextMenuProps) => (\n *   <ContextMenu {...props} closeOnClickOutside={false} />\n * );\n *\n * <ComponentProvider value={{ ContextMenu: CustomContextMenu }}>\n *   <Chat client={client}>{children}</Chat>\n * </ComponentProvider>\n * ```\n *\n * Example:\n * ```tsx\n * <ComponentProvider\n *   value={{\n *     ContextMenu: MyContextMenu,\n *     ContextMenuContent: MyContextMenuContent,\n *   }}\n * >\n *   <Chat client={client}>{children}</Chat>\n * </ComponentProvider>\n * ```\n */\nexport const ContextMenu = (props: ContextMenuProps) => {\n  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } =\n    useComponentContext();\n  const {\n    allowFlip,\n    closeOnClickOutside,\n    closeTransitionMs = 130,\n    dialogManagerId,\n    focus,\n    id,\n    offset = 8,\n    onMenuLevelChange: onMenuLevelChangeProp,\n    placement,\n    referenceElement,\n    submenuTransitionDurationMs,\n    tabIndex,\n    trapFocus,\n    ...menuProps\n  } = props;\n  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;\n\n  const isAnchored = id != null;\n\n  const [menuLevel, setMenuLevel] = useState(1);\n  const [transitionDirection, setTransitionDirection] = useState<\n    'forward' | 'backward' | undefined\n  >(undefined);\n  const [contentResetToken, setContentResetToken] = useState(0);\n  const transitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const previousMenuLevelRef = useRef(1);\n  const open = useDialogIsOpen(id ?? '', dialogManagerId);\n  const previousOpenRef = useRef(open);\n\n  useEffect(() => {\n    if (!isAnchored) return;\n\n    if (previousOpenRef.current && !open) {\n      setMenuLevel(1);\n      setTransitionDirection(undefined);\n      setContentResetToken((value) => value + 1);\n      previousMenuLevelRef.current = 1;\n      if (transitionTimeoutRef.current) {\n        clearTimeout(transitionTimeoutRef.current);\n        transitionTimeoutRef.current = null;\n      }\n    }\n    previousOpenRef.current = open;\n  }, [isAnchored, open]);\n\n  useEffect(\n    () => () => {\n      if (transitionTimeoutRef.current) {\n        clearTimeout(transitionTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  const handleMenuLevelChange = useCallback(\n    (level: number) => {\n      if (isAnchored) {\n        const previousLevel = previousMenuLevelRef.current;\n        if (level !== previousLevel) {\n          setTransitionDirection(level > previousLevel ? 'forward' : 'backward');\n          if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);\n          transitionTimeoutRef.current = setTimeout(() => {\n            setTransitionDirection(undefined);\n            transitionTimeoutRef.current = null;\n          }, resolvedSubmenuTransitionDurationMs);\n        }\n        previousMenuLevelRef.current = level;\n        setMenuLevel(level);\n        return;\n      }\n      onMenuLevelChangeProp?.(level);\n    },\n    [isAnchored, onMenuLevelChangeProp, resolvedSubmenuTransitionDurationMs],\n  );\n\n  const content = (\n    <ContextMenuContentComponent\n      anchorReferenceElement={isAnchored ? referenceElement : undefined}\n      {...menuProps}\n      key={`context-menu-content-${contentResetToken}`}\n      onMenuLevelChange={handleMenuLevelChange}\n      transitionDirection={transitionDirection}\n    />\n  );\n\n  if (isAnchored) {\n    const {\n      ['aria-describedby']: ariaDescribedBy,\n      ['aria-label']: ariaLabel,\n      ['aria-labelledby']: ariaLabelledBy,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      backButtonAriaLabel: _bbal,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      backLabel: _b,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      enableAnimations: _ea,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      Header: _h,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      items: _i,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      ItemsWrapper: _w,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      keyboardNavigation: _kn,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      menuClassName: _m,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClose: _c,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      role: _r,\n      ...anchorDivProps\n    } = menuProps;\n    const isSubmenuLevel = menuLevel > 1;\n    return (\n      <DialogAnchor\n        allowFlip={allowFlip}\n        aria-describedby={isSubmenuLevel ? undefined : ariaDescribedBy}\n        aria-label={isSubmenuLevel ? undefined : ariaLabel}\n        aria-labelledby={isSubmenuLevel ? undefined : ariaLabelledBy}\n        closeOnClickOutside={closeOnClickOutside}\n        closeTransitionMs={closeTransitionMs}\n        dialogManagerId={dialogManagerId}\n        focus={focus}\n        id={id}\n        offset={offset}\n        placement={placement}\n        referenceElement={referenceElement}\n        tabIndex={tabIndex}\n        trapFocus={trapFocus}\n        updateKey={menuLevel}\n        {...anchorDivProps}\n      >\n        {content}\n      </DialogAnchor>\n    );\n  }\n\n  return content;\n};\n"],"mappings":"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"}