text: import * as tslib_1 from "tslib";
  import * as React from 'react';
  import { KeyCodes, createArray, getRTLSafeKeyCode } from 'office-ui-fabric-react/lib/Utilities';
  import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
  import { Link } from 'office-ui-fabric-react/lib/Link';
  import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
  import { DetailsRow, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
  import './FocusZone.List.Example.scss';
  var ITEMS = createArray(10, function (index) { return ({
      key: index.toString(),
      name: 'Item-' + index,
      url: 'http://placehold.it/100x' + (200 + index)
  }); });
  var COLUMNS = [
      {
          key: 'name',
          name: 'Name',
          fieldName: 'name',
          minWidth: 100
      },
      {
          key: 'link',
          name: 'Link',
          fieldName: 'url',
          minWidth: 100,
          onRender: function (item) { return React.createElement(Link, { href: item.url }, item.url); }
      },
      {
          key: 'link',
          name: 'Link',
          fieldName: 'url',
          minWidth: 100,
          onRender: function (item) { return React.createElement(DefaultButton, null, item.url); }
      }
  ];
  var FocusZoneListExample = /** @class */ (function (_super) {
      tslib_1.__extends(FocusZoneListExample, _super);
      function FocusZoneListExample(props) {
          var _this = _super.call(this, props) || this;
          _this._selection = new Selection();
          _this._selection.setItems(ITEMS);
          return _this;
      }
      FocusZoneListExample.prototype.render = function () {
          var _this = this;
          return (React.createElement(FocusZone, { className: "ms-FocusZoneListExample", direction: FocusZoneDirection.vertical, isCircularNavigation: true, isInnerZoneKeystroke: this._isInnerZoneKeystroke }, ITEMS.map(function (item, index) { return (React.createElement(DetailsRow, { key: index, item: item, itemIndex: index, columns: COLUMNS, selectionMode: SelectionMode.single, selection: _this._selection })); })));
      };
      FocusZoneListExample.prototype._isInnerZoneKeystroke = function (ev) {
          return ev.which === getRTLSafeKeyCode(KeyCodes.right);
      };
      return FocusZoneListExample;
  }(React.Component));
  export { FocusZoneListExample };
  //# sourceMappingURL=FocusZone.List.Example.js.map