xmlui 0.10.15 → 0.10.18

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

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flatTreeDataWithIconsAndAlias2 = exports.flatTreeDataWithIcons2 = exports.flatTreeDataWithIconsAndAlias1 = exports.flatTreeDataWithIcons1 = exports.dynamicFlatData = exports.customDynamicTreeData = exports.dynamicTreeData = exports.hierarchyWithStateIcons = exports.customIconFieldHierarchy = exports.hierarchyDataWithIcons = exports.apiStyleHierarchy = exports.databaseStyleHierarchy = exports.customFieldsHierarchy2 = exports.customFieldsHierarchy1 = exports.dataWithStateIcons = exports.customIconFieldData = exports.flatDataWithIcons = exports.multiBranchTreeData = exports.apiStyleData = exports.databaseStyleData = exports.customFieldsData2 = exports.customFieldsData1 = exports.hierarchyTreeData = exports.flatTreeData = void 0;
+exports.flatTreeData = [
+    { id: 1, name: "Root Item 1", parentId: null },
+    { id: 2, name: "Child Item 1.1", parentId: 1 },
+    { id: 3, name: "Child Item 1.2", parentId: 1 },
+    { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
+];
+exports.hierarchyTreeData = [
+    {
+        id: 1,
+        name: "Root Item 1",
+        children: [
+            { id: 2, name: "Child Item 1.1", children: [] },
+            {
+                id: 3,
+                name: "Child Item 1.2",
+                children: [{ id: 4, name: "Grandchild Item 1.2.1", children: [] }],
+            },
+        ],
+    },
+];
+// Test data with custom field names for field mapping validation
+exports.customFieldsData1 = [
+    { nodeId: "A1", title: "Root Item 1", parent: null },
+    { nodeId: "A2", title: "Child Item 1.1", parent: "A1" },
+    { nodeId: "A3", title: "Child Item 1.2", parent: "A1" },
+    { nodeId: "A4", title: "Grandchild Item 1.1.1", parent: "A2" },
+];
+exports.customFieldsData2 = [
+    { id: 100, displayName: "Root Item 1", parentId: null },
+    { id: 101, displayName: "Child Item 1.1", parentId: 100 },
+    { id: 102, displayName: "Child Item 1.2", parentId: 100 },
+    { id: 103, displayName: "Grandchild Item 1.1.1", parentId: 101 },
+];
+exports.databaseStyleData = [
+    { pk: "root-1", label: "Root Item 1", parent_id: null },
+    { pk: "child-1", label: "Child Item 1.1", parent_id: "root-1" },
+    { pk: "child-2", label: "Child Item 1.2", parent_id: "root-1" },
+    { pk: "grandchild-1", label: "Grandchild Item 1.1.1", parent_id: "child-1" },
+];
+exports.apiStyleData = [
+    { key: "item1", text: "Root Item 1", parentKey: undefined },
+    { key: "item2", text: "Child Item 1.1", parentKey: "item1" },
+    { key: "item3", text: "Child Item 1.2", parentKey: "item1" },
+    { key: "item4", text: "Grandchild Item 1.1.1", parentKey: "item2" },
+];
+// Test data with multiple independent branches for comprehensive defaultExpanded testing
+exports.multiBranchTreeData = [
+    // Branch A: Documents
+    { id: "doc-root", name: "Documents", parentId: null },
+    { id: "doc-reports", name: "Reports", parentId: "doc-root" },
+    { id: "doc-invoices", name: "Invoices", parentId: "doc-root" },
+    { id: "doc-q1-report", name: "Q1 Report.pdf", parentId: "doc-reports" },
+    { id: "doc-q2-report", name: "Q2 Report.pdf", parentId: "doc-reports" },
+    { id: "doc-inv-001", name: "Invoice-001.pdf", parentId: "doc-invoices" },
+    // Branch B: Projects
+    { id: "proj-root", name: "Projects", parentId: null },
+    { id: "proj-web", name: "Web Apps", parentId: "proj-root" },
+    { id: "proj-mobile", name: "Mobile Apps", parentId: "proj-root" },
+    { id: "proj-ecommerce", name: "E-commerce Site", parentId: "proj-web" },
+    { id: "proj-dashboard", name: "Admin Dashboard", parentId: "proj-web" },
+    { id: "proj-ios-app", name: "iOS Shopping App", parentId: "proj-mobile" },
+    // Branch C: Media
+    { id: "media-root", name: "Media", parentId: null },
+    { id: "media-images", name: "Images", parentId: "media-root" },
+    { id: "media-videos", name: "Videos", parentId: "media-root" },
+    { id: "media-profile-pic", name: "profile.jpg", parentId: "media-images" },
+    { id: "media-banner", name: "banner.png", parentId: "media-images" },
+];
+// Test data with icon fields for icon mapping validation
+exports.flatDataWithIcons = [
+    { id: 1, name: "Documents", icon: "folder", parentId: null },
+    { id: 2, name: "Report.pdf", icon: "file-pdf", parentId: 1 },
+    { id: 3, name: "Images", icon: "folder", parentId: null },
+    { id: 4, name: "Photo.jpg", icon: "file-image", parentId: 3 },
+];
+exports.customIconFieldData = [
+    { nodeId: "A1", title: "Project", iconType: "project-folder", parent: null },
+    { nodeId: "A2", title: "Source", iconType: "code-folder", parent: "A1" },
+    { nodeId: "A3", title: "App.tsx", iconType: "typescript-file", parent: "A2" },
+    { nodeId: "A4", title: "Utils.ts", iconType: "typescript-file", parent: "A2" },
+];
+exports.dataWithStateIcons = [
+    {
+        id: 1,
+        name: "Shared Folder",
+        icon: "folder",
+        iconExpanded: "folder-open",
+        iconCollapsed: "folder-closed",
+        parentId: null,
+    },
+    {
+        id: 2,
+        name: "Subfolder",
+        icon: "folder",
+        iconExpanded: "folder-open",
+        iconCollapsed: "folder-closed",
+        parentId: 1,
+    },
+    { id: 3, name: "Document.txt", icon: "file-text", parentId: 2 },
+];
+// Hierarchical test data with custom field names for field mapping validation
+exports.customFieldsHierarchy1 = [
+    {
+        nodeId: "A1",
+        title: "Root Item 1",
+        items: [
+            {
+                nodeId: "A2",
+                title: "Child Item 1.1",
+                items: [{ nodeId: "A4", title: "Grandchild Item 1.1.1", items: [] }],
+            },
+            { nodeId: "A3", title: "Child Item 1.2", items: [] },
+        ],
+    },
+];
+exports.customFieldsHierarchy2 = [
+    {
+        id: 100,
+        displayName: "Root Item 1",
+        subNodes: [
+            {
+                id: 101,
+                displayName: "Child Item 1.1",
+                subNodes: [{ id: 103, displayName: "Grandchild Item 1.1.1", subNodes: [] }],
+            },
+            { id: 102, displayName: "Child Item 1.2", subNodes: [] },
+        ],
+    },
+];
+exports.databaseStyleHierarchy = [
+    {
+        pk: "root-1",
+        label: "Root Item 1",
+        nested_items: [
+            {
+                pk: "child-1",
+                label: "Child Item 1.1",
+                nested_items: [{ pk: "grandchild-1", label: "Grandchild Item 1.1.1", nested_items: [] }],
+            },
+            { pk: "child-2", label: "Child Item 1.2", nested_items: [] },
+        ],
+    },
+];
+exports.apiStyleHierarchy = [
+    {
+        key: "item1",
+        text: "Root Item 1",
+        nodes: [
+            {
+                key: "item2",
+                text: "Child Item 1.1",
+                nodes: [{ key: "item4", text: "Grandchild Item 1.1.1", nodes: [] }],
+            },
+            { key: "item3", text: "Child Item 1.2", nodes: [] },
+        ],
+    },
+];
+// Hierarchical test data with icon fields
+exports.hierarchyDataWithIcons = [
+    {
+        id: 1,
+        name: "Documents",
+        icon: "folder",
+        children: [
+            { id: 2, name: "Report.pdf", icon: "file-pdf", children: [] },
+            {
+                id: 3,
+                name: "Images",
+                icon: "folder",
+                children: [{ id: 4, name: "Photo.jpg", icon: "file-image", children: [] }],
+            },
+        ],
+    },
+];
+exports.customIconFieldHierarchy = [
+    {
+        nodeId: "A1",
+        title: "Project",
+        iconType: "project-folder",
+        items: [
+            {
+                nodeId: "A2",
+                title: "Source",
+                iconType: "code-folder",
+                items: [
+                    { nodeId: "A3", title: "App.tsx", iconType: "typescript-file", items: [] },
+                    { nodeId: "A4", title: "Utils.ts", iconType: "typescript-file", items: [] },
+                ],
+            },
+        ],
+    },
+];
+exports.hierarchyWithStateIcons = [
+    {
+        id: 1,
+        name: "Shared Folder",
+        icon: "folder",
+        iconExpanded: "folder-open",
+        iconCollapsed: "folder-closed",
+        children: [
+            {
+                id: 2,
+                name: "Subfolder",
+                icon: "folder",
+                iconExpanded: "folder-open",
+                iconCollapsed: "folder-closed",
+                children: [{ id: 3, name: "Document.txt", icon: "file-text", children: [] }],
+            },
+        ],
+    },
+];
+exports.dynamicTreeData = [
+    {
+        id: 1,
+        name: "Normal Node",
+        children: [{ id: 2, name: "Child Node", children: [] }],
+    },
+    {
+        id: 3,
+        name: "Dynamic Node (no children)",
+        dynamic: true,
+        children: [],
+    },
+    {
+        id: 4,
+        name: "Regular Leaf Node",
+        children: [],
+    },
+];
+exports.customDynamicTreeData = [
+    {
+        id: 1,
+        name: "Normal Node",
+        children: [{ id: 2, name: "Child Node", children: [] }],
+    },
+    {
+        id: 3,
+        name: "Dynamic Node (no children)",
+        canLoadMore: true,
+        children: [],
+    },
+    {
+        id: 4,
+        name: "Regular Leaf Node",
+        children: [],
+    },
+];
+exports.dynamicFlatData = [
+    {
+        id: 1,
+        name: "Normal Node",
+        parentId: null,
+    },
+    {
+        id: 2,
+        name: "Child Node",
+        parentId: 1,
+    },
+    {
+        id: 3,
+        name: "Dynamic Node (no children)",
+        dynamic: true,
+    },
+    {
+        id: 4,
+        name: "Regular Leaf Node",
+        parentId: null,
+    },
+];
+exports.flatTreeDataWithIcons1 = [
+    { id: 1, name: "Root Item 1", iconExpanded: "phone", parentId: null },
+    { id: 2, name: "Child Item 1.1", iconExpanded: "email", parentId: 1 },
+    { id: 3, name: "Child Item 1.2", parentId: 1 },
+    { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
+];
+exports.flatTreeDataWithIconsAndAlias1 = [
+    { id: 1, name: "Root Item 1", iconExp: "phone", parentId: null },
+    { id: 2, name: "Child Item 1.1", iconExp: "email", parentId: 1 },
+    { id: 3, name: "Child Item 1.2", parentId: 1 },
+    { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
+];
+exports.flatTreeDataWithIcons2 = [
+    { id: 1, name: "Root Item 1", iconCollapsed: "phone", parentId: null },
+    { id: 2, name: "Child Item 1.1", iconCollapsed: "email", parentId: 1 },
+    { id: 3, name: "Child Item 1.2", parentId: 1 },
+    { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
+];
+exports.flatTreeDataWithIconsAndAlias2 = [
+    { id: 1, name: "Root Item 1", iconColl: "phone", parentId: null },
+    { id: 2, name: "Child Item 1.1", iconColl: "email", parentId: 1 },
+    { id: 3, name: "Child Item 1.2", parentId: 1 },
+    { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
+];

package/dist/scripts/src/components-core/behaviors/Behavior.js

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

package/dist/scripts/src/components-core/behaviors/CoreBehaviors.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelBehavior = exports.animationBehavior = exports.tooltipBehavior = void 0;
+exports.getCoreBehaviors = exports.labelBehavior = exports.animationBehavior = exports.tooltipBehavior = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const AnimationNative_1 = require("../../components/Animation/AnimationNative");
 const ItemWithLabel_1 = require("../../components/FormItem/ItemWithLabel");
 const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
@@ -65,6 +64,7 @@ exports.labelBehavior = {
         return true;
     },
     attach: (context, node) => {
+        var _a;
         const { extractValue, node: componentNode, className } = context;
         const label = extractValue.asOptionalString(componentNode.props.label);
         const labelPosition = extractValue(componentNode.props.labelPosition);
@@ -74,7 +74,11 @@ exports.labelBehavior = {
         const enabled = extractValue.asOptionalBoolean(componentNode.props.enabled, true);
         const shrinkToLabel = extractValue.asOptionalBoolean(componentNode.props.shrinkToLabel);
         const style = extractValue(componentNode.props.style);
-        const generatedId = (0, react_1.useId)();
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: componentNode.uid || generatedId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, className: className, shrinkToLabel: shrinkToLabel, testId: componentNode.testId, children: node }));
+        const readOnly = extractValue.asOptionalBoolean(componentNode.props.readOnly);
+        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, className: className, shrinkToLabel: shrinkToLabel, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, isInputTemplateUsed: !!((_a = componentNode.props) === null || _a === void 0 ? void 0 : _a.inputTemplate), children: node }));
     },
 };
