@awsui/components-react/hotspot/index.js

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

import { __assign, __rest } from "tslib";
import React, { useContext, useEffect } from 'react';
import styles from './styles.css.js';
import { hotspotContext as hotspotContextType } from '../annotation-context/context';
import clsx from 'clsx';
import { useTelemetry } from '../internal/hooks/use-telemetry';
import { getBaseProps } from '../internal/base-component';
export default function Hotspot(_a) {
    var children = _a.children, hotspotId = _a.hotspotId, _b = _a.side, side = _b === void 0 ? 'right' : _b, _c = _a.direction, direction = _c === void 0 ? 'top' : _c, restProps = __rest(_a, ["children", "hotspotId", "side", "direction"]);
    useTelemetry('Hotspot');
    var baseProps = getBaseProps(restProps);
    var hotspotContext = useContext(hotspotContextType);
    var content = hotspotContext.getContentForId(hotspotId, direction);
    var unregisterHotspot = hotspotContext.unregisterHotspot, registerHotspot = hotspotContext.registerHotspot;
    useEffect(function () {
        registerHotspot(hotspotId);
        return function () { return unregisterHotspot(hotspotId); };
    }, [hotspotId, unregisterHotspot, registerHotspot]);
    if (children) {
        return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.wrapper) }),
            React.createElement("div", { className: styles.elementWrapper }, children),
            React.createElement("div", { className: clsx(styles.markerWrapper, styles["placement-" + side]) }, content)));
    }
    return (React.createElement("span", __assign({}, baseProps, { className: clsx(baseProps.className, styles.inlineWrapper) }), content));
}