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

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

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
'use client';
import React, { useContext, useEffect } from 'react';
import clsx from 'clsx';
import { hotspotContext as hotspotContextType } from '../annotation-context/context';
import { getBaseProps } from '../internal/base-component';
import useBaseComponent from '../internal/hooks/use-base-component';
import { applyDisplayName } from '../internal/utils/apply-display-name';
import styles from './styles.css.js';
export default function Hotspot({ children, hotspotId, side = 'right', direction = 'top', ...restProps }) {
    const { __internalRootRef } = useBaseComponent('Hotspot', { props: { direction, side } });
    const baseProps = getBaseProps(restProps);
    const hotspotContext = useContext(hotspotContextType);
    const content = hotspotContext.getContentForId(hotspotId, direction);
    const { unregisterHotspot, registerHotspot } = hotspotContext;
    useEffect(() => {
        registerHotspot(hotspotId);
        return () => unregisterHotspot(hotspotId);
    }, [hotspotId, unregisterHotspot, registerHotspot]);
    if (children) {
        return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, styles.wrapper), ref: __internalRootRef },
            React.createElement("div", { className: styles.elementWrapper }, children),
            React.createElement("div", { className: clsx(styles.markerWrapper, styles[`placement-${side}`]), onClick: e => e.stopPropagation() }, content)));
    }
    return (React.createElement("span", { ...baseProps, className: clsx(baseProps.className, styles.root, styles.inlineWrapper), ref: __internalRootRef, onClick: e => e.stopPropagation() }, content));
}
applyDisplayName(Hotspot, 'Hotspot');
//# sourceMappingURL=index.js.map