@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
38 lines • 2.24 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect } from 'react';
import PopoverArrow from '../../../popover/arrow';
import PopoverBody from '../../../popover/body';
import PopoverContainer from '../../../popover/container';
import Portal from '../portal';
import { Transition } from '../transition';
import styles from './styles.css.js';
export default function Tooltip({ value, trackRef, trackKey, className, contentAttributes = {}, position = 'top', size = 'small', hideOnOverscroll, onDismiss, }) {
if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {
trackKey = value;
}
useEffect(() => {
const controller = new AbortController();
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
// Prevent any surrounding modals or dialogs from acting on this Esc.
event.stopPropagation();
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
}
}, {
// The tooltip is often activated on mouseover, which means the focus can
// be anywhere else on the page. Capture also means that this gets called
// before any wrapper modals or dialogs can detect it and act on it.
capture: true,
signal: controller.signal,
});
return () => {
controller.abort();
};
}, [onDismiss]);
return (React.createElement(Portal, null,
React.createElement("div", Object.assign({ className: styles.root }, contentAttributes, { "data-testid": trackKey }),
React.createElement(Transition, { in: true }, () => (React.createElement(PopoverContainer, { trackRef: trackRef, trackKey: trackKey, size: size, fixedWidth: false, position: position, zIndex: 7000, arrow: position => React.createElement(PopoverArrow, { position: position }), hideOnOverscroll: hideOnOverscroll, className: className },
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, onDismiss: undefined, header: undefined }, value)))))));
}
//# sourceMappingURL=index.js.map