communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
26 lines • 1.69 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Icon } from '@fluentui/react';
import React from 'react';
import { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';
/**
* Props for the Chat.Message action menu.
* This is the 3 dots that appear when hovering over one of your own chat messages.
*
* @private
*/
export const chatMessageActionMenuProps = (menuProps) => {
const { ariaLabel, enabled, theme, menuExpanded } = menuProps;
// Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
const showActionMenu = enabled || menuExpanded;
const actionMenuProps = {
children: (React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-testid": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: { margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: (e) => {
// simulate <button> tag behavior
if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
menuProps.onActionButtonClick();
}
} }, showActionMenu ? (React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
};
return actionMenuProps;
};
//# sourceMappingURL=ChatMessageActionMenu.js.map