@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/modernTaxonomyPicker/taxonomyPanelContents/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TaxonomyPanelContents"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/controls/modernTaxonomyPicker/taxonomyPanelContents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/controls/modernTaxonomyPicker/taxonomyPanelContents/index.ts"],"names":[],"mappings":";;;AAAA,kEAAwC"}

package/lib-commonjs/controls/modernTaxonomyPicker/taxonomyTree/TaxonomyTree.js

@@ -0,0 +1,613 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaxonomyTree = TaxonomyTree;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("@fluentui/react");
+var strings = tslib_1.__importStar(require("ControlStrings"));
+var sp_core_library_1 = require("@microsoft/sp-core-library");
+var TaxonomyTree_module_scss_1 = tslib_1.__importDefault(require("./TaxonomyTree.module.scss"));
+function TaxonomyTree(props) {
+    var _a = React.useState([]), groupsLoading = _a[0], setGroupsLoading = _a[1];
+    var _b = React.useState([]), groups = _b[0], setGroups = _b[1];
+    var updateTaxonomyTreeViewWithNewTermItems = function (newTermItems, parentTerm) {
+        var _a, _b;
+        var _loop_1 = function (term) {
+            var findGroupContainingTerm = function (currentGroup) {
+                var _a;
+                if (!term.parent || currentGroup.key === term.parent.id) {
+                    return currentGroup;
+                }
+                if (((_a = currentGroup.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    for (var _i = 0, _b = currentGroup.children; _i < _b.length; _i++) {
+                        var child = _b[_i];
+                        var foundGroup = findGroupContainingTerm(child);
+                        if (foundGroup) {
+                            return foundGroup;
+                        }
+                    }
+                }
+                return null;
+            };
+            var findParentTermLevel = function (groups, parentTermId) {
+                for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+                    var group = groups_1[_i];
+                    if (group.key === parentTermId) {
+                        return group.level;
+                    }
+                    if (group.children && group.children.length > 0) {
+                        var level = findParentTermLevel(group.children, parentTermId);
+                        if (level !== null) {
+                            return level;
+                        }
+                    }
+                }
+                return null;
+            };
+            var parentTermLevel = findParentTermLevel([groups[0]], parentTerm[0].id);
+            var groupToAddTermTo = findGroupContainingTerm(groups[0]);
+            var termNames = term.labels.filter(function (termLabel) {
+                return termLabel.languageTag === props.languageTag &&
+                    termLabel.isDefault === true;
+            });
+            if (termNames.length === 0) {
+                termNames = term.labels.filter(function (termLabel) {
+                    return termLabel.languageTag === props.termStoreInfo.defaultLanguageTag &&
+                        termLabel.isDefault === true;
+                });
+            }
+            var g = {
+                name: (_a = termNames[0]) === null || _a === void 0 ? void 0 : _a.name,
+                key: term.id,
+                startIndex: -1,
+                count: 50,
+                level: parentTermLevel + 1,
+                isCollapsed: true,
+                data: { skiptoken: "", term: term },
+                hasMoreData: term.childrenCount > 0,
+            };
+            if (g.hasMoreData) {
+                g.children = [];
+            }
+            groupToAddTermTo.children = tslib_1.__spreadArray(tslib_1.__spreadArray([], ((_b = groupToAddTermTo.children) !== null && _b !== void 0 ? _b : []), true), [g], false);
+            props.setTerms(function (prevTerms) {
+                var nonExistingTerms = newTermItems.filter(function (newTerm) {
+                    return prevTerms.every(function (prevTerm) { return prevTerm.id !== newTerm.id; });
+                });
+                return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevTerms, true), nonExistingTerms, true);
+            });
+        };
+        for (var _i = 0, newTermItems_1 = newTermItems; _i < newTermItems_1.length; _i++) {
+            var term = newTermItems_1[_i];
+            _loop_1(term);
+        }
+    };
+    var updateTaxonomyTreeViewWithUpdatedTermItems = function (updatedTermItems) {
+        var _a;
+        var _loop_2 = function (term) {
+            var findGroupForTerm = function (currentGroup) {
+                var _a;
+                if (currentGroup.key === term.id) {
+                    return currentGroup;
+                }
+                if (((_a = currentGroup.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    for (var _i = 0, _b = currentGroup.children; _i < _b.length; _i++) {
+                        var child = _b[_i];
+                        var foundGroup = findGroupForTerm(child);
+                        if (foundGroup) {
+                            return foundGroup;
+                        }
+                    }
+                }
+                return null;
+            };
+            var groupForUpdatedTerm = findGroupForTerm(groups[0]);
+            var termNames = term.labels.filter(function (termLabel) {
+                return termLabel.languageTag === props.languageTag &&
+                    termLabel.isDefault === true;
+            });
+            if (termNames.length === 0) {
+                termNames = term.labels.filter(function (termLabel) {
+                    return termLabel.languageTag === props.termStoreInfo.defaultLanguageTag &&
+                        termLabel.isDefault === true;
+                });
+            }
+            groupForUpdatedTerm.name = (_a = termNames[0]) === null || _a === void 0 ? void 0 : _a.name;
+            groupForUpdatedTerm.data.term = term;
+            if (term.childrenCount > 0 && !groupForUpdatedTerm.children) {
+                groupForUpdatedTerm.children = [];
+            }
+            groupForUpdatedTerm.hasMoreData =
+                groupForUpdatedTerm.children &&
+                    term.childrenCount > groupForUpdatedTerm.children.length;
+            props.setTerms(function (prevTerms) {
+                return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevTerms.filter(function (t) { return t.id !== term.id; }), true), [term], false);
+            });
+        };
+        for (var _i = 0, updatedTermItems_1 = updatedTermItems; _i < updatedTermItems_1.length; _i++) {
+            var term = updatedTermItems_1[_i];
+            _loop_2(term);
+        }
+    };
+    var updateTaxonomyTreeViewWithDeletedTermItems = function (deletedTermItems) {
+        var _loop_3 = function (term) {
+            var deleteGroupForTerm = function (currentGroup) {
+                var _a, _b;
+                if (((_a = currentGroup.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    for (var _i = 0, _c = currentGroup.children; _i < _c.length; _i++) {
+                        var child = _c[_i];
+                        deleteGroupForTerm(child);
+                    }
+                    if (currentGroup.children.some(function (t) { return t.key === term.id; })) {
+                        currentGroup.children = currentGroup.children.filter(function (t) { return t.key !== term.id; });
+                        if (((_b = currentGroup.children) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+                            currentGroup.hasMoreData = false;
+                            currentGroup.children = undefined;
+                        }
+                    }
+                }
+            };
+            deleteGroupForTerm(groups[0]);
+            props.setTerms(function (prevTerms) {
+                return tslib_1.__spreadArray([], prevTerms.filter(function (t) { return t.id !== term.id; }), true);
+            });
+        };
+        for (var _i = 0, deletedTermItems_1 = deletedTermItems; _i < deletedTermItems_1.length; _i++) {
+            var term = deletedTermItems_1[_i];
+            _loop_3(term);
+        }
+    };
+    var updateTaxonomyTreeView = function (newTermItems, parentTerm, updatedTermItems, deletedTermItems) {
+        if (newTermItems) {
+            updateTaxonomyTreeViewWithNewTermItems(newTermItems, parentTerm);
+        }
+        if (updatedTermItems) {
+            updateTaxonomyTreeViewWithUpdatedTermItems(updatedTermItems);
+        }
+        if (deletedTermItems) {
+            updateTaxonomyTreeViewWithDeletedTermItems(deletedTermItems);
+        }
+    };
+    React.useEffect(function () {
+        var _a;
+        var termRootName = "";
+        if (!props.anchorTermInfo && !props.termSetInfo) {
+            return;
+        }
+        if (props.anchorTermInfo) {
+            var anchorTermNames = props.anchorTermInfo.labels.filter(function (name) { return name.languageTag === props.languageTag && name.isDefault; });
+            if (anchorTermNames.length === 0) {
+                anchorTermNames = props.anchorTermInfo.labels.filter(function (name) {
+                    return name.languageTag === props.termStoreInfo.defaultLanguageTag &&
+                        name.isDefault;
+                });
+            }
+            termRootName = anchorTermNames[0].name;
+        }
+        else {
+            var termSetNames = ((_a = props.termSetInfo) === null || _a === void 0 ? void 0 : _a.localizedNames.filter(function (name) { return name.languageTag === props.languageTag; })) || [];
+            if (termSetNames.length === 0) {
+                termSetNames = props.termSetInfo.localizedNames.filter(function (name) { return name.languageTag === props.termStoreInfo.defaultLanguageTag; }) || [];
+            }
+            termRootName = termSetNames[0].name || '';
+        }
+        var rootGroup = {
+            name: termRootName,
+            key: props.anchorTermInfo
+                ? props.anchorTermInfo.id
+                : props.termSetInfo.id,
+            startIndex: -1,
+            count: 50,
+            level: 0,
+            isCollapsed: false,
+            data: { skiptoken: "" },
+            hasMoreData: (props.anchorTermInfo
+                ? props.anchorTermInfo.childrenCount
+                : props.termSetInfo.childrenCount) > 0,
+        };
+        setGroups([rootGroup]);
+        setGroupsLoading(function (prevGroupsLoading) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevGroupsLoading, true), [
+            props.termSetInfo.id,
+        ], false); });
+        if (props.termSetInfo.childrenCount > 0) {
+            props
+                .onLoadMoreData(sp_core_library_1.Guid.parse(props.termSetInfo.id), props.anchorTermInfo
+                ? sp_core_library_1.Guid.parse(props.anchorTermInfo.id)
+                : sp_core_library_1.Guid.empty, "", props.hideDeprecatedTerms)
+                .then(function (loadedTerms) {
+                var grps = loadedTerms.value.map(function (term) {
+                    var _a;
+                    var termNames = term.labels.filter(function (termLabel) {
+                        return termLabel.languageTag === props.languageTag &&
+                            termLabel.isDefault === true;
+                    });
+                    if (termNames.length === 0) {
+                        termNames = term.labels.filter(function (termLabel) {
+                            return termLabel.languageTag ===
+                                props.termStoreInfo.defaultLanguageTag &&
+                                termLabel.isDefault === true;
+                        });
+                    }
+                    var g = {
+                        name: (_a = termNames[0]) === null || _a === void 0 ? void 0 : _a.name,
+                        key: term.id,
+                        startIndex: -1,
+                        count: 50,
+                        level: 1,
+                        isCollapsed: true,
+                        data: { skiptoken: "", term: term },
+                        hasMoreData: props.allowSelectingChildren !== false &&
+                            term.childrenCount > 0,
+                    };
+                    if (g.hasMoreData) {
+                        g.children = [];
+                    }
+                    return g;
+                });
+                props.setTerms(function (prevTerms) {
+                    var nonExistingTerms = loadedTerms.value.filter(function (newTerm) {
+                        return prevTerms.every(function (prevTerm) { return prevTerm.id !== newTerm.id; });
+                    });
+                    return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevTerms, true), nonExistingTerms, true);
+                });
+                rootGroup.children = grps;
+                rootGroup.data.skiptoken = loadedTerms.skiptoken;
+                rootGroup.hasMoreData = loadedTerms.skiptoken !== "";
+                setGroupsLoading(function (prevGroupsLoading) {
+                    return prevGroupsLoading.filter(function (value) { return value !== props.termSetInfo.id; });
+                });
+                setGroups([rootGroup]);
+            })
+                .catch(function () {
+                // no-op;
+            });
+        }
+    }, []);
+    var onToggleCollapse = function (group) {
+        if (group.isCollapsed === true) {
+            setGroups(function (prevGroups) {
+                var recurseGroups = function (currentGroup) {
+                    var _a;
+                    if (currentGroup.key === group.key) {
+                        currentGroup.isCollapsed = false;
+                    }
+                    if (((_a = currentGroup.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        for (var _i = 0, _b = currentGroup.children; _i < _b.length; _i++) {
+                            var child = _b[_i];
+                            recurseGroups(child);
+                        }
+                    }
+                };
+                var newGroupsState = [];
+                for (var _i = 0, prevGroups_1 = prevGroups; _i < prevGroups_1.length; _i++) {
+                    var prevGroup = prevGroups_1[_i];
+                    recurseGroups(prevGroup);
+                    newGroupsState.push(prevGroup);
+                }
+                return newGroupsState;
+            });
+            if (group.children && group.children.length === 0) {
+                setGroupsLoading(function (prevGroupsLoading) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevGroupsLoading, true), [
+                    group.key,
+                ], false); });
+                group.data.isLoading = true;
+                props
+                    .onLoadMoreData(sp_core_library_1.Guid.parse(props.termSetInfo.id), sp_core_library_1.Guid.parse(group.key), "", props.hideDeprecatedTerms)
+                    .then(function (loadedTerms) {
+                    var grps = loadedTerms.value.map(function (term) {
+                        var _a;
+                        var termNames = term.labels.filter(function (termLabel) {
+                            return termLabel.languageTag === props.languageTag &&
+                                termLabel.isDefault === true;
+                        });
+                        if (termNames.length === 0) {
+                            termNames = term.labels.filter(function (termLabel) {
+                                return termLabel.languageTag ===
+                                    props.termStoreInfo.defaultLanguageTag &&
+                                    termLabel.isDefault === true;
+                            });
+                        }
+                        var g = {
+                            name: (_a = termNames[0]) === null || _a === void 0 ? void 0 : _a.name,
+                            key: term.id,
+                            startIndex: -1,
+                            count: 50,
+                            level: group.level + 1,
+                            isCollapsed: true,
+                            data: { skiptoken: "", term: term },
+                            hasMoreData: term.childrenCount > 0,
+                        };
+                        if (g.hasMoreData) {
+                            g.children = [];
+                        }
+                        return g;
+                    });
+                    props.setTerms(function (prevTerms) {
+                        var nonExistingTerms = loadedTerms.value.filter(function (newTerm) {
+                            return prevTerms.every(function (prevTerm) { return prevTerm.id !== newTerm.id; });
+                        });
+                        return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevTerms, true), nonExistingTerms, true);
+                    });
+                    var nonExistingChildren = grps.filter(function (grp) { var _a; return (_a = group.children) === null || _a === void 0 ? void 0 : _a.every(function (child) { return child.key !== grp.key; }); });
+                    group.children = nonExistingChildren;
+                    group.data.skiptoken = loadedTerms.skiptoken;
+                    group.hasMoreData = loadedTerms.skiptoken !== "";
+                    setGroupsLoading(function (prevGroupsLoading) {
+                        return prevGroupsLoading.filter(function (value) { return value !== group.key; });
+                    });
+                })
+                    .catch(function () {
+                    // no-op;
+                });
+            }
+        }
+        else {
+            setGroups(function (prevGroups) {
+                var recurseGroups = function (currentGroup) {
+                    var _a;
+                    if (currentGroup.key === group.key) {
+                        currentGroup.isCollapsed = true;
+                    }
+                    if (((_a = currentGroup.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        for (var _i = 0, _b = currentGroup.children; _i < _b.length; _i++) {
+                            var child = _b[_i];
+                            recurseGroups(child);
+                        }
+                    }
+                };
+                var newGroupsState = [];
+                for (var _i = 0, prevGroups_2 = prevGroups; _i < prevGroups_2.length; _i++) {
+                    var prevGroup = prevGroups_2[_i];
+                    recurseGroups(prevGroup);
+                    newGroupsState.push(prevGroup);
+                }
+                return newGroupsState;
+            });
+        }
+    };
+    var onRenderTitle = function (groupHeaderProps) {
+        var isChildSelected = function (children) {
+            var aChildIsSelected = children &&
+                children.some(function (child) {
+                    return (props.selection && props.selection.isKeySelected(child.key)) ||
+                        isChildSelected(child.children);
+                });
+            return aChildIsSelected;
+        };
+        var childIsSelected = props.selection && isChildSelected(groupHeaderProps.group.children);
+        if (groupHeaderProps.group.level === 0) {
+            var labelStyles = {
+                root: {
+                    width: "100%",
+                    fontWeight: childIsSelected ? "bold" : "normal",
+                },
+            };
+            return (React.createElement(react_1.FocusZone, { direction: react_1.FocusZoneDirection.horizontal, className: TaxonomyTree_module_scss_1.default.taxonomyItemFocusZone },
+                props.showIcons && (React.createElement(react_1.FontIcon, { iconName: "Tag", className: TaxonomyTree_module_scss_1.default.taxonomyItemIcon })),
+                React.createElement(react_1.Label, { styles: labelStyles }, groupHeaderProps.group.name),
+                React.createElement("div", { className: TaxonomyTree_module_scss_1.default.actionButtonContainer }, props.onRenderActionButton &&
+                    props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, props.anchorTermInfo, updateTaxonomyTreeView))));
+        }
+        if (!props.selection) {
+            var labelStyles = {
+                root: {
+                    width: "100%",
+                    fontWeight: childIsSelected ? "bold" : "normal",
+                },
+            };
+            var taxonomyItemIconName = groupHeaderProps.group.data.term
+                .isDeprecated
+                ? "Blocked"
+                : "Tag";
+            return (React.createElement(react_1.FocusZone, { direction: react_1.FocusZoneDirection.horizontal, className: TaxonomyTree_module_scss_1.default.taxonomyItemFocusZone },
+                props.showIcons && (React.createElement(react_1.FontIcon, { iconName: taxonomyItemIconName, className: TaxonomyTree_module_scss_1.default.taxonomyItemIcon })),
+                React.createElement(react_1.Label, { styles: labelStyles }, groupHeaderProps.group.name),
+                React.createElement("div", { className: TaxonomyTree_module_scss_1.default.actionButtonContainer }, props.onRenderActionButton &&
+                    props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView))));
+        }
+        var isDisabled = groupHeaderProps.group.data.term.isAvailableForTagging.filter(function (t) { return t.setId === props.termSetInfo.id; })[0].isAvailable === false;
+        var isSelected = props.selection &&
+            props.selection.isKeySelected(groupHeaderProps.group.key);
+        if (props.allowMultipleSelections) {
+            var checkBoxStyles = { root: { flex: "1" } };
+            if (isSelected || childIsSelected) {
+                checkBoxStyles.label = { fontWeight: "bold" };
+            }
+            else {
+                checkBoxStyles.label = { fontWeight: "normal" };
+            }
+            return (React.createElement(react_1.FocusZone, { direction: react_1.FocusZoneDirection.horizontal, className: TaxonomyTree_module_scss_1.default.taxonomyItemFocusZone },
+                React.createElement(react_1.Checkbox, { key: groupHeaderProps.group.key, label: groupHeaderProps.group.name, checked: isSelected, styles: checkBoxStyles, disabled: isDisabled, onRenderLabel: function (p) { return (React.createElement("span", { className: (0, react_1.css)(!isDisabled && TaxonomyTree_module_scss_1.default.checkbox, isDisabled && TaxonomyTree_module_scss_1.default.disabledCheckbox, isSelected && TaxonomyTree_module_scss_1.default.selectedCheckbox), title: p.title }, p.label)); }, onChange: function (ev, checked) {
+                        if (props.selection) {
+                            props.selection.setKeySelected(groupHeaderProps.group.key, checked, false);
+                        }
+                    } }),
+                React.createElement("div", { className: TaxonomyTree_module_scss_1.default.actionButtonContainer }, props.onRenderActionButton &&
+                    props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView))));
+        }
+        else {
+            var choiceGroupOptionStyles = isSelected || childIsSelected
+                ? {
+                    root: { marginTop: 0 },
+                    choiceFieldWrapper: { fontWeight: "bold", flex: "1" },
+                    field: { width: "100%" },
+                }
+                : {
+                    root: { marginTop: 0 },
+                    choiceFieldWrapper: { fontWeight: "normal", flex: "1" },
+                    field: { width: "100%" },
+                };
+            var options = [
+                {
+                    key: groupHeaderProps.group.key,
+                    text: groupHeaderProps.group.name,
+                    styles: choiceGroupOptionStyles,
+                    onRenderLabel: function (p) { return (React.createElement("span", { id: p.labelId, className: (0, react_1.css)(!isDisabled && TaxonomyTree_module_scss_1.default.choiceOption, isDisabled && TaxonomyTree_module_scss_1.default.disabledChoiceOption, isSelected && TaxonomyTree_module_scss_1.default.selectedChoiceOption) }, p.text)); },
+                    onClick: function () {
+                        if (props.selection) {
+                            props.selection.setAllSelected(false);
+                            props.selection.setKeySelected(groupHeaderProps.group.key, true, false);
+                        }
+                    },
+                },
+            ];
+            var choiceGroupStyles = { root: { flex: "1" }, flexContainer: { width: "100%" } };
+            var getSelectedKey = function () {
+                var _a, _b, _c;
+                var selectedItems = (_a = props.selection) === null || _a === void 0 ? void 0 : _a.getSelection();
+                return (_c = (_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null;
+            };
+            return (React.createElement(react_1.FocusZone, { direction: react_1.FocusZoneDirection.horizontal, className: TaxonomyTree_module_scss_1.default.taxonomyItemFocusZone },
+                React.createElement(react_1.ChoiceGroup, { options: options, selectedKey: getSelectedKey(), disabled: isDisabled, styles: choiceGroupStyles }),
+                React.createElement("div", { className: TaxonomyTree_module_scss_1.default.actionButtonContainer }, props.onRenderActionButton &&
+                    props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView))));
+        }
+    };
+    var onRenderHeader = function (headerProps) {
+        var _a;
+        var groupHeaderStyles = {
+            expand: {
+                height: 42,
+                visibility: !headerProps.group.children || headerProps.group.level === 0
+                    ? "hidden"
+                    : "visible",
+                fontSize: 14,
+            },
+            expandIsCollapsed: {
+                visibility: !headerProps.group.children || headerProps.group.level === 0
+                    ? "hidden"
+                    : "visible",
+                fontSize: 14,
+            },
+            check: { display: "none" },
+            headerCount: { display: "none" },
+            groupHeaderContainer: {
+                height: 36,
+                paddingTop: 3,
+                paddingBottom: 3,
+                paddingLeft: 3,
+                paddingRight: 3,
+                alignItems: "center",
+            },
+            root: { height: 42 },
+        };
+        var isDisabled = headerProps.group.data.term &&
+            headerProps.group.data.term.isAvailableForTagging.filter(function (t) { return t.setId === props.termSetInfo.id; })[0].isAvailable === false;
+        return (React.createElement(react_1.GroupHeader, tslib_1.__assign({}, headerProps, { styles: groupHeaderStyles, className: TaxonomyTree_module_scss_1.default.taxonomyItemHeader, onRenderTitle: onRenderTitle, onToggleCollapse: onToggleCollapse, indentWidth: 20, expandButtonProps: {
+                style: { color: (_a = props.themeVariant) === null || _a === void 0 ? void 0 : _a.semanticColors.bodyText },
+            }, onGroupHeaderKeyUp: function (ev, group) {
+                if ((ev.key === " " || ev.key === "Enter") && !isDisabled) {
+                    if (props.allowMultipleSelections) {
+                        if (props.selection) {
+                            props.selection.toggleKeySelected(headerProps.group.key);
+                        }
+                    }
+                    else {
+                        if (props.selection) {
+                            props.selection.setAllSelected(false);
+                            props.selection.setKeySelected(headerProps.group.key, true, false);
+                        }
+                    }
+                }
+            } })));
+    };
+    var onRenderFooter = function (footerProps) {
+        if ((footerProps.group.hasMoreData ||
+            (footerProps.group.children &&
+                footerProps.group.children.length === 0)) &&
+            !footerProps.group.isCollapsed) {
+            if (groupsLoading.some(function (value) { return value === footerProps.group.key; })) {
+                var spinnerStyles = { circle: { verticalAlign: "middle" } };
+                return (React.createElement("div", { className: TaxonomyTree_module_scss_1.default.spinnerContainer },
+                    React.createElement(react_1.Spinner, { styles: spinnerStyles })));
+            }
+            var linkStyles = {
+                root: {
+                    fontSize: "14px",
+                    paddingLeft: (footerProps.groupLevel + 1) * 20 + 62,
+                },
+            };
+            return (React.createElement("div", { className: TaxonomyTree_module_scss_1.default.loadMoreContainer },
+                React.createElement(react_1.Link, { onClick: function () {
+                        setGroupsLoading(function (prevGroupsLoading) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevGroupsLoading, true), [
+                            footerProps.group.key,
+                        ], false); });
+                        props
+                            .onLoadMoreData(sp_core_library_1.Guid.parse(props.termSetInfo.id), footerProps.group.key === props.termSetInfo.id
+                            ? sp_core_library_1.Guid.empty
+                            : sp_core_library_1.Guid.parse(footerProps.group.key), footerProps.group.data.skiptoken, props.hideDeprecatedTerms)
+                            .then(function (loadedTerms) {
+                            var grps = loadedTerms.value.map(function (term) {
+                                var _a;
+                                var termNames = term.labels.filter(function (termLabel) {
+                                    return termLabel.languageTag === props.languageTag &&
+                                        termLabel.isDefault === true;
+                                });
+                                if (termNames.length === 0) {
+                                    termNames = term.labels.filter(function (termLabel) {
+                                        return termLabel.languageTag ===
+                                            props.termStoreInfo.defaultLanguageTag &&
+                                            termLabel.isDefault === true;
+                                    });
+                                }
+                                var g = {
+                                    name: (_a = termNames[0]) === null || _a === void 0 ? void 0 : _a.name,
+                                    key: term.id,
+                                    startIndex: -1,
+                                    count: 50,
+                                    level: footerProps.group.level + 1,
+                                    isCollapsed: true,
+                                    data: { skiptoken: "", term: term },
+                                    hasMoreData: term.childrenCount > 0,
+                                };
+                                if (g.hasMoreData) {
+                                    g.children = [];
+                                }
+                                return g;
+                            });
+                            props.setTerms(function (prevTerms) {
+                                var nonExistingTerms = loadedTerms.value.filter(function (newTerm) {
+                                    return prevTerms.every(function (prevTerm) { return prevTerm.id !== newTerm.id; });
+                                });
+                                return tslib_1.__spreadArray(tslib_1.__spreadArray([], prevTerms, true), nonExistingTerms, true);
+                            });
+                            var nonExistingChildren = grps.filter(function (grp) {
+                                var _a;
+                                return (_a = footerProps.group.children) === null || _a === void 0 ? void 0 : _a.every(function (child) { return child.key !== grp.key; });
+                            });
+                            footerProps.group.children = tslib_1.__spreadArray(tslib_1.__spreadArray([], footerProps.group.children, true), nonExistingChildren, true);
+                            footerProps.group.data.skiptoken = loadedTerms.skiptoken;
+                            footerProps.group.hasMoreData = loadedTerms.skiptoken !== "";
+                            setGroupsLoading(function (prevGroupsLoading) {
+                                return prevGroupsLoading.filter(function (value) { return value !== footerProps.group.key; });
+                            });
+                        })
+                            .catch(function () {
+                            // no-op;
+                        });
+                    }, styles: linkStyles }, strings.ModernTaxonomyPickerLoadMoreText)));
+        }
+        return null;
+    };
+    var onRenderShowAll = function () {
+        return null;
+    };
+    var groupProps = {
+        onRenderFooter: onRenderFooter,
+        onRenderHeader: onRenderHeader,
+        showEmptyGroups: true,
+        onRenderShowAll: onRenderShowAll,
+    };
+    var shouldEnterInnerZone = function (ev) {
+        return ev.which === (0, react_1.getRTLSafeKeyCode)(react_1.KeyCodes.right);
+    };
+    if (!props.termSetInfo && !props.termStoreInfo) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", null,
+        React.createElement(react_1.GroupedList, { items: [], onRenderCell: null, groups: groups, groupProps: groupProps, onShouldVirtualize: function (p) { return false; }, "data-is-focusable": true, focusZoneProps: {
+                direction: react_1.FocusZoneDirection.vertical,
+                shouldEnterInnerZone: shouldEnterInnerZone,
+            } })));
+}
+//# sourceMappingURL=TaxonomyTree.js.map