@fluid-topics/ft-tree-list 1.3.45 → 1.3.46

package/build/ftds-tree-list.js

@@ -11,7 +11,7 @@ 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, numberProperty } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
 import { FtdsButton } from "@fluid-topics/ft-button";
 import { styles } from "./ftds-tree-list.styles";
@@ -55,8 +55,8 @@ class FtdsTreeList extends FtLitElement {
         return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-value="${item.value}"]`);
     }
     isNodeExpanded(node) {
-        return (!this.userClosedNodes.has(node.value) &&
-            (node.expanded || this.userOpenedNodes.has(node.value)));
+        return (!this.userClosedNodes.has(node.value)
+            && (node.expanded || this.userOpenedNodes.has(node.value)));
     }
     setFocusToTreeItem(item) {
         var _a, _b;
@@ -66,7 +66,7 @@ class FtdsTreeList extends FtLitElement {
         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]);
+        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]);
         }
@@ -86,9 +86,9 @@ class FtdsTreeList extends FtLitElement {
                             tooltipposition="bottom"
                             part="expand-button"
                             family="${DesignSystemFamily.neutral}"
-                            icon=${FtIcons.ICON_COLLAPSE}
+                            icon="${FtIcons.ICON_COLLAPSE}"
                             label="${this.collapseAllLabel}"
-                            @click="${() => this.collapseAll()}"
+                            @click=${() => this.collapseAll()}
                         >
                             ${this.collapseAllLabel}
                         </ftds-button>
@@ -117,7 +117,7 @@ class FtdsTreeList extends FtLitElement {
             50, 45, 30, 35, 25,
             44, 35, 27, 42, 25,
             47, 30, 29, 45, 49,
-        ].map(width => html `
+        ].map((width) => html `
             <li>
                 <div class="ft-tree-list--item">
                     <ft-skeleton style="--ft-skeleton--width: ${width}%"></ft-skeleton>
@@ -129,23 +129,23 @@ class FtdsTreeList extends FtLitElement {
     renderLeftHeader() {
         if (this.loading) {
             return html `
-            <div class="header-left">
-                <ft-typography class="header-label" variant="${FtTypographyVariants.body1semibold}">
-                    ${this.label}
-                </ft-typography>
-                <ft-skeleton class="node-count-loader"></ft-skeleton>
-            </div>
-        `;
+                <div class="header-left">
+                    <ftds-typography class="header-label" variant="${FtdsTypographyVariants.body1semibold}">
+                        ${this.label}
+                    </ftds-typography>
+                    <ft-skeleton class="node-count-loader"></ft-skeleton>
+                </div>
+            `;
         }
         else {
             return html `
-                    <ft-typography class="header-label" variant="${FtTypographyVariants.body1semibold}">
-                        ${this.label}
-                        <ft-typography variant="${FtTypographyVariants.body2medium}" class="node-children-count">
-                                (${this.getEntriesCount()})
-                        </ft-typography>
-                    </ft-typography>
-                `;
+                <ftds-typography class="header-label" variant="${FtdsTypographyVariants.body1semibold}">
+                    ${this.label}
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="node-children-count">
+                            (${this.getEntriesCount()})
+                    </ftds-typography>
+                </ftds-typography>
+            `;
         }
     }
     renderNode(node) {
@@ -160,7 +160,7 @@ class FtdsTreeList extends FtLitElement {
             expanded: isNodeExpanded,
             collapsed: isNodeExpanded,
             "with-expandable": this.hasExpandableChildren(node),
-            "with-children": this.hasChildren(node)
+            "with-children": this.hasChildren(node),
         };
         return html `
             <li role="none">
@@ -171,26 +171,26 @@ class FtdsTreeList extends FtLitElement {
                     aria-expanded="${ifDefined(isNodeExpanded)}"
                     class="ft-tree-list--item ${classMap(childrenClasses)}"
                     tabindex="-1"
-                    @keydown="${(e) => this.onKeydown(e, node, false)}"
+                    @keydown=${(e) => this.onKeydown(e, node, false)}
                 >
                     ${when(this.hasChildren(node), () => html `
                             <ft-icon
                                 part="node-expand"
-                                value=${isNodeExpanded ? FtIcons.THIN_ARROW : FtIcons.THIN_ARROW_RIGHT}
-                                @click="${() => this.expandNode(!isNodeExpanded, node.value)}"
+                                value="${isNodeExpanded ? FtIcons.THIN_ARROW : FtIcons.THIN_ARROW_RIGHT}"
+                                @click=${() => this.expandNode(!isNodeExpanded, node.value)}
                             ></ft-icon>
                         `)}
                     <div class="node-label-container" @click=${(e) => this.handleNodeSelectEvent(e, node)}>
-                        <ft-typography
+                        <ftds-typography
                             part="node-label"
-                            variant="${FtTypographyVariants.body2medium}"
+                            variant="${FtdsTypographyVariants.body2medium}"
                         >
                             ${node.label}
-                        </ft-typography>
+                        </ftds-typography>
                         ${when(this.hasChildren(node), () => html `
-                            <ft-typography variant="${FtTypographyVariants.body2medium}" class="node-children-count">
+                            <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="node-children-count">
                                     (${this.getChildrenCount(node)})
-                            </ft-typography>
+                            </ftds-typography>
                         `)}
                     </div>
                 </a>
@@ -218,15 +218,15 @@ class FtdsTreeList extends FtLitElement {
                    tabindex="-1"
                    aria-expanded="false"
                    class="ft-tree-list--item ${classMap(childrenClasses)}"
-                   @click="${() => this.loadMore(node)}"
-                   @keydown="${(e) => this.onKeydown(e, createLoadMoreNode(node), true, node)}">
-                    <ft-icon value=${FtIcons.ARROW_DOWN}></ft-icon>
-                    <ft-typography
+                   @click=${() => this.loadMore(node)}
+                   @keydown=${(e) => this.onKeydown(e, createLoadMoreNode(node), true, node)}>
+                    <ft-icon value="${FtIcons.ARROW_DOWN}"></ft-icon>
+                    <ftds-typography
                         part="node-label"
-                        variant="${FtTypographyVariants.body2medium}"
+                        variant="${FtdsTypographyVariants.body2medium}"
                     >
                         ${this.loadMoreLabel}
-                    </ft-typography>
+                    </ftds-typography>
                 </a>
             </li>
         `;
@@ -247,9 +247,9 @@ class FtdsTreeList extends FtLitElement {
         }
         if (typeof this.emptyState.title === "string") {
             return html `
-                <ft-typography class="empty-state--title" variant="${FtTypographyVariants.body1medium}">
+                <ftds-typography class="empty-state--title" variant="${FtdsTypographyVariants.body1medium}">
                     ${this.emptyState.title}
-                </ft-typography>`;
+                </ftds-typography>`;
         }
         else {
             return this.emptyState.title;
@@ -264,10 +264,10 @@ class FtdsTreeList extends FtLitElement {
             this.emptyState.description = [this.emptyState.description];
         }
         if (this.emptyState.description instanceof Array) {
-            const labels = this.emptyState.description.map(label => html `
-                <ft-typography variant="${FtTypographyVariants.body1medium}">
+            const labels = this.emptyState.description.map((label) => html `
+                <ftds-typography variant="${FtdsTypographyVariants.body1medium}">
                     ${label}
-                </ft-typography>`);
+                </ftds-typography>`);
             return html `
                 <div class="empty-state--description">${labels}</div>`;
         }
@@ -293,12 +293,12 @@ class FtdsTreeList extends FtLitElement {
         let needToStopPropagation = false;
         const tree = this.data.rootNodes;
         const visibleItems = this.getAdjacentVisibleTreeItems(tree, currentNode);
-        let currentNodeIndex = visibleItems.findIndex(node => node.value === currentNode.value);
+        const currentNodeIndex = visibleItems.findIndex((node) => node.value === currentNode.value);
         if (event.shiftKey && (event.key === " " || event.key === "Space")) {
             event.stopPropagation();
         }
         else {
-            let nodeExpanded = this.isNodeExpanded(currentNode);
+            const nodeExpanded = this.isNodeExpanded(currentNode);
             switch (event.key) {
                 case "Enter":
                 case " ":
@@ -335,9 +335,9 @@ class FtdsTreeList extends FtLitElement {
                         this.expandNode(!nodeExpanded, currentNode.value);
                     }
                     else {
-                        let breadcrumb = getPathToNode(tree, currentNode.value);
+                        const breadcrumb = getPathToNode(tree, currentNode.value);
                         if (breadcrumb && breadcrumb.length > 1) {
-                            let parent = breadcrumb[breadcrumb.length - 2];
+                            const parent = breadcrumb[breadcrumb.length - 2];
                             this.setFocusToTreeItem(parent);
                         }
                     }
@@ -352,9 +352,9 @@ class FtdsTreeList extends FtLitElement {
                     needToStopPropagation = true;
                     break;
                 case "*":
-                    let breadcrumb = getPathToNode(tree, currentNode.value);
+                    const breadcrumb = getPathToNode(tree, currentNode.value);
                     if (breadcrumb && breadcrumb.length > 1) {
-                        let siblings = breadcrumb[breadcrumb.length - 2].children;
+                        const siblings = breadcrumb[breadcrumb.length - 2].children;
                         for (const node of siblings) {
                             this.expandNode(true, node.value);
                         }
@@ -415,11 +415,11 @@ class FtdsTreeList extends FtLitElement {
                 return false;
             }
         }
-        let pathToNode = getPathToNode(tree, treeitem.value);
+        const pathToNode = getPathToNode(tree, treeitem.value);
         if (pathToNode && pathToNode.length > 1) {
             const parentNode = pathToNode[(pathToNode === null || pathToNode === void 0 ? void 0 : pathToNode.length) - 2];
             const parentItem = this.getItemSelector(parentNode);
-            const childIndex = parentNode.children.findIndex((child => child.value === treeitem.value));
+            const childIndex = parentNode.children.findIndex((child) => child.value === treeitem.value);
             if (!parentItem || parentItem.getAttribute("aria-expanded") === "false" || childIndex >= ((_b = parentNode.loadedCount) !== null && _b !== void 0 ? _b : Infinity)) {
                 return false;
             }
@@ -457,7 +457,7 @@ class FtdsTreeList extends FtLitElement {
         if (node.children.length !== 0) {
             return [
                 ...(node.expanded ? [] : [node.value]),
-                ...node.children.flatMap((c) => this.getAllClosedNodes(c))
+                ...node.children.flatMap((c) => this.getAllClosedNodes(c)),
             ];
         }
         else {
@@ -495,7 +495,7 @@ class FtdsTreeList extends FtLitElement {
     displayChild(currentNode, childValue) {
         var _a;
         this.expandNode(true, currentNode.value);
-        const childIndex = currentNode.children.findIndex((child => child.value === childValue));
+        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];
     }
@@ -516,7 +516,7 @@ class FtdsTreeList extends FtLitElement {
     }
 }
 FtdsTreeList.elementDefinitions = {
-    "ft-typography": FtTypography,
+    "ftds-typography": FtdsTypography,
     "ftds-button": FtdsButton,
     "ft-icon": FtIcon,
     "ft-skeleton": FtSkeleton,

package/build/ftds-tree-list.styles.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
 import { foundation, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtTypographyCssVariables, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsTypographyBody2SemiboldCssVariables } from "@fluid-topics/ft-typography";
 import { treeList } from "@fluid-topics/design-system-variables";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon";
 export { treeList as FtdsTreeListCssVariables } from "@fluid-topics/design-system-variables";
@@ -126,7 +126,7 @@ export const styles = css `
     }
 
     /* Selected Node */
-    li > a[role="treeitem"][aria-selected=true] ft-typography[part="node-label"] {
+    li > a[role="treeitem"][aria-selected=true] ftds-typography[part="node-label"] {
         color: ${treeList.nodeSelectedLabelColor};
     }
 
@@ -140,7 +140,7 @@ export const styles = css `
     }
 
     /* Descendent of selected Node */
-    li > a[role="treeitem"][aria-selected=true] + ul a ft-typography[part="node-label"] {
+    li > a[role="treeitem"][aria-selected=true] + ul a ftds-typography[part="node-label"] {
         color: ${treeList.nodeDescendantOfSelectedLabelColor};
     }
 
@@ -165,7 +165,7 @@ export const styles = css `
     }
 
     [part="load-more"] [part="node-label"],
-    li > a[role="treeitem"][aria-selected=true] + ul a[part="load-more"] ft-typography[part="node-label"] {
+    li > a[role="treeitem"][aria-selected=true] + ul a[part="load-more"] ftds-typography[part="node-label"] {
         color: ${treeList.loadMoreLabelColor};
         margin-left: ${treeList.loadMoreLabelMarginLeft};
     }
@@ -205,20 +205,19 @@ export const styles = css `
         align-items: baseline;
     }
 
-    ft-typography[part="node-label"] {
+    ftds-typography[part="node-label"] {
         height: 100%;
         white-space: nowrap;
         color: ${treeList.nodeUnselectedLabelColor};
         margin-right: ${treeList.nodeParentLabelMarginRight};
     }
 
-    li a[role="treeitem"].with-children > .node-label-container > ft-typography[part="node-label"] {
+    li a[role="treeitem"].with-children > .node-label-container > ftds-typography[part="node-label"] {
         margin-left: ${treeList.nodeParentLabelMarginLeft};
     }
 
-    li > a[aria-selected=true] > ft-typography[part="node-label"] {
-        ${setVariable(FtTypographyCssVariables.fontFamily, FtTypographyVariants.body2semibold)};
-        ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
+    li > a[aria-selected=true] > ftds-typography[part="node-label"] {
+        ${setVariable(FtdsTypographyBody2SemiboldCssVariables.fontWeight, "bold")};
     }
 
     .node-children-count {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-tree-list",
-    "version": "1.3.45",
+    "version": "1.3.46",
     "description": "A tree list component",
     "keywords": [
         "Lit"
@@ -20,16 +20,16 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "2.53.1",
-        "@fluid-topics/ft-assets": "1.3.45",
-        "@fluid-topics/ft-button": "1.3.45",
-        "@fluid-topics/ft-icon": "1.3.45",
-        "@fluid-topics/ft-skeleton": "1.3.45",
-        "@fluid-topics/ft-typography": "1.3.45",
-        "@fluid-topics/ft-wc-utils": "1.3.45",
+        "@fluid-topics/ft-assets": "1.3.46",
+        "@fluid-topics/ft-button": "1.3.46",
+        "@fluid-topics/ft-icon": "1.3.46",
+        "@fluid-topics/ft-skeleton": "1.3.46",
+        "@fluid-topics/ft-typography": "1.3.46",
+        "@fluid-topics/ft-wc-utils": "1.3.46",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.45"
+        "@fluid-topics/ft-wc-test-utils": "1.3.46"
     },
-    "gitHead": "3fd3d1375535575f012653afcbcb81dc3c25b7c7"
+    "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
 }