define(["require", "exports", "react", "@fluentui/react", "@fluentui/react-hooks"], function (require, exports, React, react_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.MessageBarNoDelayExample = void 0;
    var wrapperClass = react_1.mergeStyles({
        '> *:not(:last-child)': { marginBottom: '1.5em' },
        '> * > *:not(:last-child)': { marginBottom: '0.5em' },
    });
    var MessageBarNoDelayExample = function () {
        var _a = react_hooks_1.useBoolean(false), showAlert = _a[0], toggleShowAlert = _a[1].toggle;
        var _b = react_hooks_1.useBoolean(false), showStatus = _b[0], toggleShowStatus = _b[1].toggle;
        return (React.createElement("div", { className: wrapperClass },
            React.createElement(react_1.Text, { block: true },
                "By default, MessageBar renders its content within an internal live region after a short delay to help ensure it's announced by screen readers. You can disable this behavior (while still ensuring the message is read by screen readers) by setting the ",
                React.createElement("code", null, "delayedRender"),
                " prop to ",
                React.createElement("code", null, "false"),
                " and setting up the MessageBar in one of the following ways."),
            React.createElement("div", null,
                React.createElement(react_1.Text, { block: true },
                    React.createElement("strong", null, "Option 1:"),
                    " If the MessageBar uses ",
                    React.createElement("code", null, "role=\"alert\""),
                    ", the content should be read on insertion. This role will be set automatically if ",
                    React.createElement("code", null, "messageBarType"),
                    " is ",
                    React.createElement("code", null, "error"),
                    ",",
                    ' ',
                    React.createElement("code", null, "blocked"),
                    ", or ",
                    React.createElement("code", null, "severeWarning"),
                    "."),
                React.createElement(react_1.Toggle, { inlineLabel: true, label: "Show alert example", checked: showAlert, onChange: toggleShowAlert }),
                showAlert && (React.createElement(react_1.MessageBar, { delayedRender: false, 
                    // Setting this to error, blocked, or severeWarning automatically sets the role to "alert"
                    messageBarType: react_1.MessageBarType.error }, "This is an error message."))),
            React.createElement("div", null,
                React.createElement(react_1.Text, { block: true },
                    React.createElement("strong", null, "Option 2:"),
                    " Wrap the whole MessageBar in a ",
                    React.createElement("code", null, '<div role="status">'),
                    " which is always rendered, and ensure the MessageBar is rendered either conditionally or with a delay. You should also set",
                    ' ',
                    React.createElement("code", null, "role=\"none\""),
                    " on the MessageBar itself to prevent nested status regions."),
                React.createElement(react_1.Toggle, { inlineLabel: true, label: "Show status example", checked: showStatus, onChange: toggleShowStatus }),
                React.createElement("div", { role: "status" }, showStatus && (React.createElement(react_1.MessageBar, { delayedRender: false, 
                    // IMPORTANT: Set role="none" to prevent nested status regions
                    role: "none" }, "This is a status message."))))));
    };
    exports.MessageBarNoDelayExample = MessageBarNoDelayExample;
});
//# sourceMappingURL=MessageBar.NoDelay.Example.js.map