communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
32 lines • 1.93 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { IconButton, Stack, TooltipHost, mergeStyles, useTheme } from '@fluentui/react';
import { useState } from 'react';
import { isDarkThemed } from '../theming/themeUtils';
import React from 'react';
import { iconWrapperStyle, inputBoxButtonStyle, inputBoxButtonTooltipStyle } from './styles/InputBoxButton.style';
/**
* @private
*/
export const InputBoxButton = (props) => {
const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId, disabled, ariaExpanded } = props;
const [isHover, setIsHover] = useState(false);
const mergedButtonStyle = mergeStyles(inputBoxButtonStyle, className);
const theme = useTheme();
const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
// Place callout with no gap between it and the button.
const calloutProps = {
gapSpace: 0,
styles: calloutStyle,
backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
};
return (React.createElement(TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
React.createElement(IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
setIsHover(true);
}, onMouseLeave: () => {
setIsHover(false);
},
// VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
onRenderIcon: () => React.createElement(Stack, { className: iconWrapperStyle }, onRenderIcon(isHover)), "data-testid": dataTestId, "aria-expanded": ariaExpanded, disabled: disabled, allowDisabledFocus: true })));
};
//# sourceMappingURL=InputBoxButton.js.map