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

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

@@ -1 +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';\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  /**\n   * @deprecated Use the `icons.IconChevronRight` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconChevronRight: ... } }}>`) instead.\n   * Passing this prop still wins over the context slot for backwards compatibility.\n   */\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  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 = ariaLabel ?? t('aria/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  useContext(ContextMenuContext) as ContextMenuContextValue;\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('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={isSubmenuLevel ? t('aria/Submenu') : rootAriaLabel}\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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"}
+{"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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"}

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

@@ -1,8 +1,8 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useModalContext } from "../../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -13,9 +13,9 @@ var PromptRoot = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div
 	children
 });
 var PromptHeader = ({ className, close, description, descriptionId, goBack, LeadingContent, title, titleId, TrailingContent }) => {
+	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	const { dialogId } = useModalContext();
-	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
 	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
 	const resolvedTitleId = titleId ?? derivedTitleId;
 	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
@@ -35,7 +35,7 @@ var PromptHeader = ({ className, close, description, descriptionId, goBack, Lead
 				children: [
 					goBack && /* @__PURE__ */ jsx(Button, {
 						appearance: "ghost",
-						"aria-label": t("Go back"),
+						"aria-label": t("dialog.prompt.goBack.ariaLabel", "Go back"),
 						circular: true,
 						className: "str-chat__prompt__header__go-back-button",
 						onClick: goBack,
@@ -59,7 +59,7 @@ var PromptHeader = ({ className, close, description, descriptionId, goBack, Lead
 				className: "str-chat__prompt__header__trailing-content",
 				children: [TrailingContent && /* @__PURE__ */ jsx(TrailingContent, {}), close && /* @__PURE__ */ jsx(Button, {
 					appearance: "ghost",
-					"aria-label": t("Close"),
+					"aria-label": t("common.close.ariaLabel", "Close"),
 					circular: true,
 					className: "str-chat__prompt__header__close-button",
 					onClick: close,

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

@@ -1 +1 @@
-{"version":3,"file":"Prompt.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Prompt.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__prompt', className)}>\n    {children}\n  </div>\n);\n\nexport type PromptHeaderProps = {\n  title: React.ReactNode;\n  className?: string;\n  close?: () => void;\n  description?: string;\n  descriptionId?: string;\n  goBack?: () => void;\n  LeadingContent?: React.ComponentType;\n  titleId?: string;\n  TrailingContent?: React.ComponentType;\n};\n\nconst PromptHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  LeadingContent,\n  title,\n  titleId,\n  TrailingContent,\n}: PromptHeaderProps) => {\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n  const hasDescription = description != null && description !== '';\n\n  return (\n    <div\n      className={clsx('str-chat__prompt__header', className, {\n        'str-chat__prompt__header--withDescription': hasDescription,\n        'str-chat__prompt__header--withGoBack': goBack,\n      })}\n    >\n      {LeadingContent && (\n        <div className='str-chat__prompt__header__leading-content'>\n          <LeadingContent />\n        </div>\n      )}\n      <div className={clsx('str-chat__prompt__header__title-group')}>\n        {goBack && (\n          <Button\n            appearance='ghost'\n            aria-label={t('Go back')}\n            circular\n            className='str-chat__prompt__header__go-back-button'\n            onClick={goBack}\n            size='md'\n            variant='secondary'\n          >\n            <IconArrowLeft />\n          </Button>\n        )}\n        <h2 className='str-chat__prompt__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {hasDescription && (\n          <p className='str-chat__prompt__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {(close || TrailingContent) && (\n        <div className='str-chat__prompt__header__trailing-content'>\n          {TrailingContent && <TrailingContent />}\n          {close && (\n            <Button\n              appearance='ghost'\n              // Concise \"Close\": the dialog itself is named by its title (aria-labelledby) and\n              // described by its description (aria-describedby on the dialog surface), so the close\n              // button carries neither — repeating them here is redundant noise on focus.\n              aria-label={t('Close')}\n              circular\n              className='str-chat__prompt__header__close-button'\n              onClick={close}\n              size='md'\n              variant='secondary'\n            >\n              <IconXmark />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type PromptBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptBody = ({ children, className }: PromptBodyProps) => (\n  <div className={clsx('str-chat__prompt__body', className)}>{children}</div>\n);\n\nexport type PromptFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooter = ({ children, className }: PromptFooterProps) => (\n  <div className={clsx('str-chat__prompt__footer', className)}>{children}</div>\n);\n\ntype PromptFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooterControls = ({ children, className }: PromptFooterControlsProps) => (\n  <div className={clsx('str-chat__prompt__footer__controls', className)}>{children}</div>\n);\n\nconst PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Prompt = {\n  Body: PromptBody,\n  Footer: PromptFooter,\n  FooterControls: PromptFooterControls,\n  FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,\n  Header: PromptHeader,\n  Root: PromptRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAeP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,gBACA,OACA,SACA,sBACuB;CACvB,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAC/C,MAAM,iBAAiB,eAAe,QAAQ,gBAAgB;CAE9D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,WAAW;GACrD,6CAA6C;GAC7C,wCAAwC;EAC1C,CAAC;YAJH;GAMG,kBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,CAAiB,CAAA;GACd,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAW,KAAK,uCAAuC;cAA5D;KACG,UACC,oBAAC,QAAD;MACE,YAAW;MACX,cAAY,EAAE,SAAS;MACvB,UAAA;MACA,WAAU;MACV,SAAS;MACT,MAAK;MACL,SAAQ;gBAER,oBAAC,eAAD,CAAgB,CAAA;KACV,CAAA;KAEV,oBAAC,MAAD;MAAI,WAAU;MAAkC,IAAI;gBACjD;KACC,CAAA;KACH,kBACC,oBAAC,KAAD;MAAG,WAAU;MAAwC,IAAI;gBACtD;KACA,CAAA;IAEF;;IACH,SAAS,oBACT,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA,GACrC,SACC,oBAAC,QAAD;KACE,YAAW;KAIX,cAAY,EAAE,OAAO;KACrB,UAAA;KACA,WAAU;KACV,SAAS;KACT,MAAK;KACL,SAAQ;eAER,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,CAEP;;EAEJ;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}
+{"version":3,"file":"Prompt.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Prompt.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__prompt', className)}>\n    {children}\n  </div>\n);\n\nexport type PromptHeaderProps = {\n  title: React.ReactNode;\n  className?: string;\n  close?: () => void;\n  description?: string;\n  descriptionId?: string;\n  goBack?: () => void;\n  LeadingContent?: React.ComponentType;\n  titleId?: string;\n  TrailingContent?: React.ComponentType;\n};\n\nconst PromptHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  LeadingContent,\n  title,\n  titleId,\n  TrailingContent,\n}: PromptHeaderProps) => {\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n  const hasDescription = description != null && description !== '';\n\n  return (\n    <div\n      className={clsx('str-chat__prompt__header', className, {\n        'str-chat__prompt__header--withDescription': hasDescription,\n        'str-chat__prompt__header--withGoBack': goBack,\n      })}\n    >\n      {LeadingContent && (\n        <div className='str-chat__prompt__header__leading-content'>\n          <LeadingContent />\n        </div>\n      )}\n      <div className={clsx('str-chat__prompt__header__title-group')}>\n        {goBack && (\n          <Button\n            appearance='ghost'\n            aria-label={t('dialog.prompt.goBack.ariaLabel', 'Go back')}\n            circular\n            className='str-chat__prompt__header__go-back-button'\n            onClick={goBack}\n            size='md'\n            variant='secondary'\n          >\n            <IconArrowLeft />\n          </Button>\n        )}\n        <h2 className='str-chat__prompt__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {hasDescription && (\n          <p className='str-chat__prompt__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {(close || TrailingContent) && (\n        <div className='str-chat__prompt__header__trailing-content'>\n          {TrailingContent && <TrailingContent />}\n          {close && (\n            <Button\n              appearance='ghost'\n              // Concise \"Close\": the dialog itself is named by its title (aria-labelledby) and\n              // described by its description (aria-describedby on the dialog surface), so the close\n              // button carries neither — repeating them here is redundant noise on focus.\n              aria-label={t('common.close.ariaLabel', 'Close')}\n              circular\n              className='str-chat__prompt__header__close-button'\n              onClick={close}\n              size='md'\n              variant='secondary'\n            >\n              <IconXmark />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type PromptBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptBody = ({ children, className }: PromptBodyProps) => (\n  <div className={clsx('str-chat__prompt__body', className)}>{children}</div>\n);\n\nexport type PromptFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooter = ({ children, className }: PromptFooterProps) => (\n  <div className={clsx('str-chat__prompt__footer', className)}>{children}</div>\n);\n\ntype PromptFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooterControls = ({ children, className }: PromptFooterControlsProps) => (\n  <div className={clsx('str-chat__prompt__footer__controls', className)}>{children}</div>\n);\n\nconst PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Prompt = {\n  Body: PromptBody,\n  Footer: PromptFooter,\n  FooterControls: PromptFooterControls,\n  FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,\n  Header: PromptHeader,\n  Root: PromptRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAeP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,gBACA,OACA,SACA,sBACuB;CACvB,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAC/C,MAAM,iBAAiB,eAAe,QAAQ,gBAAgB;CAE9D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,WAAW;GACrD,6CAA6C;GAC7C,wCAAwC;EAC1C,CAAC;YAJH;GAMG,kBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,CAAiB,CAAA;GACd,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAW,KAAK,uCAAuC;cAA5D;KACG,UACC,oBAAC,QAAD;MACE,YAAW;MACX,cAAY,EAAE,kCAAkC,SAAS;MACzD,UAAA;MACA,WAAU;MACV,SAAS;MACT,MAAK;MACL,SAAQ;gBAER,oBAAC,eAAD,CAAgB,CAAA;KACV,CAAA;KAEV,oBAAC,MAAD;MAAI,WAAU;MAAkC,IAAI;gBACjD;KACC,CAAA;KACH,kBACC,oBAAC,KAAD;MAAG,WAAU;MAAwC,IAAI;gBACtD;KACA,CAAA;IAEF;;IACH,SAAS,oBACT,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA,GACrC,SACC,oBAAC,QAAD;KACE,YAAW;KAIX,cAAY,EAAE,0BAA0B,OAAO;KAC/C,UAAA;KACA,WAAU;KACV,SAAS;KACT,MAAK;KACL,SAAQ;eAER,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,CAEP;;EAEJ;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}

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

@@ -1,8 +1,8 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useModalContext } from "../../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -13,9 +13,9 @@ var ViewerRoot = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div
 	children
 });
 var ViewerHeader = ({ className, close, description, descriptionId, goBack, title, titleId }) => {
+	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	const { dialogId } = useModalContext();
-	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
 	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
 	const resolvedTitleId = titleId ?? derivedTitleId;
 	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
@@ -25,7 +25,7 @@ var ViewerHeader = ({ className, close, description, descriptionId, goBack, titl
 			goBack && /* @__PURE__ */ jsx(Button, {
 				appearance: "ghost",
 				"aria-describedby": description != null && description !== "" ? resolvedDescriptionId : void 0,
-				"aria-label": t("Back"),
+				"aria-label": t("common.back.label", "Back"),
 				circular: true,
 				className: "str-chat__viewer__header__go-back-button",
 				onClick: goBack,
@@ -48,7 +48,7 @@ var ViewerHeader = ({ className, close, description, descriptionId, goBack, titl
 			close && /* @__PURE__ */ jsx(Button, {
 				appearance: "ghost",
 				"aria-describedby": description != null && description !== "" ? resolvedDescriptionId : void 0,
-				"aria-label": t("Close dialog"),
+				"aria-label": t("dialog.viewer.closeDialog.ariaLabel", "Close dialog"),
 				circular: true,
 				className: "str-chat__viewer__header__close-button",
 				onClick: close,

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

@@ -1 +1 @@
-{"version":3,"file":"Viewer.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Viewer.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__viewer', className)}>\n    {children}\n  </div>\n);\n\nexport type ViewerHeaderProps = {\n  title: string;\n  description?: string;\n  className?: string;\n  close?: () => void;\n  goBack?: () => void;\n  descriptionId?: string;\n  titleId?: string;\n};\n\nconst ViewerHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  title,\n  titleId,\n}: ViewerHeaderProps) => {\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n  return (\n    <div className={clsx('str-chat__viewer__header', className)}>\n      {goBack && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('Back')}\n          circular\n          className='str-chat__viewer__header__go-back-button'\n          onClick={goBack}\n          size='sm'\n          variant='secondary'\n        >\n          <IconArrowLeft />\n        </Button>\n      )}\n      <div className='str-chat__viewer__header__title-group'>\n        <h2 className='str-chat__viewer__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {description != null && description !== '' && (\n          <p className='str-chat__viewer__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {close && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('Close dialog')}\n          circular\n          className='str-chat__viewer__header__close-button'\n          onClick={close}\n          size='sm'\n          variant='secondary'\n        >\n          <IconXmark />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type ViewerBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerBody = ({ children, className }: ViewerBodyProps) => (\n  <div className={clsx('str-chat__viewer__body', className)}>{children}</div>\n);\n\nexport type ViewerFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooter = ({ children, className }: ViewerFooterProps) => (\n  <div className={clsx('str-chat__viewer__footer', className)}>{children}</div>\n);\n\ntype ViewerFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooterControls = ({ children, className }: ViewerFooterControlsProps) => (\n  <div className={clsx('str-chat__viewer__footer__controls', className)}>{children}</div>\n);\n\nconst ViewerFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst ViewerFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Viewer = {\n  Body: ViewerBody,\n  Footer: ViewerFooter,\n  FooterControls: ViewerFooterControls,\n  FooterControlsButtonPrimary: ViewerFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: ViewerFooterControlsButtonSecondary,\n  Header: ViewerHeader,\n  Root: ViewerRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAaP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,OACA,cACuB;CACvB,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAE/C,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,4BAA4B,SAAS;YAA1D;GACG,UACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,MAAM;IACpB,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,eAAD,CAAgB,CAAA;GACV,CAAA;GAEV,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;KAAkC,IAAI;eACjD;IACC,CAAA,GACH,eAAe,QAAQ,gBAAgB,MACtC,oBAAC,KAAD;KAAG,WAAU;KAAwC,IAAI;eACtD;IACA,CAAA,CAEF;;GACJ,SACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,cAAc;IAC5B,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}
+{"version":3,"file":"Viewer.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Viewer.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__viewer', className)}>\n    {children}\n  </div>\n);\n\nexport type ViewerHeaderProps = {\n  title: string;\n  description?: string;\n  className?: string;\n  close?: () => void;\n  goBack?: () => void;\n  descriptionId?: string;\n  titleId?: string;\n};\n\nconst ViewerHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  title,\n  titleId,\n}: ViewerHeaderProps) => {\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n  return (\n    <div className={clsx('str-chat__viewer__header', className)}>\n      {goBack && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('common.back.label', 'Back')}\n          circular\n          className='str-chat__viewer__header__go-back-button'\n          onClick={goBack}\n          size='sm'\n          variant='secondary'\n        >\n          <IconArrowLeft />\n        </Button>\n      )}\n      <div className='str-chat__viewer__header__title-group'>\n        <h2 className='str-chat__viewer__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {description != null && description !== '' && (\n          <p className='str-chat__viewer__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {close && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('dialog.viewer.closeDialog.ariaLabel', 'Close dialog')}\n          circular\n          className='str-chat__viewer__header__close-button'\n          onClick={close}\n          size='sm'\n          variant='secondary'\n        >\n          <IconXmark />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type ViewerBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerBody = ({ children, className }: ViewerBodyProps) => (\n  <div className={clsx('str-chat__viewer__body', className)}>{children}</div>\n);\n\nexport type ViewerFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooter = ({ children, className }: ViewerFooterProps) => (\n  <div className={clsx('str-chat__viewer__footer', className)}>{children}</div>\n);\n\ntype ViewerFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooterControls = ({ children, className }: ViewerFooterControlsProps) => (\n  <div className={clsx('str-chat__viewer__footer__controls', className)}>{children}</div>\n);\n\nconst ViewerFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst ViewerFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Viewer = {\n  Body: ViewerBody,\n  Footer: ViewerFooter,\n  FooterControls: ViewerFooterControls,\n  FooterControlsButtonPrimary: ViewerFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: ViewerFooterControlsButtonSecondary,\n  Header: ViewerHeader,\n  Root: ViewerRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAaP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,OACA,cACuB;CACvB,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAE/C,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,4BAA4B,SAAS;YAA1D;GACG,UACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,qBAAqB,MAAM;IACzC,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,eAAD,CAAgB,CAAA;GACV,CAAA;GAEV,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;KAAkC,IAAI;eACjD;IACC,CAAA,GACH,eAAe,QAAQ,gBAAgB,MACtC,oBAAC,KAAD;KAAG,WAAU;KAAwC,IAAI;eACtD;IACA,CAAA,CAEF;;GACJ,SACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,uCAAuC,cAAc;IACnE,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}

package/dist/es/components/Dialog/hooks/usePopoverPosition.mjs

@@ -30,7 +30,15 @@ function usePopoverPosition({ allowFlip = true, allowShift = true, autoUpdateOpt
 			...offsetMiddleware ? [offsetMiddleware] : [],
 			...autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flip()] : [],
 			...allowShift ? [shift(mergedShiftOptions)] : [],
-			...fitAvailableSpace ? [size({ apply: () => {} })] : []
+			...fitAvailableSpace ? [size({
+				apply({ availableHeight, availableWidth, elements }) {
+					Object.assign(elements.floating.style, {
+						maxHeight: `${Math.max(0, availableHeight)}px`,
+						maxWidth: `${Math.max(0, availableWidth)}px`
+					});
+				},
+				padding: 8
+			})] : []
 		],
 		placement: String(placement).startsWith("auto") ? "bottom" : placement,
 		strategy: "fixed",

package/dist/es/components/Dialog/hooks/usePopoverPosition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../../src/components/Dialog/hooks/usePopoverPosition.ts"],"sourcesContent":["import {\n  autoPlacement,\n  type AutoPlacementOptions,\n  autoUpdate,\n  flip as flipMw,\n  offset as offsetMw,\n  type Placement,\n  shift as shiftMw,\n  size as sizeMw,\n  useFloating,\n} from '@floating-ui/react';\n\nconst hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;\n\nexport type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';\n\nfunction autoMiddlewareFor(p: PopperLikePlacement) {\n  if (!String(p).startsWith('auto')) return null;\n  const alignment: AutoPlacementOptions['alignment'] =\n    p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;\n  return autoPlacement({ alignment });\n}\n\nexport type OffsetOpt =\n  | number\n  | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }\n  | [crossAxis: number, mainAxis: number]; // keep your tuple compat\n\nfunction toOffsetMw(opt?: OffsetOpt) {\n  if (opt == null) return null;\n  if (Array.isArray(opt)) {\n    const [crossAxis, mainAxis] = opt;\n    return offsetMw({ crossAxis, mainAxis });\n  }\n  if (typeof opt === 'number') return offsetMw(opt);\n  return offsetMw(opt);\n}\n\nexport type UsePopoverParams = {\n  placement?: PopperLikePlacement;\n  /** Add flip() when placement is not 'auto*' */\n  allowFlip?: boolean;\n  /** Keep in viewport; default true to match common popper setups */\n  allowShift?: boolean;\n  /** Extra options for Floating UI shift() middleware (merged with default padding: 8) */\n  shiftOptions?: Parameters<typeof shiftMw>[0];\n  /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */\n  fitAvailableSpace?: boolean;\n  /** Offset (number, object, or [crossAxis, mainAxis] tuple) */\n  offset?: OffsetOpt;\n  /**\n   * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.\n   * If true → no autoUpdate (you can call `update()` manually).\n   */\n  freeze?: boolean;\n  /**\n   * Fine-grained control of autoUpdate triggers (only if freeze=false).\n   * Defaults match Popper's \"disabled\" example when all set to false.\n   */\n  autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;\n};\n\nexport function usePopoverPosition({\n  allowFlip = true,\n  allowShift = true,\n  autoUpdateOptions,\n  fitAvailableSpace = false,\n  freeze = false,\n  offset,\n  placement = 'bottom-start',\n  shiftOptions,\n}: UsePopoverParams) {\n  const autoMw = autoMiddlewareFor(placement);\n  const offsetMiddleware = toOffsetMw(offset);\n  const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');\n  const mergedShiftOptions = shiftOptions\n    ? { padding: 8, ...shiftOptions }\n    : { padding: 8 };\n\n  const middleware = [\n    // offset first (mirrors common Popper setups)\n    ...(offsetMiddleware ? [offsetMiddleware] : []),\n\n    // choose between autoPlacement (Popper's \"auto*\") OR flip()\n    // only allow flip when not explicitly 'left*' or 'right*'\n    ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),\n\n    // viewport collision adjustments\n    ...(allowShift ? [shiftMw(mergedShiftOptions)] : []),\n\n    // optional size constraining\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    ...(fitAvailableSpace ? [sizeMw({ apply: () => {} })] : []),\n  ];\n\n  // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one\n  const seedPlacement: Placement = String(placement).startsWith('auto')\n    ? 'bottom'\n    : (placement as Placement);\n\n  return useFloating({\n    middleware,\n    placement: seedPlacement,\n    strategy: 'fixed',\n    whileElementsMounted: freeze\n      ? undefined\n      : (reference, floating, update) =>\n          autoUpdate(reference, floating, update, {\n            ancestorResize: true,\n            ancestorScroll: true,\n            animationFrame: false,\n            elementResize: hasResizeObserver,\n            ...autoUpdateOptions,\n          }),\n  });\n}\n"],"mappings":";;AAYA,IAAM,oBAAoB,OAAO,WAAW,eAAe,oBAAoB;AAI/E,SAAS,kBAAkB,GAAwB;CACjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CAG1C,OAAO,cAAc,EAAE,WADrB,MAAM,eAAe,UAAU,MAAM,aAAa,QAAQ,KAAA,EAC3B,CAAC;AACpC;AAOA,SAAS,WAAW,KAAiB;CACnC,IAAI,OAAO,MAAM,OAAO;CACxB,IAAI,MAAM,QAAQ,GAAG,GAAG;EACtB,MAAM,CAAC,WAAW,YAAY;EAC9B,OAAO,OAAS;GAAE;GAAW;EAAS,CAAC;CACzC;CACA,IAAI,OAAO,QAAQ,UAAU,OAAO,OAAS,GAAG;CAChD,OAAO,OAAS,GAAG;AACrB;AA0BA,SAAgB,mBAAmB,EACjC,YAAY,MACZ,aAAa,MACb,mBACA,oBAAoB,OACpB,SAAS,OACT,QACA,YAAY,gBACZ,gBACmB;CACnB,MAAM,SAAS,kBAAkB,SAAS;CAC1C,MAAM,mBAAmB,WAAW,MAAM;CAC1C,MAAM,kBAAkB,UAAU,WAAW,MAAM,KAAK,UAAU,WAAW,OAAO;CACpF,MAAM,qBAAqB,eACvB;EAAE,SAAS;EAAG,GAAG;CAAa,IAC9B,EAAE,SAAS,EAAE;CAuBjB,OAAO,YAAY;EACjB,YAAA;GApBA,GAAI,mBAAmB,CAAC,gBAAgB,IAAI,CAAC;GAI7C,GAAI,SAAS,CAAC,MAAM,IAAI,aAAa,CAAC,kBAAkB,CAAC,KAAO,CAAC,IAAI,CAAC;GAGtE,GAAI,aAAa,CAAC,MAAQ,kBAAkB,CAAC,IAAI,CAAC;GAIlD,GAAI,oBAAoB,CAAC,KAAO,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;EASzD;EACA,WAN+B,OAAO,SAAS,CAAC,CAAC,WAAW,MAAM,IAChE,WACC;EAKH,UAAU;EACV,sBAAsB,SAClB,KAAA,KACC,WAAW,UAAU,WACpB,WAAW,WAAW,UAAU,QAAQ;GACtC,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,eAAe;GACf,GAAG;EACL,CAAC;CACT,CAAC;AACH"}
+{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../../src/components/Dialog/hooks/usePopoverPosition.ts"],"sourcesContent":["import {\n  autoPlacement,\n  type AutoPlacementOptions,\n  autoUpdate,\n  flip as flipMw,\n  offset as offsetMw,\n  type Placement,\n  shift as shiftMw,\n  size as sizeMw,\n  useFloating,\n} from '@floating-ui/react';\n\nconst hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;\n\nexport type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';\n\nfunction autoMiddlewareFor(p: PopperLikePlacement) {\n  if (!String(p).startsWith('auto')) return null;\n  const alignment: AutoPlacementOptions['alignment'] =\n    p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;\n  return autoPlacement({ alignment });\n}\n\nexport type OffsetOpt =\n  | number\n  | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }\n  | [crossAxis: number, mainAxis: number]; // keep your tuple compat\n\nfunction toOffsetMw(opt?: OffsetOpt) {\n  if (opt == null) return null;\n  if (Array.isArray(opt)) {\n    const [crossAxis, mainAxis] = opt;\n    return offsetMw({ crossAxis, mainAxis });\n  }\n  if (typeof opt === 'number') return offsetMw(opt);\n  return offsetMw(opt);\n}\n\nexport type UsePopoverParams = {\n  placement?: PopperLikePlacement;\n  /** Add flip() when placement is not 'auto*' */\n  allowFlip?: boolean;\n  /** Keep in viewport; default true to match common popper setups */\n  allowShift?: boolean;\n  /** Extra options for Floating UI shift() middleware (merged with default padding: 8) */\n  shiftOptions?: Parameters<typeof shiftMw>[0];\n  /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */\n  fitAvailableSpace?: boolean;\n  /** Offset (number, object, or [crossAxis, mainAxis] tuple) */\n  offset?: OffsetOpt;\n  /**\n   * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.\n   * If true → no autoUpdate (you can call `update()` manually).\n   */\n  freeze?: boolean;\n  /**\n   * Fine-grained control of autoUpdate triggers (only if freeze=false).\n   * Defaults match Popper's \"disabled\" example when all set to false.\n   */\n  autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;\n};\n\nexport function usePopoverPosition({\n  allowFlip = true,\n  allowShift = true,\n  autoUpdateOptions,\n  fitAvailableSpace = false,\n  freeze = false,\n  offset,\n  placement = 'bottom-start',\n  shiftOptions,\n}: UsePopoverParams) {\n  const autoMw = autoMiddlewareFor(placement);\n  const offsetMiddleware = toOffsetMw(offset);\n  const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');\n  const mergedShiftOptions = shiftOptions\n    ? { padding: 8, ...shiftOptions }\n    : { padding: 8 };\n\n  const middleware = [\n    // offset first (mirrors common Popper setups)\n    ...(offsetMiddleware ? [offsetMiddleware] : []),\n\n    // choose between autoPlacement (Popper's \"auto*\") OR flip()\n    // only allow flip when not explicitly 'left*' or 'right*'\n    ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),\n\n    // viewport collision adjustments\n    ...(allowShift ? [shiftMw(mergedShiftOptions)] : []),\n\n    // optional size constraining: cap the floating element to the space left in the viewport\n    // (after flip/shift) so a tall popover scrolls inside the viewport instead of overflowing it.\n    ...(fitAvailableSpace\n      ? [\n          sizeMw({\n            apply({ availableHeight, availableWidth, elements }) {\n              Object.assign(elements.floating.style, {\n                maxHeight: `${Math.max(0, availableHeight)}px`,\n                maxWidth: `${Math.max(0, availableWidth)}px`,\n              });\n            },\n            padding: 8,\n          }),\n        ]\n      : []),\n  ];\n\n  // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one\n  const seedPlacement: Placement = String(placement).startsWith('auto')\n    ? 'bottom'\n    : (placement as Placement);\n\n  return useFloating({\n    middleware,\n    placement: seedPlacement,\n    strategy: 'fixed',\n    whileElementsMounted: freeze\n      ? undefined\n      : (reference, floating, update) =>\n          autoUpdate(reference, floating, update, {\n            ancestorResize: true,\n            ancestorScroll: true,\n            animationFrame: false,\n            elementResize: hasResizeObserver,\n            ...autoUpdateOptions,\n          }),\n  });\n}\n"],"mappings":";;AAYA,IAAM,oBAAoB,OAAO,WAAW,eAAe,oBAAoB;AAI/E,SAAS,kBAAkB,GAAwB;CACjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CAG1C,OAAO,cAAc,EAAE,WADrB,MAAM,eAAe,UAAU,MAAM,aAAa,QAAQ,KAAA,EAC3B,CAAC;AACpC;AAOA,SAAS,WAAW,KAAiB;CACnC,IAAI,OAAO,MAAM,OAAO;CACxB,IAAI,MAAM,QAAQ,GAAG,GAAG;EACtB,MAAM,CAAC,WAAW,YAAY;EAC9B,OAAO,OAAS;GAAE;GAAW;EAAS,CAAC;CACzC;CACA,IAAI,OAAO,QAAQ,UAAU,OAAO,OAAS,GAAG;CAChD,OAAO,OAAS,GAAG;AACrB;AA0BA,SAAgB,mBAAmB,EACjC,YAAY,MACZ,aAAa,MACb,mBACA,oBAAoB,OACpB,SAAS,OACT,QACA,YAAY,gBACZ,gBACmB;CACnB,MAAM,SAAS,kBAAkB,SAAS;CAC1C,MAAM,mBAAmB,WAAW,MAAM;CAC1C,MAAM,kBAAkB,UAAU,WAAW,MAAM,KAAK,UAAU,WAAW,OAAO;CACpF,MAAM,qBAAqB,eACvB;EAAE,SAAS;EAAG,GAAG;CAAa,IAC9B,EAAE,SAAS,EAAE;CAmCjB,OAAO,YAAY;EACjB,YAAA;GAhCA,GAAI,mBAAmB,CAAC,gBAAgB,IAAI,CAAC;GAI7C,GAAI,SAAS,CAAC,MAAM,IAAI,aAAa,CAAC,kBAAkB,CAAC,KAAO,CAAC,IAAI,CAAC;GAGtE,GAAI,aAAa,CAAC,MAAQ,kBAAkB,CAAC,IAAI,CAAC;GAIlD,GAAI,oBACA,CACE,KAAO;IACL,MAAM,EAAE,iBAAiB,gBAAgB,YAAY;KACnD,OAAO,OAAO,SAAS,SAAS,OAAO;MACrC,WAAW,GAAG,KAAK,IAAI,GAAG,eAAe,EAAE;MAC3C,UAAU,GAAG,KAAK,IAAI,GAAG,cAAc,EAAE;KAC3C,CAAC;IACH;IACA,SAAS;GACX,CAAC,CACH,IACA,CAAC;EASL;EACA,WAN+B,OAAO,SAAS,CAAC,CAAC,WAAW,MAAM,IAChE,WACC;EAKH,UAAU;EACV,sBAAsB,SAClB,KAAA,KACC,WAAW,UAAU,WACpB,WAAW,WAAW,UAAU,QAAQ;GACtC,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,eAAe;GACf,GAAG;EACL,CAAC;CACT,CAAC;AACH"}

package/dist/es/components/Dialog/service/DialogManager.mjs

@@ -1,4 +1,4 @@
-import { StateStore } from "stream-chat";
+import { StateStore } from "@stream-io/state-store";
 import { nanoid } from "nanoid";
 //#region src/components/Dialog/service/DialogManager.ts
 /**
@@ -12,25 +12,14 @@ import { nanoid } from "nanoid";
 * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
 */
 var DialogManager = class {
+	/** Manager-level outside click policy used by DialogPortal dismiss handlers. */
+	closeOnClickOutside;
+	id;
+	state = new StateStore({
+		dialogsById: {},
+		openedDialogIds: []
+	});
 	constructor({ closeOnClickOutside = true, id } = {}) {
-		this.state = new StateStore({
-			dialogsById: {},
-			openedDialogIds: []
-		});
-		this.remove = (id) => {
-			const dialog = this.get(id);
-			if (!dialog) return;
-			if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
-			this.state.next((current) => {
-				const newDialogs = { ...current.dialogsById };
-				delete newDialogs[id];
-				return {
-					...current,
-					dialogsById: newDialogs,
-					openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
-				};
-			});
-		};
 		this.closeOnClickOutside = closeOnClickOutside;
 		this.id = id ?? nanoid();
 	}
@@ -124,6 +113,20 @@ var DialogManager = class {
 		if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) this.close(params.id);
 		else this.open(params, closeAll);
 	}
+	remove = (id) => {
+		const dialog = this.get(id);
+		if (!dialog) return;
+		if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+		this.state.next((current) => {
+			const newDialogs = { ...current.dialogsById };
+			delete newDialogs[id];
+			return {
+				...current,
+				dialogsById: newDialogs,
+				openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
+			};
+		});
+	};
 	/**
 	* Marks the dialog state as unused. If the dialog id is referenced again quickly,
 	* the state will not be removed. Otherwise, the state will be removed after

package/dist/es/components/Dialog/service/DialogManager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogManager.mjs","names":[],"sources":["../../../../../src/components/Dialog/service/DialogManager.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport { StateStore } from 'stream-chat';\n\nexport type GetDialogParams = {\n  id: DialogId;\n};\nexport type GetOrCreateDialogParams = GetDialogParams & {\n  /**\n   * Optional per-dialog override.\n   * If undefined, manager-level `closeOnClickOutside` is used.\n   */\n  closeOnClickOutside?: boolean;\n};\n\ntype DialogId = string;\n\nexport type Dialog = {\n  close: () => void;\n  closeOnClickOutside?: boolean;\n  id: DialogId;\n  isOpen: boolean | undefined;\n  open: (zIndex?: number) => void;\n  removalTimeout: NodeJS.Timeout | undefined;\n  remove: () => void;\n  toggle: (closeAll?: boolean) => void;\n};\n\nexport type DialogManagerOptions = {\n  /** Enables closing all dialogs in this manager when clicking overlay/outside area. */\n  closeOnClickOutside?: boolean;\n  id?: string;\n};\n\ntype Dialogs = Record<DialogId, Dialog>;\n\nexport type DialogManagerState = {\n  dialogsById: Dialogs;\n  openedDialogIds: DialogId[];\n};\n\n/**\n * Keeps a map of Dialog objects.\n * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.\n * The hook returns an object with the following API:\n *\n * - `dialog.open()` - opens the dialog\n * - `dialog.close()` - closes the dialog\n * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.\n * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)\n */\nexport class DialogManager {\n  /** Manager-level outside click policy used by DialogPortal dismiss handlers. */\n  closeOnClickOutside: boolean;\n  id: string;\n  state = new StateStore<DialogManagerState>({\n    dialogsById: {},\n    openedDialogIds: [],\n  });\n\n  constructor({ closeOnClickOutside = true, id }: DialogManagerOptions = {}) {\n    this.closeOnClickOutside = closeOnClickOutside;\n    this.id = id ?? nanoid();\n  }\n\n  get openDialogCount() {\n    return this.state.getLatestValue().openedDialogIds.length;\n  }\n\n  get(id: DialogId): Dialog | undefined {\n    return this.state.getLatestValue().dialogsById[id];\n  }\n\n  getOrCreate({ closeOnClickOutside, id }: GetOrCreateDialogParams) {\n    let dialog = this.get(id);\n    if (!dialog) {\n      dialog = {\n        close: () => {\n          this.close(id);\n        },\n        closeOnClickOutside,\n        id,\n        isOpen: false,\n        open: () => {\n          this.open({ id });\n        },\n        removalTimeout: undefined,\n        remove: () => {\n          this.remove(id);\n        },\n        toggle: (closeAll = false) => {\n          this.toggle({ id }, closeAll);\n        },\n      };\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: { ...current.dialogsById, [id]: dialog as Dialog },\n      }));\n    }\n\n    const shouldUpdateDialogSettings =\n      dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;\n\n    if (shouldUpdateDialogSettings) {\n      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: {\n          ...current.dialogsById,\n          [id]: {\n            ...current.dialogsById[id],\n            closeOnClickOutside,\n            removalTimeout: undefined,\n          },\n        },\n        openedDialogIds: current.dialogsById[id]?.isOpen\n          ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n          : current.openedDialogIds,\n      }));\n    }\n\n    return dialog;\n  }\n\n  open(params: GetOrCreateDialogParams, closeRest?: boolean) {\n    const dialog = this.getOrCreate(params);\n    if (dialog.isOpen) return;\n    if (closeRest) {\n      this.closeAll();\n    }\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: true } },\n      openedDialogIds: [\n        ...current.openedDialogIds.filter((dialogId) => dialogId !== dialog.id),\n        dialog.id,\n      ],\n    }));\n  }\n\n  close(id: DialogId) {\n    const dialog = this.state.getLatestValue().dialogsById[id];\n    if (!dialog?.isOpen) return;\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: false } },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  closeAll() {\n    Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) =>\n      dialog.close(),\n    );\n  }\n\n  toggle(params: GetOrCreateDialogParams, closeAll = false) {\n    if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {\n      this.close(params.id);\n    } else {\n      this.open(params, closeAll);\n    }\n  }\n\n  remove = (id: DialogId) => {\n    const dialog = this.get(id);\n    if (!dialog) return;\n\n    if (dialog.removalTimeout) {\n      clearTimeout(dialog.removalTimeout);\n    }\n\n    this.state.next((current) => {\n      const newDialogs = { ...current.dialogsById };\n      delete newDialogs[id];\n      return {\n        ...current,\n        dialogsById: newDialogs,\n        openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n      };\n    });\n  };\n\n  /**\n   * Marks the dialog state as unused. If the dialog id is referenced again quickly,\n   * the state will not be removed. Otherwise, the state will be removed after\n   * a short timeout.\n   */\n  markForRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog) {\n      return;\n    }\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...dialog,\n          removalTimeout: setTimeout(() => {\n            this.remove(id);\n          }, 16),\n        },\n      },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  cancelPendingRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog?.removalTimeout) {\n      return;\n    }\n\n    clearTimeout(dialog.removalTimeout);\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...current.dialogsById[id],\n          removalTimeout: undefined,\n        },\n      },\n      openedDialogIds: current.dialogsById[id]?.isOpen\n        ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n        : current.openedDialogIds,\n    }));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"DialogManager.mjs","names":[],"sources":["../../../../../src/components/Dialog/service/DialogManager.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport { StateStore } from '@stream-io/state-store';\n\nexport type GetDialogParams = {\n  id: DialogId;\n};\nexport type GetOrCreateDialogParams = GetDialogParams & {\n  /**\n   * Optional per-dialog override.\n   * If undefined, manager-level `closeOnClickOutside` is used.\n   */\n  closeOnClickOutside?: boolean;\n};\n\ntype DialogId = string;\n\nexport type Dialog = {\n  close: () => void;\n  closeOnClickOutside?: boolean;\n  id: DialogId;\n  isOpen: boolean | undefined;\n  open: (zIndex?: number) => void;\n  removalTimeout: NodeJS.Timeout | undefined;\n  remove: () => void;\n  toggle: (closeAll?: boolean) => void;\n};\n\nexport type DialogManagerOptions = {\n  /** Enables closing all dialogs in this manager when clicking overlay/outside area. */\n  closeOnClickOutside?: boolean;\n  id?: string;\n};\n\ntype Dialogs = Record<DialogId, Dialog>;\n\nexport type DialogManagerState = {\n  dialogsById: Dialogs;\n  openedDialogIds: DialogId[];\n};\n\n/**\n * Keeps a map of Dialog objects.\n * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.\n * The hook returns an object with the following API:\n *\n * - `dialog.open()` - opens the dialog\n * - `dialog.close()` - closes the dialog\n * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.\n * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)\n */\nexport class DialogManager {\n  /** Manager-level outside click policy used by DialogPortal dismiss handlers. */\n  closeOnClickOutside: boolean;\n  id: string;\n  state = new StateStore<DialogManagerState>({\n    dialogsById: {},\n    openedDialogIds: [],\n  });\n\n  constructor({ closeOnClickOutside = true, id }: DialogManagerOptions = {}) {\n    this.closeOnClickOutside = closeOnClickOutside;\n    this.id = id ?? nanoid();\n  }\n\n  get openDialogCount() {\n    return this.state.getLatestValue().openedDialogIds.length;\n  }\n\n  get(id: DialogId): Dialog | undefined {\n    return this.state.getLatestValue().dialogsById[id];\n  }\n\n  getOrCreate({ closeOnClickOutside, id }: GetOrCreateDialogParams) {\n    let dialog = this.get(id);\n    if (!dialog) {\n      dialog = {\n        close: () => {\n          this.close(id);\n        },\n        closeOnClickOutside,\n        id,\n        isOpen: false,\n        open: () => {\n          this.open({ id });\n        },\n        removalTimeout: undefined,\n        remove: () => {\n          this.remove(id);\n        },\n        toggle: (closeAll = false) => {\n          this.toggle({ id }, closeAll);\n        },\n      };\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: { ...current.dialogsById, [id]: dialog as Dialog },\n      }));\n    }\n\n    const shouldUpdateDialogSettings =\n      dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;\n\n    if (shouldUpdateDialogSettings) {\n      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);\n      this.state.next((current) => ({\n        ...current,\n        dialogsById: {\n          ...current.dialogsById,\n          [id]: {\n            ...current.dialogsById[id],\n            closeOnClickOutside,\n            removalTimeout: undefined,\n          },\n        },\n        openedDialogIds: current.dialogsById[id]?.isOpen\n          ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n          : current.openedDialogIds,\n      }));\n    }\n\n    return dialog;\n  }\n\n  open(params: GetOrCreateDialogParams, closeRest?: boolean) {\n    const dialog = this.getOrCreate(params);\n    if (dialog.isOpen) return;\n    if (closeRest) {\n      this.closeAll();\n    }\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: true } },\n      openedDialogIds: [\n        ...current.openedDialogIds.filter((dialogId) => dialogId !== dialog.id),\n        dialog.id,\n      ],\n    }));\n  }\n\n  close(id: DialogId) {\n    const dialog = this.state.getLatestValue().dialogsById[id];\n    if (!dialog?.isOpen) return;\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: false } },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  closeAll() {\n    Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) =>\n      dialog.close(),\n    );\n  }\n\n  toggle(params: GetOrCreateDialogParams, closeAll = false) {\n    if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {\n      this.close(params.id);\n    } else {\n      this.open(params, closeAll);\n    }\n  }\n\n  remove = (id: DialogId) => {\n    const dialog = this.get(id);\n    if (!dialog) return;\n\n    if (dialog.removalTimeout) {\n      clearTimeout(dialog.removalTimeout);\n    }\n\n    this.state.next((current) => {\n      const newDialogs = { ...current.dialogsById };\n      delete newDialogs[id];\n      return {\n        ...current,\n        dialogsById: newDialogs,\n        openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n      };\n    });\n  };\n\n  /**\n   * Marks the dialog state as unused. If the dialog id is referenced again quickly,\n   * the state will not be removed. Otherwise, the state will be removed after\n   * a short timeout.\n   */\n  markForRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog) {\n      return;\n    }\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...dialog,\n          removalTimeout: setTimeout(() => {\n            this.remove(id);\n          }, 16),\n        },\n      },\n      openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id),\n    }));\n  }\n\n  cancelPendingRemoval(id: DialogId) {\n    const dialog = this.get(id);\n\n    if (!dialog?.removalTimeout) {\n      return;\n    }\n\n    clearTimeout(dialog.removalTimeout);\n\n    this.state.next((current) => ({\n      ...current,\n      dialogsById: {\n        ...current.dialogsById,\n        [id]: {\n          ...current.dialogsById[id],\n          removalTimeout: undefined,\n        },\n      },\n      openedDialogIds: current.dialogsById[id]?.isOpen\n        ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id]\n        : current.openedDialogIds,\n    }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAkDA,IAAa,gBAAb,MAA2B;;CAEzB;CACA;CACA,QAAQ,IAAI,WAA+B;EACzC,aAAa,CAAC;EACd,iBAAiB,CAAC;CACpB,CAAC;CAED,YAAY,EAAE,sBAAsB,MAAM,OAA6B,CAAC,GAAG;EACzE,KAAK,sBAAsB;EAC3B,KAAK,KAAK,MAAM,OAAO;CACzB;CAEA,IAAI,kBAAkB;EACpB,OAAO,KAAK,MAAM,eAAe,CAAC,CAAC,gBAAgB;CACrD;CAEA,IAAI,IAAkC;EACpC,OAAO,KAAK,MAAM,eAAe,CAAC,CAAC,YAAY;CACjD;CAEA,YAAY,EAAE,qBAAqB,MAA+B;EAChE,IAAI,SAAS,KAAK,IAAI,EAAE;EACxB,IAAI,CAAC,QAAQ;GACX,SAAS;IACP,aAAa;KACX,KAAK,MAAM,EAAE;IACf;IACA;IACA;IACA,QAAQ;IACR,YAAY;KACV,KAAK,KAAK,EAAE,GAAG,CAAC;IAClB;IACA,gBAAgB,KAAA;IAChB,cAAc;KACZ,KAAK,OAAO,EAAE;IAChB;IACA,SAAS,WAAW,UAAU;KAC5B,KAAK,OAAO,EAAE,GAAG,GAAG,QAAQ;IAC9B;GACF;GACA,KAAK,MAAM,MAAM,aAAa;IAC5B,GAAG;IACH,aAAa;KAAE,GAAG,QAAQ;MAAc,KAAK;IAAiB;GAChE,EAAE;EACJ;EAKA,IAFE,OAAO,wBAAwB,uBAAuB,CAAC,CAAC,OAAO,gBAEjC;GAC9B,IAAI,OAAO,gBAAgB,aAAa,OAAO,cAAc;GAC7D,KAAK,MAAM,MAAM,aAAa;IAC5B,GAAG;IACH,aAAa;KACX,GAAG,QAAQ;MACV,KAAK;MACJ,GAAG,QAAQ,YAAY;MACvB;MACA,gBAAgB,KAAA;KAClB;IACF;IACA,iBAAiB,QAAQ,YAAY,GAAG,EAAE,SACtC,CAAC,GAAG,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,EAAE,GAAG,EAAE,IACrE,QAAQ;GACd,EAAE;EACJ;EAEA,OAAO;CACT;CAEA,KAAK,QAAiC,WAAqB;EACzD,MAAM,SAAS,KAAK,YAAY,MAAM;EACtC,IAAI,OAAO,QAAQ;EACnB,IAAI,WACF,KAAK,SAAS;EAEhB,KAAK,MAAM,MAAM,aAAa;GAC5B,GAAG;GACH,aAAa;IAAE,GAAG,QAAQ;KAAc,OAAO,KAAK;KAAE,GAAG;KAAQ,QAAQ;IAAK;GAAE;GAChF,iBAAiB,CACf,GAAG,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,OAAO,EAAE,GACtE,OAAO,EACT;EACF,EAAE;CACJ;CAEA,MAAM,IAAc;EAClB,MAAM,SAAS,KAAK,MAAM,eAAe,CAAC,CAAC,YAAY;EACvD,IAAI,CAAC,QAAQ,QAAQ;EACrB,KAAK,MAAM,MAAM,aAAa;GAC5B,GAAG;GACH,aAAa;IAAE,GAAG,QAAQ;KAAc,OAAO,KAAK;KAAE,GAAG;KAAQ,QAAQ;IAAM;GAAE;GACjF,iBAAiB,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,EAAE;EAC/E,EAAE;CACJ;CAEA,WAAW;EACT,OAAO,OAAO,KAAK,MAAM,eAAe,CAAC,CAAC,WAAW,CAAC,CAAC,SAAS,WAC9D,OAAO,MAAM,CACf;CACF;CAEA,OAAO,QAAiC,WAAW,OAAO;EACxD,IAAI,KAAK,MAAM,eAAe,CAAC,CAAC,YAAY,OAAO,GAAG,EAAE,QACtD,KAAK,MAAM,OAAO,EAAE;OAEpB,KAAK,KAAK,QAAQ,QAAQ;CAE9B;CAEA,UAAU,OAAiB;EACzB,MAAM,SAAS,KAAK,IAAI,EAAE;EAC1B,IAAI,CAAC,QAAQ;EAEb,IAAI,OAAO,gBACT,aAAa,OAAO,cAAc;EAGpC,KAAK,MAAM,MAAM,YAAY;GAC3B,MAAM,aAAa,EAAE,GAAG,QAAQ,YAAY;GAC5C,OAAO,WAAW;GAClB,OAAO;IACL,GAAG;IACH,aAAa;IACb,iBAAiB,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,EAAE;GAC/E;EACF,CAAC;CACH;;;;;;CAOA,eAAe,IAAc;EAC3B,MAAM,SAAS,KAAK,IAAI,EAAE;EAE1B,IAAI,CAAC,QACH;EAGF,KAAK,MAAM,MAAM,aAAa;GAC5B,GAAG;GACH,aAAa;IACX,GAAG,QAAQ;KACV,KAAK;KACJ,GAAG;KACH,gBAAgB,iBAAiB;MAC/B,KAAK,OAAO,EAAE;KAChB,GAAG,EAAE;IACP;GACF;GACA,iBAAiB,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,EAAE;EAC/E,EAAE;CACJ;CAEA,qBAAqB,IAAc;EACjC,MAAM,SAAS,KAAK,IAAI,EAAE;EAE1B,IAAI,CAAC,QAAQ,gBACX;EAGF,aAAa,OAAO,cAAc;EAElC,KAAK,MAAM,MAAM,aAAa;GAC5B,GAAG;GACH,aAAa;IACX,GAAG,QAAQ;KACV,KAAK;KACJ,GAAG,QAAQ,YAAY;KACvB,gBAAgB,KAAA;IAClB;GACF;GACA,iBAAiB,QAAQ,YAAY,GAAG,EAAE,SACtC,CAAC,GAAG,QAAQ,gBAAgB,QAAQ,aAAa,aAAa,EAAE,GAAG,EAAE,IACrE,QAAQ;EACd,EAAE;CACJ;AACF"}

