import * as React from 'react';
import { FocusTrapCallout, Stack, FocusZone, mergeStyleSets, FontWeights, Text } from '@fluentui/react';
import { useBoolean, useId } from '@fluentui/react-hooks';
import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
export var CalloutFocusTrapExample = 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: "Show callout" }),
        isCalloutVisible ? (React.createElement(FocusTrapCallout, { role: "alertdialog", className: styles.callout, gapSpace: 0, target: "#" + buttonId, onDismiss: toggleIsCalloutVisible, setInitialFocus: true },
            React.createElement(Text, { block: true, variant: "xLarge", className: styles.title }, "Focus trapping callout"),
            React.createElement(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(FocusZone, null,
                React.createElement(Stack, { className: styles.buttons, gap: 8, horizontal: true },
                    React.createElement(PrimaryButton, { onClick: toggleIsCalloutVisible }, "Done"),
                    React.createElement(DefaultButton, { onClick: toggleIsCalloutVisible }, "Cancel"))))) : null));
};
var styles = mergeStyleSets({
    callout: {
        width: 320,
        padding: '20px 24px',
    },
    title: {
        marginBottom: 12,
        fontWeight: FontWeights.semilight,
    },
    buttons: {
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: 20,
    },
});
//# sourceMappingURL=Callout.FocusTrap.Example.js.map