[WC-3190] fix treenode showing infinite load and change hasChildren to expression

packages/pluggableWidgets/tree-node-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We changed `hasChildren` configuration from boolean to expression.
+
+### Fixed
+
+- We fixed an issue where Tree Nodes showing loading spinner when children can't be found while `hasChildren` property configured to `true`.
+
 ## [3.6.0] - 2025-10-01
 
 ### Changed

packages/pluggableWidgets/tree-node-web/src/TreeNode.editorPreview.tsx

@@ -1,5 +1,5 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { mapPreviewIconToWebIcon } from "@mendix/widget-plugin-platform/preview/map-icon";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { GUID } from "mendix";
 import { ReactElement } from "react";
 import { TreeNodePreviewProps } from "../typings/TreeNodeProps";
@@ -32,10 +32,10 @@ export function preview(props: TreeNodePreviewProps): ReactElement | null {
                         <props.children.renderer caption="Place other tree nodes here.">
                             <div />
                         </props.children.renderer>
-                    )
+                    ),
+                    isUserDefinedLeafNode: !props.hasChildren
                 }
             ]}
-            isUserDefinedLeafNode={!props.hasChildren}
             startExpanded
             showCustomIcon={Boolean(props.expandedIcon) || Boolean(props.collapsedIcon)}
             iconPlacement={props.showIcon}

packages/pluggableWidgets/tree-node-web/src/TreeNode.tsx

@@ -8,7 +8,8 @@
         id: item.id,
         headerContent:
             props.headerType === "text" ? props.headerCaption?.get(item).value : props.headerContent?.get(item),
-        bodyContent: props.children?.get(item)
+        bodyContent: props.children?.get(item),
+        isUserDefinedLeafNode: props.hasChildren?.get(item).value === false
     };
 }
 
@@ -27,7 +28,7 @@
                 setTreeNodeItems([]);
             }
         }
     }, [datasource.status, datasource.items]);
     const expandedIcon = props.expandedIcon?.status === ValueStatus.Available ? props.expandedIcon.value : undefined;
     const collapsedIcon = props.collapsedIcon?.status === ValueStatus.Available ? props.collapsedIcon.value : undefined;
 
@@ -36,7 +37,6 @@
             class={props.class}
             style={props.style}
             items={treeNodeItems}
-            isUserDefinedLeafNode={!props.hasChildren}
             startExpanded={props.startExpanded}
             showCustomIcon={Boolean(props.expandedIcon) || Boolean(props.collapsedIcon)}
             iconPlacement={props.showIcon}

packages/pluggableWidgets/tree-node-web/src/TreeNode.xml

@@ -40,9 +40,10 @@
                     <caption>Header caption</caption>
                     <description />
                 </property>
-                <property key="hasChildren" type="boolean" defaultValue="true">
+                <property key="hasChildren" type="expression" dataSource="datasource">
                     <caption>Has children</caption>
                     <description>Indicate whether the node has children or is an end node. When set to yes, a composable region becomes available to define the child nodes.</description>
+                    <returnType type="Boolean" />
                 </property>
                 <property key="startExpanded" type="boolean" defaultValue="false">
                     <caption>Start expanded</caption>

packages/pluggableWidgets/tree-node-web/src/components/TreeNode.tsx

@@ -13,13 +13,13 @@ import { TreeNodeBranchContext, useInformParentContextOfChildNodes } from "./Tre
 export interface TreeNodeItem extends ObjectItem {
     headerContent: ReactNode;
     bodyContent: ReactNode;
+    isUserDefinedLeafNode: boolean;
 }
 
 export interface TreeNodeProps extends Pick<TreeNodeContainerProps, "tabIndex"> {
     class: string;
     style?: CSSProperties;
     items: TreeNodeItem[] | null;
-    isUserDefinedLeafNode: TreeNodeBranchProps["isUserDefinedLeafNode"];
     startExpanded: TreeNodeBranchProps["startExpanded"];
     showCustomIcon: boolean;
     iconPlacement: TreeNodeBranchProps["iconPlacement"];
@@ -34,7 +34,6 @@ export function TreeNode({
     class: className,
     items,
     style,
-    isUserDefinedLeafNode,
     showCustomIcon,
     startExpanded,
     iconPlacement,
@@ -79,22 +78,25 @@ export function TreeNode({
             data-focusindex={tabIndex || 0}
             role={level === 0 ? "tree" : "group"}
         >
-            {items.map(({ id, headerContent, bodyContent }) => (
-                <TreeNodeBranch
-                    key={id}
-                    id={id}
-                    headerContent={headerContent}
-                    isUserDefinedLeafNode={isUserDefinedLeafNode}
-                    startExpanded={startExpanded}
-                    iconPlacement={iconPlacement}
-                    renderHeaderIcon={renderHeaderIconCallback}
-                    changeFocus={changeTreeNodeBranchHeaderFocus}
-                    animateTreeNodeContent={animateTreeNodeContent}
-                    openNodeOn={openNodeOn}
-                >
-                    {bodyContent}
-                </TreeNodeBranch>
-            ))}
+            {items.map(item => {
+                const { id, headerContent, bodyContent, isUserDefinedLeafNode } = item;
+                return (
+                    <TreeNodeBranch
+                        key={id}
+                        id={id}
+                        headerContent={headerContent}
+                        isUserDefinedLeafNode={isUserDefinedLeafNode}
+                        startExpanded={startExpanded}
+                        iconPlacement={iconPlacement}
+                        renderHeaderIcon={renderHeaderIconCallback}
+                        changeFocus={changeTreeNodeBranchHeaderFocus}
+                        animateTreeNodeContent={animateTreeNodeContent}
+                        openNodeOn={openNodeOn}
+                    >
+                        {bodyContent}
+                    </TreeNodeBranch>
+                );
+            })}
         </ul>
     );
 }

packages/pluggableWidgets/tree-node-web/src/components/hooks/lazyLoading.ts

@@ -10,8 +10,8 @@
     hasNestedTreeNode: () => boolean;
 } => {
     const hasNestedTreeNode = useCallback(
-        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? true,
+        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? false,
         []
     );
 
     return { hasNestedTreeNode };

packages/pluggableWidgets/tree-node-web/typings/TreeNodeProps.d.ts

@@ -23,7 +23,7 @@ export interface TreeNodeContainerProps {
     openNodeOn: OpenNodeOnEnum;
     headerContent?: ListWidgetValue;
     headerCaption?: ListExpressionValue<string>;
-    hasChildren: boolean;
+    hasChildren: ListExpressionValue<boolean>;
     startExpanded: boolean;
     children?: ListWidgetValue;
     animate: boolean;
@@ -50,7 +50,7 @@ export interface TreeNodePreviewProps {
     openNodeOn: OpenNodeOnEnum;
     headerContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     headerCaption: string;
-    hasChildren: boolean;
+    hasChildren: string;
     startExpanded: boolean;
     children: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     animate: boolean;