@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/basic/tree/index.js

@@ -0,0 +1,529 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTree = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
+var _isString = _interopRequireDefault(require("lodash-es/isString"));
+var _transformedDatasetUtils = require("@wavemaker-ai/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 = exports.WmTree = function WmTree(props) {
+  var _className$includes, _className$includes2;
+  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,
+    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,
+    template = props.template;
+
+  // Combined class for both props.class and props.className
+  var isCheckboxTree = (_className$includes = className === null || className === void 0 ? void 0 : className.includes("Checkbox")) !== null && _className$includes !== void 0 ? _className$includes : false;
+  var isRadioTree = (_className$includes2 = className === null || className === void 0 ? void 0 : className.includes("Radio")) !== null && _className$includes2 !== void 0 ? _className$includes2 : false;
+
+  // 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];
+
+  /** Latest tree  stale `treeNodes` re rendering ref */
+  var treeNodesRef = (0, _react.useRef)([]);
+  treeNodesRef.current = treeNodes;
+
+  // 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)) {
+      var ordered = orderby ? (0, _transformedDatasetUtils.getOrderedDataset)(newVal, orderby) : newVal;
+      return ordered.map(function (item, index) {
+        return (0, _utils.processNode)(item, 0, undefined, ordered, 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, orderby]);
+
+  // 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) {
+    var _ev$stopPropagation;
+    var ev = event !== null && event !== void 0 ? event : {
+      preventDefault: function preventDefault() {},
+      stopPropagation: function stopPropagation() {}
+    };
+    (_ev$stopPropagation = ev.stopPropagation) === null || _ev$stopPropagation === void 0 || _ev$stopPropagation.call(ev);
+    var prev = treeNodesRef.current;
+    var currentTreeNode = (0, _utils.findNodeById)(prev, node.nodeId);
+    if (!currentTreeNode) return;
+    if ((0, _utils.isTreeNodeDisabled)(currentTreeNode.data)) return;
+    var updatedNodes = (0, _utils.toggleExpansionInTree)(prev, node.nodeId);
+    var after_nodeUpdate = (0, _utils.findNodeById)(updatedNodes, node.nodeId);
+    treeNodesRef.current = updatedNodes;
+    setTreeNodes(updatedNodes);
+    if (after_nodeUpdate && ev && name) {
+      var path = getPath(after_nodeUpdate);
+      if (after_nodeUpdate.open) {
+        if (onExpand) {
+          onExpand(ev, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
+        }
+      } else if (onCollapse) {
+        onCollapse(ev, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], after_nodeUpdate.data, path);
+      }
+    }
+  }, [getPath, name, onCollapse, onExpand]);
+
+  // Handle node selection
+  var selectNode = (0, _react.useCallback)(function (event, node) {
+    var _findNodeById, _resolvedTreeNode$chi;
+    if (!node) return;
+    var resolvedTreeNode = (_findNodeById = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById !== void 0 ? _findNodeById : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedTreeNode.data)) return;
+    setSelectedItem(resolvedTreeNode);
+    if (event && nodeclick === "expand" && (_resolvedTreeNode$chi = resolvedTreeNode.children) !== null && _resolvedTreeNode$chi !== void 0 && _resolvedTreeNode$chi.length) {
+      toggleNodeExpansion(event, resolvedTreeNode);
+    }
+    if (onSelect && event && name) {
+      onSelect(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], resolvedTreeNode.data, getPath(resolvedTreeNode));
+    }
+  }, [name, nodeclick, onSelect, toggleNodeExpansion]);
+
+  // Handle node click (`event` undefined when invoked from partial `node.select()` / programmatic selection)
+  var handleNodeClick = (0, _react.useCallback)(function (event, node) {
+    selectNode(event, node);
+  }, [selectNode]);
+
+  // Handle checkbox toggle
+  var toggleNodeChecked = (0, _react.useCallback)(function (event, node) {
+    var _findNodeById2;
+    event.stopPropagation(); // Prevent triggering node selection
+
+    var resolvedNode = (_findNodeById2 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById2 !== void 0 ? _findNodeById2 : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
+
+    // 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$children2;
+        if (node.nodeId === nodeId) {
+          var _node$children;
+          // Update this node's checked state
+          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+            checked: checked
+          });
+
+          // Update all children recursively if any
+          if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.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$children2 = node.children) !== null && _node$children2 !== void 0 && _node$children2.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$children3;
+        var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+          checked: checked,
+          children: (_node$children3 = node.children) !== null && _node$children3 !== void 0 && _node$children3.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) {
+    var _findNodeById3;
+    event.stopPropagation(); // Prevent triggering node selection
+
+    var resolvedNode = (_findNodeById3 = (0, _utils.findNodeById)(treeNodesRef.current, node.nodeId)) !== null && _findNodeById3 !== void 0 ? _findNodeById3 : node;
+    if ((0, _utils.isTreeNodeDisabled)(resolvedNode.data)) return;
+
+    // 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$children4;
+        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$children4 = node.children) !== null && _node$children4 !== void 0 && _node$children4.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) {
+      if ((0, _utils.isTreeNodeDisabled)(node.data)) return;
+      selectNode(undefined, node);
+      if (isRadioTree) {
+        setRadioSelectedNodeId(node.nodeId);
+        var _updateRadioState2 = function updateRadioState(nodes, selectedNodeId) {
+          return nodes.map(function (node) {
+            var _node$children5;
+            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$children5 = node.children) !== null && _node$children5 !== void 0 && _node$children5.length) {
+              updatedNode.children = _updateRadioState2(node.children, selectedNodeId);
+            }
+            return updatedNode;
+          });
+        };
+        var updatedNodes = _updateRadioState2(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$children6;
+            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$children6 = node.children) !== null && _node$children6 !== void 0 && _node$children6.length) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                children: _updateNodeOpenState(node.children, nodesToExpand)
+              });
+            }
+            return node;
+          });
+        };
+        var _updatedNodes = _updateNodeOpenState(treeNodes, nodesToExpand);
+        setTreeNodes(_updatedNodes);
+      }
+    }
+  }, [isRadioTree, selectNode, treeNodes]);
+  var deselectById = (0, _react.useCallback)(function () {
+    setSelectedItem(null);
+    if (isRadioTree) {
+      setRadioSelectedNodeId(null);
+      var _clearCheckedState = function clearCheckedState(nodes) {
+        return nodes.map(function (node) {
+          var _node$children7;
+          var updatedNode = _objectSpread(_objectSpread({}, node), {}, {
+            checked: false,
+            children: (_node$children7 = node.children) !== null && _node$children7 !== void 0 && _node$children7.length ? _clearCheckedState(node.children) : node.children
+          });
+          if (updatedNode.data) {
+            updatedNode.data = _objectSpread(_objectSpread({}, updatedNode.data), {}, {
+              checked: false
+            });
+          }
+          return updatedNode;
+        });
+      };
+      setTreeNodes(_clearCheckedState(treeNodes));
+    }
+  }, [isRadioTree]);
+  var sortedTreeNodes = (0, _react.useMemo)(function () {
+    return treeNodes;
+  }, [treeNodes]);
+
+  /** Parents often pass a new array reference each render (`dataset={[...]}`); only re-parse when data or shape config actually changes. */
+  var prevDatasetRef = (0, _react.useRef)(undefined);
+  var prevGetNodesRef = (0, _react.useRef)(null);
+
+  // Process dataset when it changes
+  (0, _react.useEffect)(function () {
+    var getNodesIdentityChanged = prevGetNodesRef.current !== getNodes;
+    prevGetNodesRef.current = getNodes;
+    try {
+      var datasetUnchangedDeep = prevDatasetRef.current !== undefined && (0, _isEqual["default"])(prevDatasetRef.current, dataset);
+      if (!getNodesIdentityChanged && datasetUnchangedDeep) {
+        return;
+      }
+      prevDatasetRef.current = dataset;
+      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 && !(0, _utils.isTreeNodeDisabled)(targetNode.data)) {
+      var _targetNode$children;
+      selectNode(undefined, targetNode);
+      if ((_targetNode$children = targetNode.children) !== null && _targetNode$children !== void 0 && _targetNode$children.length) {
+        var _updateNodeOpenState2 = function updateNodeOpenState(nodes, targetNodeId) {
+          return nodes.map(function (node) {
+            var _node$children8;
+            if (node.nodeId === targetNodeId) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                open: true,
+                children: node.children ? _updateNodeOpenState2(node.children, targetNodeId) : undefined
+              });
+            } else if ((_node$children8 = node.children) !== null && _node$children8 !== void 0 && _node$children8.length) {
+              return _objectSpread(_objectSpread({}, node), {}, {
+                children: _updateNodeOpenState2(node.children, targetNodeId)
+              });
+            }
+            return node;
+          });
+        };
+        var updatedNodes = _updateNodeOpenState2(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, className, "ztree", template && "app-tree-custom"),
+    id: name,
+    name: name,
+    tabIndex: tabindex,
+    style: _objectSpread(_objectSpread({}, props.styles), {}, {
+      width: width,
+      height: height,
+      textAlign: horizontalalign
+    }),
+    hidden: props.hidden
+  }, 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,
+      template: template || undefined,
+      listener: listener
+    });
+  }) : __jsx("li", {
+    className: "wm-tree-empty-message"
+  }, "No tree data available"));
+};
+WmTree.displayName = "WmTree";
+
+/**
+ * The WmTree component is used to display hierarchical data in a tree structure.
+ * It supports node selection, expansion/collapse, and checkbox/radio modes.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-tree--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-tree--docs)
+ *
+ * @param props - {@link WmTreeProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmTree);

package/components/basic/tree/props.d.ts

@@ -0,0 +1,127 @@
+import type { MouseEvent as ReactMouseEvent } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents the data associated with a tree node.
+ */
+export interface TreeNodeData {
+    name?: string;
+    label?: string;
+    icon?: string;
+    nodeId?: string;
+    id?: string;
+    data?: any;
+    checked?: boolean;
+    [key: string]: any;
+}
+/**
+ * Represents an item within the tree structure.
+ */
+export interface TreeItem {
+    name: string;
+    label: string;
+    icon?: string;
+    nodeId: string;
+    data: TreeNodeData;
+    children?: TreeItem[];
+    open?: boolean;
+    checked?: boolean;
+    parent?: TreeItem;
+    tId?: string;
+    isParent?: boolean;
+}
+/**
+ * Base props specific to the WmTree component.
+ */
+export interface TreeProps {
+    /**
+     * Custom icons for the tree nodes.
+     */
+    treeicons?: string;
+    /**
+     * The number of levels to auto-expand.
+     */
+    levels?: number;
+    /**
+     * The field in the dataset to be used as node label.
+     */
+    nodelabel?: string;
+    /**
+     * The field in the dataset to be used as node icon.
+     */
+    nodeicon?: string;
+    /**
+     * The field in the dataset representing child nodes.
+     */
+    nodechildren?: string;
+    /**
+     * The field in the dataset to be used as node ID.
+     */
+    nodeid?: string;
+    /**
+     * The action to perform on node click.
+     */
+    nodeaction?: string;
+    orderby?: string;
+    /**
+     * The click behavior for nodes: 'expand' or 'none'.
+     */
+    nodeclick?: "expand" | "none";
+    /**
+     * The horizontal alignment of the tree content.
+     */
+    horizontalalign?: string;
+    /**
+     * Action to perform when a node is expanded.
+     */
+    onExpand?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is collapsed.
+     */
+    onCollapse?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is selected.
+     */
+    onSelect?: (event: React.MouseEvent, widget: any, item: any, path: string) => void;
+    /**
+     * Callback fired when a node is checked/unchecked.
+     */
+    onCheck?: (event: React.MouseEvent, widget: any, item: any, checked: boolean) => void;
+    /**
+     **template**: partial name for custom node rendering .
+     */
+    template?: string;
+}
+/**
+ * Combined props for the WmTree component, including base WaveMaker props.
+ */
+export type WmTreeProps = Prettify<TreeProps & BaseProps>;
+/**
+ * Props for the TreeNode component.
+ */
+export interface TreeNodeComponentProps {
+    node: TreeItem;
+    treeicons: string;
+    isCheckboxTree: boolean;
+    isRadioTree: boolean;
+    selectedItem: TreeItem | null;
+    handleNodeClick: (event: React.MouseEvent | undefined, node: TreeItem) => void;
+    toggleNodeExpansion: (event: React.MouseEvent | undefined, node: TreeItem) => void;
+    toggleNodeChecked: (event: React.MouseEvent, node: TreeItem) => void;
+    handleRadioSelect: (event: React.MouseEvent, node: TreeItem) => void;
+    depth?: number;
+    treeName: string;
+    /** Partial name from {@link TreeProps.template}; replaces default row with partial UI when set */
+    template?: string;
+    /** Page / fragment listener for partial container + widget registry */
+    listener?: Record<string, unknown>;
+}
+export type TreePartialNodeApi = {
+    select: () => void;
+    toggleExpand: (event?: ReactMouseEvent) => void;
+    getParentNode: () => Record<string, unknown> | null;
+    getNextNode: () => Record<string, unknown> | null;
+    getPreNode: () => Record<string, unknown> | null;
+    getPath: () => string;
+    getIndex: () => number;
+    getCheckStatus: () => number;
+} & Record<string, unknown>;

package/components/basic/tree/props.js

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