module.exports = "import * as React from 'react';\nimport { createArray } from '../../../../utilities/array';\nimport {\n  Button,\n  FocusZone,\n  FocusZoneDirection,\n  IColumn,\n  Link\n} from '../../../../index';\nimport { DetailsRow } from '../../../../components/DetailsList/DetailsRow';\nimport { KeyCodes } from '../../../../utilities/KeyCodes';\nimport { getRTLSafeKeyCode } from '../../../../utilities/rtl';\nimport { Selection, SelectionMode } from '../../../../utilities/selection/index';\nimport './FocusZone.List.Example.scss';\n\nconst ITEMS = createArray(10, (index) => ({\n  key: index,\n  name: 'Item-' + index,\n  url: 'http://placekitten.com/100/' + (200 + index)\n}));\n\nconst COLUMNS: IColumn[] = [\n  {\n    key: 'name',\n    name: 'Name',\n    fieldName: 'name',\n    minWidth: 100\n  },\n  {\n    key: 'link',\n    name: 'Link',\n    fieldName: 'url',\n    minWidth: 100,\n    onRender: item => <Link href={ item.url }>{ item.url }</Link>\n  },\n  {\n    key: 'link',\n    name: 'Link',\n    fieldName: 'url',\n    minWidth: 100,\n    onRender: item => <Button>{ item.url }</Button>\n  }\n];\n\nexport class FocusZoneListExample extends React.Component<any, any> {\n  private _selection: Selection;\n\n  constructor() {\n    super();\n\n    this._selection = new Selection();\n    this._selection.setItems(ITEMS);\n  }\n\n  public render() {\n    return (\n      <FocusZone\n        className='ms-FocusZoneListExample'\n        direction={ FocusZoneDirection.vertical }\n        isCircularNavigation={ true }\n        isInnerZoneKeystroke={ (ev) => (ev.which === getRTLSafeKeyCode(KeyCodes.right)) }>\n        { ITEMS.map((item, index) => (\n          <DetailsRow\n            key={ index }\n            item={ item }\n            itemIndex={ index }\n            columns={ COLUMNS }\n            selectionMode={ SelectionMode.single }\n            selection={ this._selection } />\n        )) }\n      </FocusZone>\n    );\n  }\n\n}\n";