+const getCoreBehaviors = () => {
+    return [exports.tooltipBehavior, exports.animationBehavior, exports.labelBehavior];
+};
+exports.getCoreBehaviors = getCoreBehaviors;

package/dist/scripts/src/components-core/rendering/AppRoot.js

@@ -11,7 +11,6 @@ const ComponentProvider_1 = require("../../components/ComponentProvider");
 const DebugViewProvider_1 = require("../DebugViewProvider");
 const AppWrapper_1 = require("./AppWrapper");
 const StyleContext_1 = require("../theming/StyleContext");
-const BehaviorContext_1 = require("../behaviors/BehaviorContext");
 // --- We want to enable the produce method of `immer` on Map objects
 (0, immer_1.enableMapSet)();
 // --- We use this object in the app context to represent the `QlientQuery`
@@ -60,7 +59,7 @@ function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTest
     const enhancedGlobalProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, globalProps), { isNested })), [globalProps, isNested]);
     // --- Render the app providing a component registry (in which the engine finds a
     // --- component definition by its name). Ensure the app has a context for debugging.
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(StyleContext_1.StyleProvider, { children: (0, jsx_runtime_1.jsx)(BehaviorContext_1.BehaviorsProvider, { children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, onInit: onInit, children: children }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(StyleContext_1.StyleProvider, { children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, onInit: onInit, children: children }) }) }) }));
 }
 /**
  *

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -69,7 +69,7 @@ const event_handlers_1 = require("../event-handlers");
 const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
 const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const layout_resolver_1 = require("../theming/layout-resolver");
-const BehaviorContext_1 = require("../behaviors/BehaviorContext");
+const CoreBehaviors_1 = require("../behaviors/CoreBehaviors");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -214,6 +214,17 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
             // --- Render the component using the renderer function obtained from the component registry
             renderedNode = renderer(rendererContext);
         }
+        /**
+         * Apply any core behaviors to the component.
+         */
+        const behaviors = (0, CoreBehaviors_1.getCoreBehaviors)();
+        if (!isCompoundComponent) {
+            for (const behavior of behaviors) {
+                if (behavior.canAttach(rendererContext.node, descriptor)) {
+                    renderedNode = behavior.attach(rendererContext, renderedNode);
+                }
+            }
+        }
         // --- Components may have a `testId` property for E2E testing purposes. Inject the value of `testId`
         // --- into the DOM object of the rendered React component.
         if (
@@ -272,20 +283,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
                 ? (0, react_1.cloneElement)(renderedNode, null, children)
                 : renderedNode;
     }
