@wavemaker/react-runtime 11.14.1-16.6404

package/components/basic/tree/Components/TreeNodeComponent.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var TreeNodeComponent = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var node = _ref.node,
+    treeicons = _ref.treeicons,
+    isCheckboxTree = _ref.isCheckboxTree,
+    isRadioTree = _ref.isRadioTree,
+    selectedItem = _ref.selectedItem,
+    handleNodeClick = _ref.handleNodeClick,
+    toggleNodeExpansion = _ref.toggleNodeExpansion,
+    toggleNodeChecked = _ref.toggleNodeChecked,
+    handleRadioSelect = _ref.handleRadioSelect,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    treeName = _ref.treeName;
+  var hasChildren = node.children && node.children.length > 0;
+
+  // Generate a unique ID for DOM selection (similar to tId in zTree)
+  node.tId = node.tId || "".concat(treeName, "_").concat(node.nodeId);
+  node.isParent = hasChildren;
+  var renderExpandCollapseIcon = function renderExpandCollapseIcon() {
+    if (hasChildren) {
+      return __jsx(_Box["default"], {
+        component: "span",
+        className: (0, _clsx["default"])("button", "level".concat(depth), "switch", depth === 0 ? node.open ? "roots_open" : "roots_close" : node.open ? "bottom_open" : "bottom_close", treeicons, "treenode_switch"),
+        treeicons: treeicons,
+        onClick: function onClick(event) {
+          return toggleNodeExpansion(event, node);
+        },
+        id: "".concat(node.tId, "_switch"),
+        title: "",
+        treenode_switch: "true"
+      });
+    }
+    return __jsx(_Box["default"], {
+      component: "span",
+      treeicons: treeicons,
+      className: (0, _clsx["default"])("button", "level".concat(depth), "switch", "bottom_docu", treeicons, "treenode_switch"),
+      treenode_switch: "true"
+    });
+  };
+  var renderCheckboxOrRadio = function renderCheckboxOrRadio() {
+    if (!isCheckboxTree && !isRadioTree) return null;
+    return __jsx(_Box["default"], {
+      component: "span",
+      className: (0, _clsx["default"])("button", "chk", isRadioTree ? "radio_false_full" : "checkbox_false_full", node.checked && (isRadioTree ? "radio_true_full" : "checkbox_true_full")),
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        if (isRadioTree) {
+          handleRadioSelect(event, node);
+        } else {
+          toggleNodeChecked(event, node);
+        }
+      },
+      treeicons: treeicons,
+      id: "".concat(node.tId, "_check"),
+      treenode_check: "true"
+    });
+  };
+  var renderNodeIcon = function renderNodeIcon() {
+    if (!node.icon) return null;
+    return __jsx(_Box["default"], {
+      component: "span",
+      className: (0, _clsx["default"])("button", "ico_open", "treenode_ico"),
+      id: "".concat(node.tId, "_ico"),
+      title: "",
+      treenode_ico: "true"
+    });
+  };
+  var renderNodeContent = function renderNodeContent() {
+    return __jsx(_Box["default"], {
+      component: "a",
+      onClick: function onClick(event) {
+        return handleNodeClick(event, node);
+      },
+      className: (0, _clsx["default"])("level".concat(depth), "glyphicon", node.icon || "glyphicon-music", {
+        curSelectedNode: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId
+      }, "treenode_a"),
+      "data-node-id": node.nodeId,
+      id: "".concat(node.tId, "_a"),
+      title: node.label,
+      treenode_a: "true"
+    }, renderNodeIcon(), __jsx(_Box["default"], {
+      component: "span",
+      className: "node_name",
+      id: "".concat(node.tId, "_span")
+    }, node.label));
+  };
+  var renderChildNodes = function renderChildNodes() {
+    if (!hasChildren) return null;
+    return __jsx(_Collapse["default"], {
+      "in": !!node.open
+    }, __jsx(_Box["default"], {
+      component: "ul",
+      className: (0, _clsx["default"])("level".concat(depth), "line"),
+      id: "".concat(node.tId, "_ul"),
+      style: {
+        marginLeft: "20px",
+        listStyle: "none",
+        padding: 0,
+        display: node.open ? "block" : "none"
+      }
+    }, node.children && node.children.map(function (childNode) {
+      return __jsx(TreeNodeComponent, {
+        key: childNode.nodeId,
+        node: childNode,
+        treeicons: treeicons,
+        isCheckboxTree: isCheckboxTree,
+        isRadioTree: isRadioTree,
+        selectedItem: selectedItem,
+        handleNodeClick: handleNodeClick,
+        toggleNodeExpansion: toggleNodeExpansion,
+        toggleNodeChecked: toggleNodeChecked,
+        handleRadioSelect: handleRadioSelect,
+        depth: depth + 1,
+        treeName: treeName
+      });
+    })));
+  };
+  return __jsx(_Box["default"], {
+    component: "li",
+    key: node.nodeId,
+    className: (0, _clsx["default"])("level".concat(depth), {
+      selected: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId
+    }),
+    id: node.tId,
+    tabIndex: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.nodeId) === node.nodeId ? 0 : -1,
+    treenode: "true"
+  }, renderExpandCollapseIcon(), renderCheckboxOrRadio(), renderNodeContent(), renderChildNodes());
+});
+TreeNodeComponent.displayName = "TreeNodeComponent";
+var _default = exports["default"] = TreeNodeComponent;

