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