communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
189 lines • 4.61 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../acs-ui-common/src";
/**
* @private
*/
export const iconClassName = mergeStyles({
marginRight: _pxToRem(8)
});
/**
* @private
*/
export const displayNameClassName = mergeStyles({
fontWeight: 400,
fontSize: _pxToRem(12),
lineHeight: _pxToRem(16)
});
/**
* @private
*/
export const bannerTitleContainerClassName = mergeStyles({
paddingBottom: _pxToRem(10)
});
/**
* @private
*/
export const isTypingClassName = (theme) => {
return mergeStyles({
backgroundColor: theme.palette.themeLighter,
color: theme.palette.themeDarker,
borderRadius: _pxToRem(4),
marginLeft: _pxToRem(4),
fontWeight: 400,
paddingLeft: _pxToRem(4),
paddingRight: _pxToRem(4),
fontSize: _pxToRem(11),
lineHeight: _pxToRem(16)
});
};
/**
* @private
*/
export const rttContainerClassName = (theme, isTyping) => {
return mergeStyles({
borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'
});
};
/**
* @private
*/
export const rttDisclosureBannerClassName = () => {
return mergeStyles({
padding: '0.25rem',
paddingTop: '0.5rem'
});
};
/**
* @private
*/
export const realTimeTextInputBoxStyles = (theme) => ({
root: {
marginBottom: _pxToRem(8)
},
fieldGroup: {
borderRadius: _pxToRem(4),
borderColor: theme.palette.neutralQuaternaryAlt
}
});
/**
* @private
*/
export const expandIconClassName = (theme) => {
return {
root: {
color: theme.palette.neutralPrimary,
width: '1rem',
height: '1rem'
},
rootHovered: {
color: theme.palette.neutralDark
}
};
};
/**
* @private
*/
export const captionClassName = mergeStyles({
fontWeight: 400,
fontSize: _pxToRem(16),
lineHeight: _pxToRem(22),
width: '100%'
});
/**
* @private
*/
export const captionsContainerClassName = mergeStyles({
height: '100%',
margin: 0,
overflow: 'auto',
padding: 0,
overflowX: 'hidden'
});
/**
* @private
*/
export const hiddenAnnouncementClassName = mergeStyles({
position: 'absolute',
width: '1px',
height: '1px',
padding: 0,
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: 0
});
/**
* @private
*/
export const captionContainerClassName = mergeStyles({
marginTop: _pxToRem(6),
marginBottom: _pxToRem(6),
textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right
overflowAnchor: 'auto',
overflowWrap: 'break-word',
wordBreak: 'break-word', // Additional breaking control for long words
maxWidth: '100%', // Ensure it never expands beyond 100% of the container
width: '100%',
overflow: 'hidden',
boxSizing: 'border-box', // Include padding in the width calculation
whiteSpace: 'normal' // Ensure text wraps
});
/** Reset styling set by the `ul` element */
const resetUlStyling = {
listStyleType: 'none',
padding: 0,
margin: 0
};
/**
* @private
*/
export const captionsBannerClassName = (formFactor, isExpanded) => {
return mergeStyles(Object.assign(Object.assign({}, resetUlStyling), { overflowX: 'hidden', height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem', overflowY: 'auto' }));
};
/**
* @private
*/
export const captionsBannerFullHeightClassName = (theme) => {
return mergeStyles(Object.assign(Object.assign({}, resetUlStyling), { overflowX: 'hidden', overflowY: 'auto', height: '100%', width: '100%', position: 'absolute', backgroundColor: theme.palette.white, left: 0 }));
};
/**
* @private
*/
export const loadingBannerStyles = (formFactor) => {
return {
root: {
height: formFactor === 'compact' ? '4.5rem' : '8.75rem'
}
};
};
/**
* @private
*/
export const loadingBannerFullHeightStyles = (theme) => {
return {
root: {
height: '100%',
width: '100%',
position: 'absolute',
left: 0,
backgroundColor: theme.palette.white
}
};
};
/**
* @private
*/
export const captionsContentContainerClassName = mergeStyles({
width: '100%',
paddingInlineEnd: _pxToRem(4)
});
/**
* @private
*/
export const displayNameContainerClassName = mergeStyles({
overflow: 'hidden',
textOverflow: 'ellipsis'
});
//# sourceMappingURL=Captions.style.js.map