define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/GroupedList", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/FocusZone", "office-ui-fabric-react/lib/Selection", "office-ui-fabric-react/lib/Toggle", "@uifabric/react-hooks", "@uifabric/example-data"], function (require, exports, tslib_1, React, GroupedList_1, DetailsList_1, FocusZone_1, Selection_1, Toggle_1, react_hooks_1, example_data_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var groupCount = 3;
    var groupDepth = 1;
    var groupProps = {
        onRenderHeader: function (props) { return (React.createElement(GroupedList_1.GroupHeader, tslib_1.__assign({ onRenderGroupHeaderCheckbox: onRenderGroupHeaderCheckbox }, props))); },
    };
    var onRenderGroupHeaderCheckbox = function (props) { return React.createElement(Toggle_1.Toggle, { checked: props.checked }); };
    exports.GroupedListCustomCheckboxExample = function () {
        var items = react_hooks_1.useConst(function () { return example_data_1.createListItems(Math.pow(groupCount, groupDepth + 1)); });
        var groups = react_hooks_1.useConst(function () { return example_data_1.createGroups(groupCount, groupDepth, 0, groupCount); });
        var columns = react_hooks_1.useConst(function () {
            return Object.keys(items[0])
                .slice(0, 3)
                .map(function (key) { return ({
                key: key,
                name: key,
                fieldName: key,
                minWidth: 300,
            }); });
        });
        var selection = react_hooks_1.useConst(function () { return new Selection_1.Selection({ items: items }); });
        var onRenderCell = React.useCallback(function (nestingDepth, item, itemIndex) { return (React.createElement(DetailsList_1.DetailsRow, { columns: columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: Selection_1.SelectionMode.multiple })); }, [columns, selection]);
        return (React.createElement("div", null,
            React.createElement(FocusZone_1.FocusZone, null,
                React.createElement(Selection_1.SelectionZone, { selection: selection, selectionMode: Selection_1.SelectionMode.multiple },
                    React.createElement(GroupedList_1.GroupedList, { items: items, onRenderCell: onRenderCell, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, groups: groups, groupProps: groupProps })))));
    };
});
//# sourceMappingURL=GroupedList.CustomCheckbox.Example.js.map