package/components/basic/tree/index.js

@@ -0,0 +1,503 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
+var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
+var _isString = _interopRequireDefault(require("lodash-es/isString"));
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _TreeNodeComponent = _interopRequireDefault(require("./Components/TreeNodeComponent"));
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-tree";
+var DEFAULT_TREE_ICON_CLASS = "plus-minus";
+var WmTree = function WmTree(props) {
+  var _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? "node1, node2, node3" : _props$dataset,
+    datavalue = props.datavalue,
+    _props$treeicons = props.treeicons,
+    treeicons = _props$treeicons === void 0 ? DEFAULT_TREE_ICON_CLASS : _props$treeicons,
+    _props$levels = props.levels,
+    levels = _props$levels === void 0 ? 0 : _props$levels,
+    _props$nodelabel = props.nodelabel,
+    nodelabel = _props$nodelabel === void 0 ? "" : _props$nodelabel,
+    _props$nodeicon = props.nodeicon,
+    nodeicon = _props$nodeicon === void 0 ? "" : _props$nodeicon,
+    _props$nodechildren = props.nodechildren,
+    nodechildren = _props$nodechildren === void 0 ? "" : _props$nodechildren,
+    _props$nodeid = props.nodeid,
+    nodeid = _props$nodeid === void 0 ? "" : _props$nodeid,
+    _props$nodeaction = props.nodeaction,
+    nodeaction = _props$nodeaction === void 0 ? "" : _props$nodeaction,
+    _props$nodeclick = props.nodeclick,
+    nodeclick = _props$nodeclick === void 0 ? "none" : _props$nodeclick,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$name = props.name,
+    name = _props$name === void 0 ? "treeview" : _props$name,
+    classFromProps = props["class"],
+    className = props.className,
+    _props$orderby = props.orderby,
+    orderby = _props$orderby === void 0 ? "" : _props$orderby,
+    onExpand = props.onExpand,
+    onCollapse = props.onCollapse,
+    onSelect = props.onSelect,
+    onCheck = props.onCheck,
+    _props$horizontalalig = props.horizontalalign,
+    horizontalalign = _props$horizontalalig === void 0 ? "left" : _props$horizontalalig,
+    listener = props.listener,
+    width = props.width,
+    height = props.height;
+
+  // Combined class for both props.class and props.className
+  var combinedClassName = (0, _clsx["default"])(classFromProps, className);
+  var isCheckboxTree = combinedClassName === null || combinedClassName === void 0 ? void 0 : combinedClassName.includes("Checkbox");
+  var isRadioTree = combinedClassName === null || combinedClassName === void 0 ? void 0 : combinedClassName.includes("Radio");
+
+  // Component state
+  var _useState = (0, _react.useState)([]),
+    treeNodes = _useState[0],
+    setTreeNodes = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    radioSelectedNodeId = _useState3[0],
+    setRadioSelectedNodeId = _useState3[1];
+
+  // Unique ID generator for ensuring nodeId uniqueness
+  var usedNodeIds = (0, _react.useRef)(new Set());
+
+  // Function to get nodes from string input
+  var getNodesFromString = (0, _react.useCallback)(function (value) {
+    if (!value) return [];
+    return value.split(",").map(function (item, index) {
+      return {
+        name: item.trim(),
+        label: item.trim(),
+        nodeId: "string_node_".concat(index, "_").concat(item.trim()),
+        tId: "".concat(name, "_string_node_").concat(index, "_").concat(item.trim()),
+        data: {
+          label: item.trim()
+        },
+        children: [],
+        open: levels > 0,
+        checked: false
+      };
+    });
+  }, [levels, name]);
+
+  // Get initial nodes from dataset
+  var getNodes = (0, _react.useCallback)(function (newVal) {
+    usedNodeIds.current.clear();
+    var processNodeOptions = {
+      levels: levels,
+      nodelabel: nodelabel,
+      nodeicon: nodeicon,
+      nodechildren: nodechildren,
+      nodeid: nodeid,
+      generateUniqueNodeId: function generateUniqueNodeId(baseId) {
+        return (0, _utils.generateUniqueNodeId)(baseId, usedNodeIds.current);
+      }
+    };
+    if ((0, _isArray["default"])(newVal)) {
+      return newVal.map(function (item, index) {
+        return (0, _utils.processNode)(item, 0, undefined, newVal, index, name, processNodeOptions);
+      });
+    } else if ((0, _isObject["default"])(newVal) && newVal !== null) {
+      return [(0, _utils.processNode)(newVal, 0, undefined, [newVal], 0, name, processNodeOptions)];
+    } else if ((0, _isString["default"])(newVal) && !(0, _isEmpty["default"])(newVal)) {
+      return getNodesFromString(newVal.trim());
+    }
+    return [];
+  }, [getNodesFromString, levels, nodelabel, nodeicon, nodechildren, nodeid, name]);
+
+  // Get path to node (for event callbacks)
+  var getPath = (0, _react.useCallback)(function (node) {
+    if (!node) return "";
+    var path = [];
+    var currentNode = node;
+    while (currentNode) {
+      path.unshift(currentNode.name);
+      currentNode = currentNode.parent;
+    }
+    return "/".concat(path.join("/"));
+  }, []);
+  var toggleNodeExpansion = (0, _react.useCallback)(function (event, node) {
+    if (event) {
+      event.stopPropagation(); // Prevent triggering node selection
+    }
+
+    // Toggle the open state
+    var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+      open: !node.open
+    });
+
+    // Update the node in the tree
+    var updateNodeInTree = function updateNodeInTree(nodes, targetNode) {
+      return nodes.map(function (n) {
+        var _n$children;
+        if (n.nodeId === targetNode.nodeId) {
+          return updatedNode;
+        } else if ((_n$children = n.children) !== null && _n$children !== void 0 && _n$children.length) {
+          return _objectSpread(_objectSpread({}, n), {}, {
+            children: updateNodeInTree(n.children, targetNode)
+          });
+        }
+        return n;
+      });
+    };
+    var updatedNodes = updateNodeInTree(treeNodes, node);
+    setTreeNodes(updatedNodes);
+    var path = getPath(node);
+    if (updatedNode.open) {
+      if (onExpand && event && name) {
+        onExpand(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], node.data, path);
+      }
+    } else {
+      if (onCollapse && event && name) {
+        onCollapse(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], node.data, path);
+      }
+    }
+  }, [getPath, name, onCollapse, onExpand, treeNodes]);
+
+  // Handle node selection
+  var selectNode = (0, _react.useCallback)(function (event, node) {
+    var _node$children;
+    if (!node) return;
+    setSelectedItem(node);
+    if (event && nodeclick === "expand" && (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
+      toggleNodeExpansion(event, node);
+    }
+    if (onSelect && event && name) {
+      onSelect(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], node.data, getPath(node));
+    }
+  }, [name, nodeaction, nodeclick, onSelect, toggleNodeExpansion]);
+
+  // Handle node click
+  var handleNodeClick = (0, _react.useCallback)(function (event, node) {
+    selectNode(event, node);
+  }, [selectNode]);
+
+  // Handle checkbox toggle
+  var toggleNodeChecked = (0, _react.useCallback)(function (event, node) {
+    event.stopPropagation(); // Prevent triggering node selection
+
+    // Toggle the checked state
+    var newCheckedState = !node.checked;
+
+    // Update the tree with cascading effect
+    var updateCheckedState = function updateCheckedState(nodes, nodeId, checked) {
+      return nodes.map(function (node) {
+        var _node$children3;
+        if (node.nodeId === nodeId) {
+          var _node$children2;
+          // Update this node's checked state
+          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+            checked: checked
+          });
+
+          // Update all children recursively if any
+          if ((_node$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.length) {
+            updatedNode.children = updateAllChildrenChecked(node.children, checked);
+          }
+
+          // Also update the data object to maintain consistency
+          if (updatedNode.data) {
+            updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+              checked: checked
+            });
+          }
+          return updatedNode;
+        } else if ((_node$children3 = node.children) !== null && _node$children3 !== void 0 && _node$children3.length) {
+          // Check if the target node is in the children
+          var updatedChildren = updateCheckedState(node.children, nodeId, checked);
+
+          // Check if all children are checked or unchecked to update parent accordingly
+          var allChildrenChecked = updatedChildren.every(function (child) {
+            return child.checked;
+          });
+          var anyChildChecked = updatedChildren.some(function (child) {
+            return child.checked;
+          });
+          var updatedCheckedState = nodeId !== node.nodeId ? checked ? allChildrenChecked : anyChildChecked ? node.checked : false : node.checked;
+
+          // Update the data object to maintain consistency
+          var _updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+            children: updatedChildren,
+            checked: updatedCheckedState
+          });
+          if (_updatedNode.data) {
+            _updatedNode.data = _objectSpread(_objectSpread({}, _updatedNode.data), {}, {
+              checked: updatedCheckedState
+            });
+          }
+          return _updatedNode;
+        }
+        return node;
+      });
+    };
+
+    // Helper function to set all children to the same checked state
+    var updateAllChildrenChecked = function updateAllChildrenChecked(nodes, checked) {
+      return nodes.map(function (node) {
+        var _node$children4;
+        var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+          checked: checked,
+          children: (_node$children4 = node.children) !== null && _node$children4 !== void 0 && _node$children4.length ? updateAllChildrenChecked(node.children, checked) : node.children
+        });
+
+        // Update the data object to maintain consistency
+        if (updatedNode.data) {
+          updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+            checked: checked
+          });
+        }
+        return updatedNode;
+      });
+    };
+    var updatedNodes = updateCheckedState(treeNodes, node.nodeId, newCheckedState);
+    setTreeNodes(updatedNodes);
+    if (onCheck) {
+      onCheck(event, undefined, node.data, newCheckedState);
+    }
+  }, [name, onCheck, treeNodes]);
+
+  // Handle radio button selection
+  var handleRadioSelect = (0, _react.useCallback)(function (event, node) {
+    event.stopPropagation(); // Prevent triggering node selection
+
+    // Already selected, skip
+    if (radioSelectedNodeId === node.nodeId) {
+      return;
+    }
+
+    // Set new selected radio
+    setRadioSelectedNodeId(node.nodeId);
+
+    // Update all nodes in the tree to set the correct radio state
+    var updateRadioState = function updateRadioState(nodes, selectedNodeId) {
+      return nodes.map(function (node) {
+        var _node$children5;
+        var isChecked = node.nodeId === selectedNodeId;
+
+        // Update this node
+        var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+          checked: isChecked
+        });
+
+        // Update the data object to maintain consistency
+        if (updatedNode.data) {
+          updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+            checked: isChecked
+          });
+        }
+
+        // Update children recursively if any
+        if ((_node$children5 = node.children) !== null && _node$children5 !== void 0 && _node$children5.length) {
+          updatedNode.children = updateRadioState(node.children, selectedNodeId);
+        }
+        return updatedNode;
+      });
+    };
+    var updatedNodes = updateRadioState(treeNodes, node.nodeId);
+    setTreeNodes(updatedNodes);
+    if (onCheck) {
+      onCheck(event, undefined, node.data, true);
+    }
+  }, [name, onCheck, radioSelectedNodeId, treeNodes]);
+
+  // Implement programmatic API methods
+  var selectById = (0, _react.useCallback)(function (nodeId) {
+    if (!nodeId) {
+      setSelectedItem(null);
+      return;
+    }
+    var node = (0, _utils.findNodeById)(treeNodes, nodeId);
+    if (node) {
+      selectNode(undefined, node);
+      if (isRadioTree) {
+        setRadioSelectedNodeId(node.nodeId);
+        var updateRadioState = function updateRadioState(nodes, selectedNodeId) {
+          return nodes.map(function (node) {
+            var _node$children6;
+            var isChecked = node.nodeId === selectedNodeId;
+            var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+              checked: isChecked
+            });
+            if (updatedNode.data) {
+              updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+                checked: isChecked
+              });
+            }
+            if ((_node$children6 = node.children) !== null && _node$children6 !== void 0 && _node$children6.length) {
+              updatedNode.children = updateRadioState(node.children, selectedNodeId);
+            }
+            return updatedNode;
+          });
+        };
+        var updatedNodes = updateRadioState(treeNodes, node.nodeId);
+        setTreeNodes(updatedNodes);
+      }
+      var currentNode = node.parent;
+      var nodesToExpand = [];
+      while (currentNode) {
+        nodesToExpand.push(currentNode);
+        currentNode = currentNode.parent;
+      }
+      if (nodesToExpand.length) {
+        var updateNodeOpenState = function updateNodeOpenState(nodes, nodesToExpand) {
+          return nodes.map(function (node) {
+            var _node$children7;
+            if (nodesToExpand.some(function (n) {
+              return n.nodeId === node.nodeId;
+            })) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                open: true,
+                children: node.children ? updateNodeOpenState(node.children, nodesToExpand) : undefined
+              });
+            } else if ((_node$children7 = node.children) !== null && _node$children7 !== void 0 && _node$children7.length) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                children: updateNodeOpenState(node.children, nodesToExpand)
+              });
+            }
+            return node;
+          });
+        };
+        var _updatedNodes = updateNodeOpenState(treeNodes, nodesToExpand);
+        setTreeNodes(_updatedNodes);
+      }
+    }
+  }, [isRadioTree]);
+  var deselectById = (0, _react.useCallback)(function () {
+    setSelectedItem(null);
+    if (isRadioTree) {
+      setRadioSelectedNodeId(null);
+      var clearCheckedState = function clearCheckedState(nodes) {
+        return nodes.map(function (node) {
+          var _node$children8;
+          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+            checked: false,
+            children: (_node$children8 = node.children) !== null && _node$children8 !== void 0 && _node$children8.length ? clearCheckedState(node.children) : node.children
+          });
+          if (updatedNode.data) {
+            updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+              checked: false
+            });
+          }
+          return updatedNode;
+        });
+      };
+      setTreeNodes(clearCheckedState(treeNodes));
+    }
+  }, [isRadioTree]);
+
+  // Memoized sorted nodes to avoid re-sorting on every render
+  var sortedTreeNodes = (0, _react.useMemo)(function () {
+    return orderby ? (0, _transformedDatasetUtils.getOrderedDataset)(treeNodes, orderby) : treeNodes;
+  }, [orderby, treeNodes]);
+
+  // Process dataset when it changes
+  (0, _react.useEffect)(function () {
+    try {
+      var parsedNodes = getNodes(dataset);
+      setTreeNodes(parsedNodes);
+    } catch (error) {
+      setTreeNodes([]);
+    }
+  }, [dataset, getNodes]);
+
+  // Handle datavalue changes - following Angular's approach
+  (0, _react.useEffect)(function () {
+    if (!datavalue || !sortedTreeNodes.length) return;
+    if (selectedItem) return;
+    var targetNode = null;
+    if (datavalue === "FirstNode") {
+      targetNode = sortedTreeNodes[0];
+    } else if (datavalue === "LastNode") {
+      targetNode = sortedTreeNodes[sortedTreeNodes.length - 1];
+    } else {
+      targetNode = (0, _utils.findNodeById)(sortedTreeNodes, datavalue);
+    }
+    if (targetNode) {
+      var _targetNode$children;
+      selectNode(undefined, targetNode);
+      if ((_targetNode$children = targetNode.children) !== null && _targetNode$children !== void 0 && _targetNode$children.length) {
+        var updateNodeOpenState = function updateNodeOpenState(nodes, targetNodeId) {
+          return nodes.map(function (node) {
+            var _node$children9;
+            if (node.nodeId === targetNodeId) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                open: true,
+                children: node.children ? updateNodeOpenState(node.children, targetNodeId) : undefined
+              });
+            } else if ((_node$children9 = node.children) !== null && _node$children9 !== void 0 && _node$children9.length) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                children: updateNodeOpenState(node.children, targetNodeId)
+              });
+            }
+            return node;
+          });
+        };
+        var updatedNodes = updateNodeOpenState(treeNodes, targetNode.nodeId);
+        setTreeNodes(updatedNodes);
+      }
+    }
+  }, [datavalue, sortedTreeNodes.length, selectedItem, treeNodes, selectNode]); // Added selectNode to dependencies
+
+  //Handled methods
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        selectById: selectById,
+        deselectById: deselectById
+      });
+    }
+  }, [selectById, deselectById]);
+  return __jsx(_Box["default"], {
+    component: "ul",
+    className: (0, _clsx["default"])(DEFAULT_CLASS, combinedClassName, "ztree"),
+    id: name,
+    name: name,
+    tabIndex: tabindex,
+    style: _objectSpread(_objectSpread({}, props.styles), {}, {
+      width: width,
+      height: height,
+      textAlign: horizontalalign
+    })
+  }, sortedTreeNodes.length > 0 ? sortedTreeNodes.map(function (node) {
+    return __jsx(_TreeNodeComponent["default"], {
+      key: node.nodeId,
+      node: node,
+      treeicons: treeicons,
+      isCheckboxTree: isCheckboxTree,
+      isRadioTree: isRadioTree,
+      selectedItem: selectedItem,
+      handleNodeClick: handleNodeClick,
+      toggleNodeExpansion: toggleNodeExpansion,
+      toggleNodeChecked: toggleNodeChecked,
+      handleRadioSelect: handleRadioSelect,
+      treeName: name
+    });
+  }) : __jsx("li", {
+    style: {
+      padding: 16,
+      color: "text.secondary"
+    }
+  }, "No tree data available"));
+};
+WmTree.displayName = "WmTree";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmTree);

package/components/basic/tree/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});