define(["require", "exports", "tslib", "react", "office-ui-fabric-react", "@uifabric/experiments/lib/CollapsibleSection"], function (require, exports, tslib_1, React, office_ui_fabric_react_1, CollapsibleSection_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var stackTokens = { childrenGap: 20 };
    /* eslint-disable react/jsx-no-bind */
    var CollapsibleSectionControlledExample = /** @class */ (function (_super) {
        tslib_1.__extends(CollapsibleSectionControlledExample, _super);
        function CollapsibleSectionControlledExample(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                collapsed: true,
                clicks: 0,
            };
            return _this;
        }
        CollapsibleSectionControlledExample.prototype.render = function () {
            var _this = this;
            return (React.createElement("div", null,
                React.createElement(office_ui_fabric_react_1.FocusZone, null,
                    React.createElement("p", null, "Even though we are using the same CollapsibleSection with the same state component, createComponent overrides the state component's output when the controlled prop has a value passed in automatically. As a result, clicking on the titles in this example does not affect collapsed state, only clicking on the Toggle button does."),
                    React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, tokens: stackTokens, verticalAlign: "center" },
                        React.createElement(office_ui_fabric_react_1.DefaultButton, { text: "Toggle", onClick: function () {
                                _this.setState({ collapsed: !_this.state.collapsed });
                            } }),
                        React.createElement("p", null,
                            "Number of title clicks: ",
                            this.state.clicks)),
                    React.createElement(CollapsibleSection_1.CollapsibleSection, { collapsed: this.state.collapsed, title: {
                            text: "Title 1",
                            onClick: function () {
                                _this.setState(function (state) { return ({ clicks: state.clicks + 1 }); });
                            },
                        } }, "Content 1"),
                    React.createElement(CollapsibleSection_1.CollapsibleSection, { collapsed: this.state.collapsed, title: {
                            text: "Title 2",
                            onClick: function () {
                                _this.setState(function (state) { return ({ clicks: state.clicks + 1 }); });
                            },
                        } }, "Content 2"))));
        };
        return CollapsibleSectionControlledExample;
    }(React.Component));
    exports.CollapsibleSectionControlledExample = CollapsibleSectionControlledExample;
});
//# sourceMappingURL=CollapsibleSection.Controlled.Example.js.map