define(["require", "exports", "tslib", "react", "../../Utilities", "./Fabric.classNames"], function (require, exports, tslib_1, React, Utilities_1, Fabric_classNames_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DIRECTIONAL_KEY_CODES = [
        38 /* up */,
        40 /* down */,
        37 /* left */,
        39 /* right */,
        36 /* home */,
        35 /* end */,
        9 /* tab */,
        33 /* pageUp */,
        34 /* pageDown */
    ];
    // We will track the last focus visibility state so that if we tear down and recreate
    // the Fabric component, we will use the last known value as the default.
    var _lastIsFocusVisible = false;
    // Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
    if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
        document.documentElement.setAttribute('dir', 'ltr');
    }
    var Fabric = /** @class */ (function (_super) {
        tslib_1.__extends(Fabric, _super);
        function Fabric(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                isFocusVisible: _lastIsFocusVisible
            };
            return _this;
        }
        Fabric.prototype.componentDidMount = function () {
            this._events.on(document.body, 'mousedown', this._onMouseDown, true);
            this._events.on(document.body, 'keydown', this._onKeyDown, true);
        };
        Fabric.prototype.render = function () {
            var isFocusVisible = this.state.isFocusVisible;
            var className = this.props.className;
            var classNames = Fabric_classNames_1.getClassNames(this.props.theme, className, isFocusVisible);
            var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
            return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._resolveRef('_root') })));
        };
        Fabric.prototype._onMouseDown = function () {
            if (this.state.isFocusVisible) {
                this.setState({
                    isFocusVisible: false
                });
                _lastIsFocusVisible = false;
            }
        };
        Fabric.prototype._onKeyDown = function (ev) {
            if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
                this.setState({
                    isFocusVisible: true
                });
                _lastIsFocusVisible = true;
            }
        };
        Fabric = tslib_1.__decorate([
            Utilities_1.customizable('Fabric', ['theme'])
        ], Fabric);
        return Fabric;
    }(Utilities_1.BaseComponent));
    exports.Fabric = Fabric;
});
//# sourceMappingURL=Fabric.js.map