"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatusCalloutExample = 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 StatusCalloutExample = function () {
    var _a = react_hooks_1.useBoolean(false), isCalloutVisible = _a[0], toggleIsCalloutVisible = _a[1].toggle;
    var buttonId = react_hooks_1.useId('callout-button');
    return (React.createElement(React.Fragment, null,
        React.createElement(Button_1.DefaultButton, { id: buttonId, onClick: toggleIsCalloutVisible, text: isCalloutVisible ? 'Hide callout' : 'Show callout', className: styles.button }),
        isCalloutVisible && (React.createElement(react_1.Callout, { className: styles.callout, target: "#" + buttonId, onDismiss: toggleIsCalloutVisible, role: "status", "aria-live": "assertive" },
            React.createElement(react_1.DelayedRender, null,
                React.createElement(react_1.Text, { variant: "small" }, "This message is treated as an aria-live assertive status message, and will be read by a screen reader regardless of focus."))))));
};
exports.StatusCalloutExample = StatusCalloutExample;
var styles = react_1.mergeStyleSets({
    button: {
        width: 130,
    },
    callout: {
        width: 320,
        padding: '20px 24px',
    },
});
//# sourceMappingURL=Callout.Status.Example.js.map