import * as React from 'react';
import { HoverCard, HoverCardType, ThemeProvider, DefaultButton, mergeStyleSets, } from '@fluentui/react';
var classNames = mergeStyleSets({
    plainCard: {
        width: 200,
        height: 200,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    target: {
        fontWeight: '600',
        display: 'inline-block',
        border: '1px dashed #605e5c',
        padding: 5,
        borderRadius: 2,
    },
});
var onCardHide = function () {
    console.log('I am now hidden');
};
export var HoverCardInstantDismissExample = function () {
    var hoverCard = React.useRef(null);
    var instantDismissCard = function () {
        if (hoverCard.current) {
            hoverCard.current.dismiss();
        }
    };
    var onRenderPlainCard = function () {
        return (React.createElement("div", { className: classNames.plainCard },
            React.createElement(DefaultButton
            // eslint-disable-next-line react/jsx-no-bind
            , { 
                // eslint-disable-next-line react/jsx-no-bind
                onClick: instantDismissCard, text: "Instant Dismiss" })));
    };
    var plainCardProps = {
        onRenderPlainCard: onRenderPlainCard,
    };
    return (React.createElement(ThemeProvider, null,
        React.createElement("p", null,
            "In cases where an instant dismiss of the card is needed, public method",
            React.createElement("i", null, "dismiss()"),
            " can be used through its ",
            React.createElement("i", null, "componentRef"),
            " prop."),
        React.createElement(HoverCard, { cardDismissDelay: 2000, type: HoverCardType.plain, plainCardProps: plainCardProps, componentRef: hoverCard, onCardHide: onCardHide },
            React.createElement("span", { className: classNames.target }, "Hover Over Me"))));
};
//# sourceMappingURL=HoverCard.InstantDismiss.Example.js.map