define(["require", "exports", "react", "@fluentui/react", "@fluentui/react-hooks", "@fluentui/react/lib/Button"], function (require, exports, React, react_1, react_hooks_1, Button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.CalloutFocusTrapExample = void 0;
    var CalloutFocusTrapExample = 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: "Show callout" }),
            isCalloutVisible ? (React.createElement(react_1.FocusTrapCallout, { role: "alertdialog", className: styles.callout, gapSpace: 0, target: "#" + buttonId, onDismiss: toggleIsCalloutVisible, setInitialFocus: true },
                React.createElement(react_1.Text, { block: true, variant: "xLarge", className: styles.title }, "Focus trapping callout"),
                React.createElement(react_1.Text, { block: true, variant: "small" }, "Content is wrapped in a FocusTrapZone so the user cannot accidentally tab or focus out of this callout. Use the buttons to close."),
                React.createElement(react_1.FocusZone, null,
                    React.createElement(react_1.Stack, { className: styles.buttons, gap: 8, horizontal: true },
                        React.createElement(Button_1.PrimaryButton, { onClick: toggleIsCalloutVisible }, "Done"),
                        React.createElement(Button_1.DefaultButton, { onClick: toggleIsCalloutVisible }, "Cancel"))))) : null));
    };
    exports.CalloutFocusTrapExample = CalloutFocusTrapExample;
    var styles = react_1.mergeStyleSets({
        callout: {
            width: 320,
            padding: '20px 24px',
        },
        title: {
            marginBottom: 12,
            fontWeight: react_1.FontWeights.semilight,
        },
        buttons: {
            display: 'flex',
            justifyContent: 'flex-end',
            marginTop: 20,
        },
    });
});
//# sourceMappingURL=Callout.FocusTrap.Example.js.map