"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var Grid = /** @class */ (function (_super) {
    tslib_1.__extends(Grid, _super);
    function Grid(props) {
        var _this = _super.call(this, props) || this;
        _this._id = Utilities_1.getId();
        return _this;
    }
    Grid.prototype.render = function () {
        var _this = this;
        var _a = this.props, items = _a.items, columnCount = _a.columnCount, onRenderItem = _a.onRenderItem, positionInSet = _a.positionInSet, setSize = _a.setSize;
        // Array to store the cells in the correct row index
        var rowsOfItems = Utilities_1.toMatrix(items, columnCount);
        // Create the table/grid
        return (React.createElement(FocusZone_1.FocusZone, { isCircularNavigation: this.props.shouldFocusCircularNavigate, className: this.props.containerClassName, onBlur: this.props.onBlur },
            React.createElement("table", { id: this._id, role: 'grid', "aria-posinset": positionInSet, "aria-setsize": setSize, style: { padding: '2px', outline: 'none' } },
                React.createElement("tbody", null, rowsOfItems.map(function (rows, rowIndex) {
                    return (React.createElement("tr", { role: 'row', key: _this._id + '-' + rowIndex + '-row' }, rows.map(function (cell, cellIndex) {
                        return (React.createElement("td", { role: 'presentation', key: _this._id + '-' + cellIndex + '-cell', style: { padding: '0px' } }, onRenderItem(cell, cellIndex)));
                    })));
                })))));
    };
    return Grid;
}(Utilities_1.BaseComponent));
exports.Grid = Grid;
//# sourceMappingURL=Grid.js.map