"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverCardEventListenerTargetExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var classNames = react_1.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");
};
var HoverCardEventListenerTargetExample = function () {
    var targetRef = React.useRef(null);
    var eventListenerTargetRef = React.useRef(null);
    var plainCardProps = {
        onRenderPlainCard: onRenderPlainCard,
        directionalHint: react_1.DirectionalHint.rightTopEdge,
    };
    return (React.createElement(react_1.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(Button_1.IconButton, { iconProps: { iconName: 'Emoji2' }, title: 'Emoji' }),
            React.createElement(react_1.HoverCard, { plainCardProps: plainCardProps, type: react_1.HoverCardType.plain, target: targetRef.current, eventListenerTarget: eventListenerTargetRef.current }))));
};
exports.HoverCardEventListenerTargetExample = HoverCardEventListenerTargetExample;
//# sourceMappingURL=HoverCard.EventListenerTarget.Example.js.map