"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalloutCoverExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var react_hooks_1 = require("@fluentui/react-hooks");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var CalloutCoverExample = function () {
    var _a = react_hooks_1.useBoolean(false), isCalloutVisible = _a[0], toggleIsCalloutVisible = _a[1].toggle;
    var buttonId = react_hooks_1.useId('callout-button');
    var labelId = react_hooks_1.useId('callout-label');
    return (React.createElement(React.Fragment, null,
        React.createElement(Button_1.DefaultButton, { id: buttonId, text: "Show callout", onClick: toggleIsCalloutVisible }),
        isCalloutVisible && (React.createElement(react_1.Callout, { coverTarget: true, ariaLabelledBy: labelId, className: styles.callout, onDismiss: toggleIsCalloutVisible, target: "#" + buttonId, isBeakVisible: false, setInitialFocus: true },
            React.createElement(react_1.Text, { block: true, variant: "xLarge", className: styles.title, id: labelId }, "I'm covering the target!"),
            React.createElement("div", { className: styles.actions },
                React.createElement(Button_1.DefaultButton, { onClick: toggleIsCalloutVisible, text: "Click to dismiss" }))))));
};
exports.CalloutCoverExample = CalloutCoverExample;
var theme = react_1.getTheme();
var styles = react_1.mergeStyleSets({
    callout: {
        width: 320,
        padding: '20px 24px',
        background: theme.semanticColors.bodyBackground,
    },
    title: {
        marginBottom: 12,
        fontWeight: react_1.FontWeights.semilight,
    },
    actions: {
        marginTop: 20,
    },
});
//# sourceMappingURL=Callout.Cover.Example.js.map