"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Fabric_styles_1 = require("./Fabric.styles");
var DIRECTIONAL_KEY_CODES = [
    Utilities_1.KeyCodes.up,
    Utilities_1.KeyCodes.down,
    Utilities_1.KeyCodes.left,
    Utilities_1.KeyCodes.right,
    Utilities_1.KeyCodes.home,
    Utilities_1.KeyCodes.end,
    Utilities_1.KeyCodes.tab,
    Utilities_1.KeyCodes.pageUp,
    Utilities_1.KeyCodes.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 = (function (_super) {
    tslib_1.__extends(Fabric, _super);
    function Fabric() {
        var _this = _super.call(this) || 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 styles = Fabric_styles_1.getStyles(this.props.theme);
        var rootClass = Utilities_1.css('ms-Fabric', styles.root, this.props.className, isFocusVisible && 'is-focusVisible');
        var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
        return (React.createElement("div", tslib_1.__assign({}, divProps, { className: rootClass, 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;
        }
    };
    return Fabric;
}(Utilities_1.BaseComponent));
Fabric = tslib_1.__decorate([
    Utilities_1.customizable(['theme'])
], Fabric);
exports.Fabric = Fabric;

//# sourceMappingURL=Fabric.js.map