package/dist/es/components/EmptyStateIndicator/EmptyStateIndicator.mjs

@@ -1,15 +1,16 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { asDynamicKey } from "../../i18n/utils.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EmptyStateIndicator/EmptyStateIndicator.tsx
 var UnMemoizedEmptyStateIndicator = (props) => {
 	const { listType, messageText } = props;
-	const { t } = useTranslationContext("EmptyStateIndicator");
+	const { t } = useTranslationContext();
 	const { IconMessageBubble, IconMessageBubbles } = useComponentContextIcons();
 	if (listType === "thread") return null;
 	if (listType === "channel") {
-		const text = t("No conversations yet");
+		const text = t("emptyState.indicator.noConversationsYet.label", "No conversations yet");
 		return /* @__PURE__ */ jsxs("div", {
 			className: "str-chat__channel-list-empty",
 			children: [/* @__PURE__ */ jsx(IconMessageBubbles, {}), /* @__PURE__ */ jsx("p", {
@@ -19,7 +20,7 @@ var UnMemoizedEmptyStateIndicator = (props) => {
 		});
 	}
 	if (listType === "message") {
-		const text = t(messageText || "Send a message to start the conversation");
+		const text = messageText ? t(asDynamicKey(messageText)) : t("emptyState.indicator.startConversation.label", "Send a message to start the conversation");
 		return /* @__PURE__ */ jsxs("div", {
 			className: "str-chat__empty-channel",
 			children: [/* @__PURE__ */ jsx(IconMessageBubble, {}), /* @__PURE__ */ jsx("p", {
@@ -29,7 +30,7 @@ var UnMemoizedEmptyStateIndicator = (props) => {
 			})]
 		});
 	}
-	return /* @__PURE__ */ jsx("p", { children: t("No items exist") });
+	return /* @__PURE__ */ jsx("p", { children: t("emptyState.indicator.noItemsExist.text", "No items exist") });
 };
 var EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);
 //#endregion