define(["require", "exports", "react", "@fluentui/react-focus", "@fluentui/react/lib/Image", "@fluentui/react/lib/Utilities", "@fluentui/react-hooks", "@fluentui/react/lib/Styling"], function (require, exports, React, react_focus_1, Image_1, Utilities_1, react_hooks_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.FocusZonePhotosExample = void 0;
    var theme = Styling_1.getTheme();
    var classNames = Styling_1.mergeStyleSets({
        photoList: {
            display: 'inline-block',
            border: '1px solid ' + theme.palette.neutralTertiary,
            padding: 10,
            lineHeight: 0,
            overflow: 'hidden',
        },
        photoCell: {
            position: 'relative',
            display: 'inline-block',
            padding: 2,
            boxSizing: 'border-box',
            selectors: {
                '&:focus': {
                    outline: 'none',
                },
                '&:focus:after': {
                    content: '""',
                    position: 'absolute',
                    right: 4,
                    left: 4,
                    top: 4,
                    bottom: 4,
                    border: '1px solid ' + theme.palette.white,
                    outline: '2px solid ' + theme.palette.themePrimary,
                },
            },
        },
    });
    var MAX_COUNT = 20;
    var getItems = function () {
        var items = [];
        for (var i = 0; i < MAX_COUNT; i++) {
            var randomWidth = 50 + Math.floor(Math.random() * 150);
            items.push({
                id: Utilities_1.getId('photo'),
                url: "http://via.placeholder.com/" + randomWidth + "x100",
                width: randomWidth,
                height: 100,
            });
        }
        return items;
    };
    var FocusZonePhotosExample = function () {
        //  Initialize the items when the component is first rendered (same array will be reused)
        var items = react_hooks_1.useConst(getItems);
        return (React.createElement(react_focus_1.FocusZone, { as: "ul", className: classNames.photoList }, items.map(function (item, index) { return (React.createElement("li", { key: item.id, className: classNames.photoCell, "aria-posinset": index + 1, "aria-setsize": items.length, "aria-label": "Photo", "data-is-focusable": true },
            React.createElement(Image_1.Image, { src: item.url, width: item.width, height: item.height, alt: item.width + " by " + item.height + " placeholder image" }))); })));
    };
    exports.FocusZonePhotosExample = FocusZonePhotosExample;
});
//# sourceMappingURL=FocusZone.Photos.Example.js.map