define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/Link", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, Button_1, Callout_1, Link_1, Utilities_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // Themed styles for the example.
    var theme = Styling_1.getTheme();
    var styles = Styling_1.mergeStyleSets({
        buttonArea: {
            verticalAlign: 'top',
            display: 'inline-block',
            textAlign: 'center'
        },
        callout: {
            maxWidth: 300
        },
        header: {
            padding: '18px 24px 12px'
        },
        title: [
            theme.fonts.xLarge,
            {
                margin: 0,
                color: theme.palette.neutralPrimary,
                fontWeight: Styling_1.FontWeights.semilight
            }
        ],
        inner: {
            height: '100%',
            padding: '0 24px 20px'
        },
        actions: {
            position: 'relative',
            marginTop: 20,
            width: '100%',
            whiteSpace: 'nowrap'
        },
        link: [
            theme.fonts.medium,
            {
                color: theme.palette.neutralPrimary
            }
        ]
    });
    // Example code
    var CalloutBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(CalloutBasicExample, _super);
        function CalloutBasicExample(props) {
            var _this = _super.call(this, props) || this;
            _this._menuButtonElement = Utilities_1.createRef();
            _this._onShowMenuClicked = function () {
                _this.setState({
                    isCalloutVisible: !_this.state.isCalloutVisible
                });
            };
            _this._onCalloutDismiss = function () {
                _this.setState({
                    isCalloutVisible: false
                });
            };
            _this.state = {
                isCalloutVisible: false
            };
            return _this;
        }
        CalloutBasicExample.prototype.render = function () {
            var isCalloutVisible = this.state.isCalloutVisible;
            return (React.createElement("div", null,
                React.createElement("div", { className: styles.buttonArea, ref: this._menuButtonElement },
                    React.createElement(Button_1.DefaultButton, { id: "toggleCallout", onClick: this._onShowMenuClicked, text: isCalloutVisible ? 'Hide callout' : 'Show callout' })),
                React.createElement(Callout_1.Callout, { className: "ms-CalloutExample-callout", ariaLabelledBy: 'callout-label-1', ariaDescribedBy: 'callout-description-1', role: 'alertdialog', gapSpace: 0, target: this._menuButtonElement.current, onDismiss: this._onCalloutDismiss, setInitialFocus: true, hidden: !this.state.isCalloutVisible },
                    React.createElement("div", { className: "ms-CalloutExample-header" },
                        React.createElement("p", { className: "ms-CalloutExample-title", id: 'callout-label-1' }, "All of your favorite people")),
                    React.createElement("div", { className: "ms-CalloutExample-inner" },
                        React.createElement("div", { className: "ms-CalloutExample-content" },
                            React.createElement("p", { className: "ms-CalloutExample-subText", id: 'callout-description-1' }, "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.")),
                        React.createElement("div", { className: "ms-CalloutExample-actions" },
                            React.createElement(Link_1.Link, { className: "ms-CalloutExample-link", href: "http://microsoft.com" }, "Go to microsoft"))))));
        };
        return CalloutBasicExample;
    }(React.Component));
    exports.CalloutBasicExample = CalloutBasicExample;
});
//# sourceMappingURL=Callout.Basic.Example.js.map