import * as React from 'react';
import { mergeStyleSets, DelayedRender, Callout, Text } from '@fluentui/react';
import { useBoolean, useId } from '@fluentui/react-hooks';
import { DefaultButton } from '@fluentui/react/lib/Button';
export var StatusCalloutExample = function () {
    var _a = useBoolean(false), isCalloutVisible = _a[0], toggleIsCalloutVisible = _a[1].toggle;
    var buttonId = useId('callout-button');
    return (React.createElement(React.Fragment, null,
        React.createElement(DefaultButton, { id: buttonId, onClick: toggleIsCalloutVisible, text: isCalloutVisible ? 'Hide callout' : 'Show callout', className: styles.button }),
        isCalloutVisible && (React.createElement(Callout, { className: styles.callout, target: "#" + buttonId, onDismiss: toggleIsCalloutVisible, role: "status", "aria-live": "assertive" },
            React.createElement(DelayedRender, null,
                React.createElement(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."))))));
};
var styles = mergeStyleSets({
    button: {
        width: 130,
    },
    callout: {
        width: 320,
        padding: '20px 24px',
    },
});
//# sourceMappingURL=Callout.Status.Example.js.map