import * as React from 'react';
import { HoverCard, HoverCardType, DirectionalHint, ThemeProvider, mergeStyleSets, } from '@fluentui/react';
import { IconButton } from '@fluentui/react/lib/Button';
var classNames = mergeStyleSets({
    plainCard: {
        width: 200,
        height: 200,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    textField: {
        paddingRight: 200,
    },
});
var onRenderPlainCard = function () {
    return React.createElement("div", { className: classNames.plainCard }, "plain card");
};
export var HoverCardEventListenerTargetExample = function () {
    var targetRef = React.useRef(null);
    var eventListenerTargetRef = React.useRef(null);
    var plainCardProps = {
        onRenderPlainCard: onRenderPlainCard,
        directionalHint: DirectionalHint.rightTopEdge,
    };
    return (React.createElement(ThemeProvider, null,
        React.createElement("p", null, "Using the target to tag hover card on the right side of Emoji icon, and using eventListenerTarget to launch the card only when hovering over the text field, hovering over the icon doesn't trigger card open."),
        React.createElement("span", { ref: targetRef },
            React.createElement("span", { ref: eventListenerTargetRef, className: classNames.textField }, "Hover Zone"),
            React.createElement(IconButton, { iconProps: { iconName: 'Emoji2' }, title: 'Emoji' }),
            React.createElement(HoverCard, { plainCardProps: plainCardProps, type: HoverCardType.plain, target: targetRef.current, eventListenerTarget: eventListenerTargetRef.current }))));
};
//# sourceMappingURL=HoverCard.EventListenerTarget.Example.js.map