xmlui 0.10.16 → 0.10.18

package/dist/scripts/src/components/Tree/Tree-icons.spec.js

@@ -0,0 +1,206 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+const testData_1 = require("./testData");
+(0, fixtures_1.test)("default collapsed icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree testId="tree" data='{${JSON.stringify(testData_1.flatTreeData)}}' />
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    yield (0, fixtures_1.expect)(tree.getIconByName("chevronright")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("chevrondown")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("custom iconCollapsed appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree"
+          data='{${JSON.stringify(testData_1.flatTreeData)}}'
+          iconCollapsed="phone"
+          iconExpanded="email"
+        />
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("default expanded icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree"
+          defaultExpanded="all"
+          data='{${JSON.stringify(testData_1.flatTreeData)}}'
+        />
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    yield (0, fixtures_1.expect)(tree.getIconByName("chevrondown")).toBeVisible();
+}));
+(0, fixtures_1.test)("custom iconExpanded appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree"
+          defaultExpanded="all"
+          data='{${JSON.stringify(testData_1.flatTreeData)}}'
+          iconCollapsed="phone"
+          iconExpanded="email"
+        />
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("email")).toHaveCount(2);
+}));
+(0, fixtures_1.test)("both custom icons work together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          id="tree"
+          data='{${JSON.stringify(testData_1.flatTreeData)}}'
+          iconCollapsed="phone"
+          iconExpanded="email"
+        >
+          <property name="itemTemplate">
+            <HStack testId="{$item.id}" verticalAlignment="center">
+              <Icon name="folder" />
+              <Text value="{$item.name}" />
+            </HStack>
+          </property>
+        </Tree>
+        <Button testId="expand1" onClick="tree.expandNode(1)">Expand Node 1</Button>
+        <Button testId="expand2" onClick="tree.collapseNode(1)">Collapse Node 2</Button>
+      </VStack>
+
+    `);
+    const tree = yield createTreeDriver("tree");
+    yield (0, fixtures_1.expect)(tree.component).toBeVisible();
+    // Initially should show collapsed icon
+    yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("email")).not.toBeVisible();
+    // Expand the first node
+    yield page.getByTestId("expand1").click();
+    // Should now show expanded icon and hide collapsed icon
+    yield (0, fixtures_1.expect)(tree.getIconsByName("email")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
+    // Collapse again
+    yield page.getByTestId("expand2").click();
+    // Should show collapsed icon again
+    yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("email")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("iconExpanded fields are used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree" 
+          id="tree"
+          defaultExpanded="first-level"
+          data='{${JSON.stringify(testData_1.flatTreeDataWithIcons1)}}' />
+        <Button testId="expand1" onClick="tree.expandNode(2)">Expand Node 2</Button>
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    // --- Initila state
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(1);
+    yield page.getByTestId("expand1").click();
+    // --- After expanding node 2
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(0);
+}));
+(0, fixtures_1.test)("iconExpanded fields (with alias) are used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTreeDriver, }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree" 
+          id="tree"
+          iconExpandedField="iconExp"
+          defaultExpanded="first-level"
+          data='{${JSON.stringify(testData_1.flatTreeDataWithIconsAndAlias1)}}' />
+        <Button testId="expand1" onClick="tree.expandNode(2)">Expand Node 2</Button>
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    // --- Initila state
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(1);
+    yield page.getByTestId("expand1").click();
+    // --- After expanding node 2
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(0);
+}));
+(0, fixtures_1.test)("iconCollapsed fields are used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree" 
+          id="tree"
+          defaultExpanded="none"
+          data='{${JSON.stringify(testData_1.flatTreeDataWithIcons2)}}' />
+        <Button testId="expand1" onClick="tree.expandNode(1)">Expand Node 1</Button>
+        <Button testId="expand2" onClick="tree.expandNode(2)">Expand Node 2</Button>
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    // --- Initila state
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(0);
+    yield page.getByTestId("expand1").click();
+    // --- After expanding node 1
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevrondown")).toHaveCount(1);
+    yield page.getByTestId("expand2").click();
+    // --- After expanding node 2
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevrondown")).toHaveCount(2);
+}));
+(0, fixtures_1.test)("iconCollapsed fields (with alias) are used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTreeDriver }) {
+    yield initTestBed(`
+      <VStack height="400px">
+        <Tree 
+          testId="tree" 
+          id="tree"
+          iconCollapsedField="iconColl"
+          defaultExpanded="none"
+          data='{${JSON.stringify(testData_1.flatTreeDataWithIcons2)}}' />
+        <Button testId="expand1" onClick="tree.expandNode(1)">Expand Node 1</Button>
+        <Button testId="expand2" onClick="tree.expandNode(2)">Expand Node 2</Button>
+      </VStack>
+    `);
+    const tree = yield createTreeDriver("tree");
+    // --- Initila state
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(0);
+    yield page.getByTestId("expand1").click();
+    // --- After expanding node 1
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevrondown")).toHaveCount(1);
+    yield page.getByTestId("expand2").click();
+    // --- After expanding node 2
+    yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(tree.getIconsByName("chevrondown")).toHaveCount(2);
+}));

package/dist/scripts/src/components/Tree/Tree.spec.js

@@ -1232,7 +1232,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield (0, fixtures_1.expect)(tree.getNodeWrapperByTestId("1")).toBeVisible();
             // Focus the tree and navigate to an item
             yield tree.component.focus();
-            yield page.keyboard.press("ArrowDown");
+            yield page.keyboard.press("ArrowDown", { delay: 100 });
             // Test focused item has all custom theme variables applied
             const focusedItem = tree.getNodeWrapperByTestId("2");
             yield (0, fixtures_1.expect)(focusedItem).toHaveClass(/focused/);
@@ -2837,96 +2837,3 @@ fixtures_1.test.describe("Edge Cases", () => {
         yield (0, fixtures_1.expect)(tree.component).toBeVisible();
     }));
 });
-fixtures_1.test.describe("icon props", () => {
-    (0, fixtures_1.test)("default collapsed icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" data='{${JSON.stringify(testData_1.flatTreeData)}}' />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.getIconByName("chevronright")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconByName("chevrondown")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("custom iconCollapsed appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree 
-          testId="tree"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'
-          iconCollapsed="phone"
-          iconExpanded="email"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.getIconByName("phone")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconByName("email")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("default expanded icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree 
-          testId="tree"
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.getIconByName("chevrondown")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("custom iconExpanded appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree 
-          testId="tree"
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'
-          iconCollapsed="phone"
-          iconExpanded="email"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.getIconByName("phone")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconsByName("email")).toHaveCount(2);
-    }));
-    (0, fixtures_1.test)("both custom icons work together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree 
-          id="tree"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'
-          iconCollapsed="phone"
-          iconExpanded="email"
-        >
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}" verticalAlignment="center">
-              <Icon name="folder" />
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-        <Button testId="expand1" onClick="tree.expandNode(1)">Expand Node 1</Button>
-        <Button testId="expand2" onClick="tree.collapseNode(1)">Collapse Node 2</Button>
-      </VStack>
-
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Initially should show collapsed icon
-        yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconsByName("email")).not.toBeVisible();
-        // Expand the first node
-        yield page.getByTestId("expand1").click();
-        // Should now show expanded icon and hide collapsed icon
-        yield (0, fixtures_1.expect)(tree.getIconsByName("email")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
-        // Collapse again
-        yield page.getByTestId("expand2").click();
-        // Should show collapsed icon again
-        yield (0, fixtures_1.expect)(tree.getIconsByName("phone")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getIconsByName("email")).not.toBeVisible();
-    }));
-});

package/dist/scripts/src/components/Tree/TreeComponent.js

@@ -137,8 +137,8 @@ exports.TreeMd = (0, metadata_helpers_1.createMetadata)({
             signature: `(node: FlatTreeNode) => void`,
         },
         loadChildren: {
-            description: `Fired when a tree node needs to load children dynamically. Should return a Promise that resolves to an array of child data.`,
-            signature: `(node: FlatTreeNode) => Promise<any[]>`,
+            description: `Fired when a tree node needs to load children dynamically. Should return an array of child data.`,
+            signature: `(node: FlatTreeNode) => any[]`,
         },
     },
     apis: {
@@ -159,21 +159,21 @@ exports.TreeMd = (0, metadata_helpers_1.createMetadata)({
         },
         expandNode: {
             description: `Expand a specific node by its source data ID.`,
-            signature: "expandNode(nodeId: string): void",
+            signature: "expandNode(nodeId: string | number): void",
             parameters: {
                 nodeId: "The ID of the node to expand (source data format)",
             },
         },
         collapseNode: {
             description: `Collapse a specific node by its source data ID.`,
-            signature: "collapseNode(nodeId: string): void",
+            signature: "collapseNode(nodeId: string | number): void",
             parameters: {
                 nodeId: "The ID of the node to collapse (source data format)",
             },
         },
         selectNode: {
             description: `Programmatically select a node by its source data ID.`,
-            signature: "selectNode(nodeId: string): void",
+            signature: "selectNode(nodeId: string | number): void",
             parameters: {
                 nodeId: "The ID of the node to select (source data format)",
             },
@@ -184,19 +184,34 @@ exports.TreeMd = (0, metadata_helpers_1.createMetadata)({
         },
         getNodeById: {
             description: `Get a tree node by its source data ID.`,
-            signature: "getNodeById(nodeId: string): TreeNode | null",
+            signature: "getNodeById(nodeId: string | number): TreeNode | null",
             parameters: {
                 nodeId: "The ID of the node to retrieve (source data format)",
             },
         },
         getExpandedNodes: {
             description: `Get an array of currently expanded node IDs in source data format.`,
-            signature: "getExpandedNodes(): string[]",
+            signature: "getExpandedNodes(): (string | number)[]",
         },
         getSelectedNode: {
             description: `Get the currently selected tree node.`,
             signature: "getSelectedNode(): TreeNode | null",
         },
+        scrollIntoView: {
+            description: `Scroll to a specific node and expand parent nodes as needed to make it visible.`,
+            signature: "scrollIntoView(nodeId: string | number, options?: ScrollIntoViewOptions): void",
+            parameters: {
+                nodeId: "The ID of the node to scroll to (source data format)",
+                options: "Optional scroll options",
+            },
+        },
+        scrollToItem: {
+            description: `Scroll to a specific node if it's currently visible in the tree.`,
+            signature: "scrollToItem(nodeId: string | number): void",
+            parameters: {
+                nodeId: "The ID of the node to scroll to (source data format)",
+            },
+        },
         appendNode: {
             description: `Add a new node to the tree as a child of the specified parent node.`,
             signature: "appendNode(parentNodeId: string | number | null, nodeData: any): void",
@@ -235,6 +250,27 @@ exports.TreeMd = (0, metadata_helpers_1.createMetadata)({
                 nodeData: "The node data object using the format specified in dataFormat and field properties",
             },
         },
+        getNodeLoadingState: {
+            description: `Get the loading state of a dynamic node.`,
+            signature: "getNodeLoadingState(nodeId: string | number): NodeLoadingState",
+            parameters: {
+                nodeId: "The ID of the node to check loading state for",
+            },
+        },
+        markNodeLoaded: {
+            description: `Mark a dynamic node as loaded.`,
+            signature: "markNodeLoaded(nodeId: string | number): void",
+            parameters: {
+                nodeId: "The ID of the node to mark as loaded",
+            },
+        },
+        markNodeUnloaded: {
+            description: `Mark a dynamic node as unloaded and collapse it.`,
+            signature: "markNodeUnloaded(nodeId: string | number): void",
+            parameters: {
+                nodeId: "The ID of the node to mark as unloaded",
+            },
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TreeComponent_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -263,6 +299,7 @@ exports.treeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, e
         type: "HStack",
         props: {
             verticalAlignment: "center",
+            gap: "$space-4"
         },
         children: [
             {