@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
55 lines (54 loc) • 3.52 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { KeyCode } from '../internal/keycode';
import { getBaseProps } from '../internal/base-component';
import useFocusVisible from '../internal/hooks/focus-visible';
import PopoverContainer from './container';
import PopoverBody from './body';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function Popover(_a) {
var _b = _a.position, position = _b === void 0 ? 'right' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.fixedWidth, fixedWidth = _d === void 0 ? false : _d, _e = _a.triggerType, triggerType = _e === void 0 ? 'text' : _e, _f = _a.dismissButton, dismissButton = _f === void 0 ? true : _f, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, header = _a.header, content = _a.content, restProps = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "dismissAriaLabel", "children", "header", "content"]);
useTelemetry('Popover');
var baseProps = getBaseProps(restProps);
var focusVisible = useFocusVisible();
var triggerRef = useRef(null);
var popoverRef = useRef(null);
var _g = useState(false), visible = _g[0], setVisible = _g[1];
var onTriggerClick = useCallback(function () {
setVisible(true);
}, []);
var onDismiss = useCallback(function () {
setVisible(false);
}, []);
var onTriggerKeyDown = useCallback(function (event) {
if (event.keyCode === KeyCode.tab || event.keyCode === KeyCode.escape) {
setVisible(false);
}
}, []);
useEffect(function () {
var onDocumentClick = function (event) {
if (event.target && popoverRef.current && !popoverRef.current.contains(event.target)) {
setVisible(false);
}
};
document.addEventListener('click', onDocumentClick);
return function () {
document.removeEventListener('click', onDocumentClick);
};
}, []);
var triggerProps = {
ref: triggerRef,
onClick: onTriggerClick,
onKeyDown: onTriggerKeyDown,
className: clsx(styles.trigger, styles["trigger-type-" + triggerType])
};
return (React.createElement("span", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: popoverRef }),
triggerType === 'text' ? (React.createElement("button", __assign({}, triggerProps, { type: "button", "aria-haspopup": "dialog" }, focusVisible),
React.createElement("span", null, children))) : (React.createElement("span", __assign({}, triggerProps), children)),
React.createElement("span", { "aria-live": dismissButton ? undefined : 'polite', "aria-atomic": dismissButton ? undefined : true }, visible && triggerRef.current && (React.createElement(PopoverContainer, { position: position, track: triggerRef.current, arrow: function (position) { return (React.createElement("div", { className: clsx(styles.arrow, styles["arrow-position-" + position]) },
React.createElement("div", { className: styles['arrow-outer'] }),
React.createElement("div", { className: styles['arrow-inner'] }))); } },
React.createElement(PopoverBody, { size: size, fixedWidth: fixedWidth, dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss }, content))))));
}