@fluid-topics/ft-tree-list 1.3.13 → 1.3.15

package/build/ftds-tree-list.d.ts

@@ -11,7 +11,7 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
     static styles: import("lit").CSSResult;
     data?: FtTreeListData;
     label: string;
-    pageSize?: number;
+    pageSize: number;
     selectedNode?: FtTreeNode;
     expandLabel: string;
     collapseLabel: string;
@@ -31,6 +31,7 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
     getItemSelector(item: FtTreeNode): HTMLElement;
     isNodeExpanded(node: FtTreeNode): boolean;
     setFocusToTreeItem(item: FtTreeNode): void;
+    selectNodeByBreadcrumb(breadcrumb: string[]): Promise<void>;
     protected render(): TemplateResult<1>;
     protected renderNode(node: FtTreeNode): unknown;
     protected renderChildNodes(isNodeExpanded: boolean, visibleChildren: FtTreeNode[], node: FtTreeNode, childrenClasses: {
@@ -61,5 +62,7 @@ export declare class FtdsTreeList extends FtLitElement implements FtdsTreeListPr
     protected hasExpandableChildren(node: FtTreeNode): boolean;
     protected hasChildren(node: FtTreeNode): boolean;
     protected loadMore(node: FtTreeNode): void;
-    protected selectNode(e: MouseEvent | KeyboardEvent, node: FtTreeNode): void;
+    protected displayChild(currentNode: FtTreeNode, childValue: string): FtTreeNode;
+    protected handleNodeSelectEvent(e: MouseEvent | KeyboardEvent, node: FtTreeNode): void;
+    protected selectNode(node: FtTreeNode): void;
 }

package/build/ftds-tree-list.js

@@ -10,7 +10,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { classMap } from "lit/directives/class-map.js";
-import { DesignSystemFamily, FtLitElement, hasChanged, jsonProperty } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemFamily, FtLitElement, hasChanged, jsonProperty, numberProperty } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
 import { FtdsButton } from "@fluid-topics/ft-button";
@@ -26,6 +26,7 @@ class FtdsTreeList extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
+        this.pageSize = 10;
         this.expandLabel = "Expand";
         this.collapseLabel = "Collapse";
         this.showMoreLabel = "Show more";
@@ -62,6 +63,14 @@ class FtdsTreeList extends FtLitElement {
         itemEl === null || itemEl === void 0 ? void 0 : itemEl.focus();
         itemEl === null || itemEl === void 0 ? void 0 : itemEl.setAttribute("tabindex", "0");
     }
+    async selectNodeByBreadcrumb(breadcrumb) {
+        let currentNode = this.data.rootNodes.find(root => root.value === breadcrumb[0]);
+        for (let i = 0; i < breadcrumb.length - 1; i++) {
+            currentNode = this.displayChild(currentNode, breadcrumb[i + 1]);
+        }
+        await this.updateComplete;
+        this.selectNode(currentNode);
+    }
     render() {
         var _a;
         const atLeastOneRootNodeIsExpandable = this.data && this.data.rootNodes && this.data.rootNodes.length > 0
@@ -130,7 +139,7 @@ class FtdsTreeList extends FtLitElement {
                                 @click="${() => this.expandNode(!isNodeExpanded, node.value)}"
                             ></ft-icon>
                         `)}
-                    <div class="node-label-container" @click=${(e) => this.selectNode(e, node)}>
+                    <div class="node-label-container" @click=${(e) => this.handleNodeSelectEvent(e, node)}>
                         <ft-typography
                             part="node-label"
                             variant="${FtTypographyVariants.body2medium}"
@@ -224,7 +233,7 @@ class FtdsTreeList extends FtLitElement {
                         this.loadMore(parentNode);
                     }
                     else {
-                        this.selectNode(event, currentNode);
+                        this.handleNodeSelectEvent(event, currentNode);
                     }
                     needToStopPropagation = true;
                     break;
@@ -409,23 +418,27 @@ class FtdsTreeList extends FtLitElement {
             this.setFocusToTreeItem(node.children[prevLoadedCount]);
         }
     }
-    selectNode(e, node) {
+    displayChild(currentNode, childValue) {
         var _a;
+        this.expandNode(true, currentNode.value);
+        const childIndex = currentNode.children.findIndex((child => child.value === childValue));
+        currentNode.loadedCount = Math.max((_a = currentNode.loadedCount) !== null && _a !== void 0 ? _a : this.pageSize, childIndex + 1);
+        return currentNode.children[childIndex];
+    }
+    handleNodeSelectEvent(e, node) {
         e.preventDefault();
+        this.selectNode(node);
+        e.stopPropagation();
+    }
+    selectNode(node) {
+        var _a, _b;
         const oldNode = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("[aria-selected]");
         oldNode === null || oldNode === void 0 ? void 0 : oldNode.removeAttribute("aria-selected");
-        const currentTarget = e.currentTarget;
-        if (e.type === "click") {
-            const item = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.parentElement;
-            item === null || item === void 0 ? void 0 : item.setAttribute("aria-selected", "true");
-        }
-        else if (e.type === "keydown") {
-            currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.setAttribute("aria-selected", "true");
-        }
+        const nodeContainer = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`[data-value="${node.value}"]`);
+        nodeContainer.setAttribute("aria-selected", "true");
         this.selectedNode = node;
         this.dispatchEvent(new NodeSelectedEvent(node));
         this.setFocusToTreeItem(node);
-        e.stopPropagation();
     }
 }
 FtdsTreeList.elementDefinitions = {
@@ -441,7 +454,7 @@ __decorate([
     property()
 ], FtdsTreeList.prototype, "label", void 0);
 __decorate([
-    property()
+    numberProperty()
 ], FtdsTreeList.prototype, "pageSize", void 0);
 __decorate([
     property()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-tree-list",
-    "version": "1.3.13",
+    "version": "1.3.15",
     "description": "A tree list component",
     "keywords": [
         "Lit"
@@ -20,12 +20,12 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "0.1.100",
-        "@fluid-topics/ft-assets": "1.3.13",
-        "@fluid-topics/ft-wc-utils": "1.3.13",
+        "@fluid-topics/ft-assets": "1.3.15",
+        "@fluid-topics/ft-wc-utils": "1.3.15",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.13"
+        "@fluid-topics/ft-wc-test-utils": "1.3.15"
     },
-    "gitHead": "3f7e281a9fee6f1df464e79064f917e1feec3253"
+    "gitHead": "5aa2861244264a93f9ce941c3541191eb22a4650"
 }