-    const { getBehaviors } = (0, BehaviorContext_1.useBehaviors)();
-    const applyBehaviors = (node) => {
-        const behaviors = getBehaviors();
-        let wrappedNode = node;
-        if (!isCompoundComponent) {
-            for (const behavior of behaviors) {
-                if (behavior.canAttach(rendererContext.node, descriptor)) {
-                    wrappedNode = behavior.attach(rendererContext, wrappedNode);
-                }
-            }
-        }
-        return wrappedNode;
-    };
-    return applyBehaviors(nodeToRender);
+    return nodeToRender;
 });
 /**
  * This function renders the content of a slot. If the slot is named, it looks for a template

package/dist/scripts/src/components-core/utils/treeUtils.js

@@ -4,21 +4,34 @@ exports.flattenNode = flattenNode;
 exports.toFlatTree = toFlatTree;
 exports.walkTree = walkTree;
 exports.unPackTree = unPackTree;
-function flattenNode(node, depth, result, openedIds) {
-    const { children, uid } = node;
-    const isExpanded = openedIds.includes(uid);
-    result.push(Object.assign(Object.assign({}, node), { hasChildren: !!children && children.length > 0, depth,
-        isExpanded }));
+exports.flatToNative = flatToNative;
+exports.hierarchyToNative = hierarchyToNative;
+function flattenNode(node, depth, result, openedIds, dynamicField, nodeStates) {
+    const { children, key } = node;
+    const isExpanded = openedIds.includes(key);
+    // Check if node has actual children OR is a dynamic node that can load children
+    const hasActualChildren = !!children && children.length > 0;
+    const isDynamic = dynamicField && node[dynamicField];
+    const hasChildren = hasActualChildren || isDynamic;
+    // Get loading state for this node
+    const loadingState = (nodeStates === null || nodeStates === void 0 ? void 0 : nodeStates.get(key)) || (isDynamic ? 'unloaded' : 'loaded');
+    const flatNode = Object.assign(Object.assign({}, node), { hasChildren,
+        depth,
+        isExpanded,
+        loadingState, 
+        // Ensure key is preserved (in case it was overwritten by ...node spread)
+        key: key || node.key || node.id });
+    result.push(flatNode);
     if (isExpanded && children) {
         for (let child of children) {
-            flattenNode(child, depth + 1, result, openedIds);
+            flattenNode(child, depth + 1, result, openedIds, dynamicField, nodeStates);
         }
     }
 }
-function toFlatTree(treeData, openedIds) {
+function toFlatTree(treeData, openedIds, dynamicField, nodeStates) {
     const ret = [];
     treeData.forEach((node) => {
-        flattenNode(node, 0, ret, openedIds);
+        flattenNode(node, 0, ret, openedIds, dynamicField, nodeStates);
     });
     return ret;
 }
@@ -33,12 +46,12 @@ function unPackTree(items = [], parentIds = [], parentPath = []) {
     let treeItemsById = {};
     items.forEach((item, index) => {
         const path = [...parentPath, index];
-        const uid = item.uid || item.cid;
-        const childTree = unPackTree(item.children, [...parentIds, uid], path);
-        const treeItem = Object.assign(Object.assign({}, item), { uid: uid, key: uid, parentIds,
+        const id = item.id || item.cid;
+        const childTree = unPackTree(item.children, [...parentIds, id], path);
+        const treeItem = Object.assign(Object.assign({}, item), { id: id, key: id, parentIds,
             path, children: childTree.treeData, selectable: item.selectable });
         treeData.push(treeItem);
-        treeItemsById[uid] = treeItem;
+        treeItemsById[id] = treeItem;
         treeItemsById = Object.assign(Object.assign({}, treeItemsById), childTree.treeItemsById);
     });
     return {
@@ -46,3 +59,168 @@ function unPackTree(items = [], parentIds = [], parentPath = []) {
         treeItemsById,
     };
 }
+/**
+ * Transforms flat array data with parent-child relationships into UnPackedTreeData format
+ * @param flatData Array of flat objects with id and parentId relationships
+ * @param fieldConfig Configuration for mapping object fields to tree properties
+ * @returns UnPackedTreeData structure suitable for Tree component
+ */
+function flatToNative(flatData, fieldConfig) {
+    if (!flatData || flatData.length === 0) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Build parent-to-children map for efficient lookup
+    const childrenMap = new Map();
+    const itemsById = new Map();
+    const rootItems = [];
+    // First pass: organize items and build relationships
+    flatData.forEach(item => {
+        const id = item[fieldConfig.idField];
+        const parentId = item[fieldConfig.parentField || 'parentId'];
+        // Store item for lookup
+        itemsById.set(id, item);
+        if (parentId && parentId !== '') {
+            // Convert parentId to string for consistent type in childrenMap
+            const parentKey = String(parentId);
+            // Has parent - add to children map
+            if (!childrenMap.has(parentKey)) {
+                childrenMap.set(parentKey, []);
+            }
+            childrenMap.get(parentKey).push(item);
+        }
+        else {
+            // Root item
+            rootItems.push(item);
+        }
+    });
+    // Generate unique IDs for internal tree structure
+    let idCounter = 1;
+    const sourceIdToId = new Map();
+    const getOrCreateId = (sourceId) => {
+        if (!sourceIdToId.has(sourceId)) {
+            sourceIdToId.set(sourceId, `flat_${idCounter++}`);
+        }
+        return sourceIdToId.get(sourceId);
+    };
+    // Recursive function to build TreeNode structure
+    const buildTreeNode = (item, parentIds = [], pathSegments = []) => {
+        var _a;
+        const sourceId = item[fieldConfig.idField];
+        const id = getOrCreateId(sourceId);
+        const displayName = item[fieldConfig.labelField] || sourceId;
+        const currentPath = [...pathSegments, displayName];
+        // Get children for this item
+        const sourceKey = String(sourceId);
+        const childItems = childrenMap.get(sourceKey) || [];
+        const children = childItems.map(childItem => buildTreeNode(childItem, [...parentIds, sourceId], currentPath));
+        // Build the TreeNode
+        const treeNode = Object.assign(Object.assign(Object.assign(Object.assign({ id, key: sourceId, path: currentPath, displayName,
+            parentIds, selectable: fieldConfig.selectableField ? ((_a = item[fieldConfig.selectableField]) !== null && _a !== void 0 ? _a : true) : true, children }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+            icon: item[fieldConfig.iconField]
+        })), (fieldConfig.iconExpandedField && item[fieldConfig.iconExpandedField] && {
+            iconExpanded: item[fieldConfig.iconExpandedField]
+        })), (fieldConfig.iconCollapsedField && item[fieldConfig.iconCollapsedField] && {
+            iconCollapsed: item[fieldConfig.iconCollapsedField]
+        }));
+        return treeNode;
+    };
+    // Build tree structure from root items
+    const treeData = rootItems.map(rootItem => buildTreeNode(rootItem));
+    // Build lookup map by ID
+    const treeItemsById = {};
+    const collectNodes = (nodes) => {
+        nodes.forEach(node => {
+            treeItemsById[node.id] = node;
+            if (node.children) {
+                collectNodes(node.children);
+            }
+        });
+    };
+    collectNodes(treeData);
+    return {
+        treeData,
+        treeItemsById,
+    };
+}
+/**
+ * Transforms hierarchical nested object data into UnPackedTreeData format
+ * @param hierarchyData Single object or array of objects with nested children structure
+ * @param fieldConfig Configuration for mapping object fields to tree properties
+ * @returns UnPackedTreeData structure suitable for Tree component
+ */
+function hierarchyToNative(hierarchyData, fieldConfig) {
+    if (!hierarchyData) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Ensure we're working with an array
+    const rootItems = Array.isArray(hierarchyData) ? hierarchyData : [hierarchyData];
+    if (rootItems.length === 0) {
+        return { treeData: [], treeItemsById: {} };
+    }
+    // Generate unique IDs for internal tree structure
+    let idCounter = 1;
+    const sourceIdToId = new Map();
+    const getOrCreateId = (sourceId) => {
+        if (!sourceIdToId.has(sourceId)) {
+            sourceIdToId.set(sourceId, `hierarchy_${idCounter++}`);
+        }
+        return sourceIdToId.get(sourceId);
+    };
+    // Set to track visited nodes for circular reference detection
+    const visitedIds = new Set();
+    // Recursive function to build TreeNode structure from hierarchical data
+    const buildTreeNode = (item, parentIds = [], pathSegments = []) => {
+        var _a, _b;
+        const sourceId = item[fieldConfig.idField];
+        const displayName = item[fieldConfig.labelField] || sourceId;
+        // Circular reference detection
+        if (visitedIds.has(sourceId)) {
+            // Return a simple node without children to break the cycle
+            const id = getOrCreateId(sourceId);
+            return Object.assign(Object.assign({ id, key: sourceId, path: [...pathSegments, displayName], displayName,
+                parentIds, selectable: fieldConfig.selectableField ? ((_a = item[fieldConfig.selectableField]) !== null && _a !== void 0 ? _a : true) : true, children: [] }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+                icon: item[fieldConfig.iconField]
+            }));
+        }
+        // Mark as visited
+        visitedIds.add(sourceId);
+        const id = getOrCreateId(sourceId);
+        const currentPath = [...pathSegments, displayName];
+        // Get children from the specified children field
+        const childrenField = fieldConfig.childrenField || 'children';
+        const childItems = item[childrenField] || [];
+        // Recursively build children
+        const children = childItems.map((childItem) => buildTreeNode(childItem, [...parentIds, sourceId], currentPath));
+        // Unmark as visited after processing (for depth-first traversal)
+        visitedIds.delete(sourceId);
+        // Build the TreeNode
+        const treeNode = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id, path: currentPath, displayName,
+            parentIds, selectable: fieldConfig.selectableField ? ((_b = item[fieldConfig.selectableField]) !== null && _b !== void 0 ? _b : true) : true }, item), (fieldConfig.iconField && item[fieldConfig.iconField] && {
+            icon: item[fieldConfig.iconField]
+        })), (fieldConfig.iconExpandedField && item[fieldConfig.iconExpandedField] && {
+            iconExpanded: item[fieldConfig.iconExpandedField]
+        })), (fieldConfig.iconCollapsedField && item[fieldConfig.iconCollapsedField] && {
+            iconCollapsed: item[fieldConfig.iconCollapsedField]
+        })), { 
+            // Set TreeNode-specific properties AFTER spreading item to ensure they're not overwritten
+            children, key: sourceId });
+        return treeNode;
+    };
+    // Build tree structure from root items
+    const treeData = rootItems.map(rootItem => buildTreeNode(rootItem));
+    // Build lookup map by ID
+    const treeItemsById = {};
+    const collectNodes = (nodes) => {
+        nodes.forEach(node => {
+            treeItemsById[node.id] = node;
+            if (node.children) {
+                collectNodes(node.children);
+            }
+        });
+    };
+    collectNodes(treeData);
+    return {
+        treeData,
+        treeItemsById,
+    };
+}