import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example';
import { FocusZoneListExample } from './examples/FocusZone.List.Example';
import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example';
import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example';
var FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx');
var FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx');
var FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx');
var FocusZoneTabbableCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx');
var FocusZonePage = /** @class */ (function (_super) {
    tslib_1.__extends(FocusZonePage, _super);
    function FocusZonePage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FocusZonePage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'FocusZone', componentName: 'FocusZoneExample', exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Non-uniform photos within bidirectional FocusZone', code: FocusZonePhotosExampleCode },
                    React.createElement(FocusZonePhotosExample, null)),
                React.createElement(ExampleCard, { title: 'Nesting FocusZones in list rows', code: FocusZoneListExampleCode },
                    React.createElement(FocusZoneListExample, null)),
                React.createElement(ExampleCard, { title: 'Disabled FocusZone', code: FocusZoneDisabledExampleCode },
                    React.createElement(FocusZoneDisabledExample, null)),
                React.createElement(ExampleCard, { title: 'Tabbable FocusZone', code: FocusZoneTabbableCode },
                    React.createElement(FocusZoneTabbableExample, null))), allowNativeProps: true, propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current \"active\" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element."),
                React.createElement("p", null, "Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.")), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return FocusZonePage;
}(React.Component));
export { FocusZonePage };
//# sourceMappingURL=FocusZonePage.js.map