define(["require", "exports", "tslib", "react", "@fluentui/react/lib/GroupedList", "@fluentui/react/lib/DetailsList", "@fluentui/react/lib/FocusZone", "@fluentui/react/lib/Selection", "@fluentui/react/lib/Toggle", "@fluentui/react-hooks", "@fluentui/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 });
    exports.GroupedListCustomCheckboxExample = void 0;
    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 ? props.checked : undefined })); };
    var 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, group) { return (React.createElement(DetailsList_1.DetailsRow, { columns: columns, groupNestingDepth: nestingDepth, item: item, itemIndex: itemIndex, selection: selection, selectionMode: Selection_1.SelectionMode.multiple, group: group })); }, [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 })))));
    };
    exports.GroupedListCustomCheckboxExample = GroupedListCustomCheckboxExample;
});
//# sourceMappingURL=GroupedList.CustomCheckbox.Example.js.map