communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
50 lines • 2.44 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FocusTrapZone, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';
import React from 'react';
import { DrawerContentContainer } from './DrawerContentContainer';
import { DrawerLightDismiss } from './DrawerLightDismiss';
/**
* A `Drawer` can be used to reveal lightweight views inside your application.
* They appear from the bottom of the screen upwards and are light-dismissed.
*
* @internal
*/
export const _DrawerSurface = (props) => {
var _a, _b, _c, _d;
const rootStyles = props.disableMaxHeight
? mergeStyles(drawerSurfaceStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root)
: mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root);
const containerStyles = mergeStyleSets(drawerContentContainerStyles, (_c = props.styles) === null || _c === void 0 ? void 0 : _c.drawerContentContainer);
return (React.createElement(Stack, { className: rootStyles },
React.createElement(DrawerLightDismiss, { styles: (_d = props.styles) === null || _d === void 0 ? void 0 : _d.lightDismissRoot, onDismiss: props.onLightDismiss }),
React.createElement(FocusTrapZone, { onKeyDown: (e) => {
if (e.key === 'Escape' || e.key === 'Esc') {
props.onLightDismiss && props.onLightDismiss();
}
},
// Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
// Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
isClickableOutsideFocusTrap: true },
React.createElement(DrawerContentContainer, { styles: containerStyles, heading: props.heading }, props.children))));
};
const drawerSurfaceStyles = {
width: '100%',
height: '100%',
background: 'rgba(0,0,0,0.4)'
};
const focusTrapZoneStyles = {
// Targets FocusTrapZone in drawer.
// Setting percentage to Height to transform a container does not work unless the
// direct parent container also has a Height set other than 'auto'.
'> div:nth-child(2)': {
maxHeight: '75%',
overflow: 'auto'
}
};
const drawerContentContainerStyles = {
root: {
height: 'auto'
}
};
//# sourceMappingURL=DrawerSurface.js.map