@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
32 lines (31 loc) • 2.52 kB
JavaScript
import React, { useCallback } from 'react';
import clsx from 'clsx';
import FocusLock from 'react-focus-lock';
import { KeyCode } from '../internal/keycode';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import Button from '../button';
import styles from './styles.css.js';
export default function PopoverBody(_a) {
var _b, _c;
var size = _a.size, fixedWidth = _a.fixedWidth, showDismissButton = _a.dismissButton, dismissAriaLabel = _a.dismissAriaLabel, header = _a.header, children = _a.children, onDismiss = _a.onDismiss, variant = _a.variant, _d = _a.returnFocus, returnFocus = _d === void 0 ? true : _d, dismissButtonRef = _a.dismissButtonRef, className = _a.className;
var labelledById = useUniqueId('awsui-popover-');
var onKeyDown = useCallback(function (event) {
if (event.keyCode === KeyCode.escape) {
onDismiss();
}
}, [onDismiss]);
var dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", { className: styles.dismiss },
React.createElement(Button, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: dismissAriaLabel, onClick: onDismiss, ref: dismissButtonRef })));
return (React.createElement("div", { className: clsx(styles.body, className, styles["body-size-" + size], (_b = {},
_b[styles['fixed-width']] = fixedWidth,
_b[styles["variant-" + variant]] = variant,
_b)), role: "dialog", onKeyDown: onKeyDown, "aria-modal": showDismissButton && variant !== 'annotation' ? true : undefined, "aria-labelledby": showDismissButton && header ? labelledById : undefined },
React.createElement(FocusLock, { disabled: variant === 'annotation' || !showDismissButton, autoFocus: true, returnFocus: returnFocus },
header && (React.createElement("div", { className: showDismissButton ? styles['has-dismiss'] : undefined },
dismissButton,
React.createElement("div", { className: styles.header, id: labelledById },
React.createElement("h2", null, header)))),
React.createElement("div", { className: !header && showDismissButton ? styles['has-dismiss'] : undefined },
!header && dismissButton,
React.createElement("div", { className: clsx(styles.content, (_c = {}, _c[styles['content-overflow-visible']] = variant === 'annotation', _c)) }, children)))));
}