@fgv/ts-res-ui-components 5.0.0-21 → 5.0.0-22

package/lib-commonjs/components/pickers/ResourcePicker/ResourcePickerTree.js

@@ -8,8 +8,9 @@ const outline_1 = require("@heroicons/react/24/outline");
  * Creates a virtual tree by merging real resource tree with pending resources
  */
 function createVirtualTree(realTree, pendingResources = []) {
-    if (!realTree)
+    if (!realTree) {
         return null;
+    }
     // Helper to convert real node to virtual node
     const convertRealNode = (realNode) => {
         const virtualNode = {
@@ -87,25 +88,41 @@ const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, o
     const [expandedNodes, setExpandedNodes] = (0, react_1.useState)(new Set());
     // Build the virtual tree structure from resources and pending resources
     const virtualTree = (0, react_1.useMemo)(() => {
-        if (!resources)
+        if (!resources) {
             return null;
+        }
         // Get the tree from the resource manager
         const resourceManager = resources.system.resourceManager;
         const treeResult = resourceManager.getBuiltResourceTree();
         if (treeResult.isFailure()) {
-            console.error('Failed to build resource tree:', treeResult.message);
+            console.error('ResourcePickerTree: Failed to build resource tree:', treeResult.message);
             return null;
         }
         // Create virtual tree that includes pending resources
-        return createVirtualTree(treeResult.value, pendingResources);
+        try {
+            const virtualTree = createVirtualTree(treeResult.value, pendingResources);
+            return virtualTree;
+        }
+        catch (error) {
+            console.error('ResourcePickerTree: Error in createVirtualTree:', error);
+            return null;
+        }
     }, [resources, pendingResources]);
     // Find the effective root node(s) to display
     const effectiveRootNodes = (0, react_1.useMemo)(() => {
-        if (!virtualTree)
+        try {
+            if (!virtualTree) {
+                return [];
+            }
+            // If no rootPath, show all top-level nodes
+            if (!rootPath) {
+                const nodes = Array.from(virtualTree.children.values());
+                return nodes;
+            }
+        }
+        catch (error) {
+            console.error('ResourcePickerTree: Error in effectiveRootNodes calculation:', error);
             return [];
-        // If no rootPath, show all top-level nodes
-        if (!rootPath) {
-            return Array.from(virtualTree.children.values());
         }
         // Find the target node in the virtual tree
         const findVirtualNodeById = (node, targetId) => {
@@ -280,7 +297,7 @@ const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, o
         return (react_1.default.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
             react_1.default.createElement("p", null, emptyMessage)));
     }
-    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto` }, effectiveRootNodes
+    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto !relative !z-auto !min-h-[200px]` }, effectiveRootNodes
         .sort((a, b) => {
         // Sort folders first, then by name
         if (a.isLeaf !== b.isLeaf) {
@@ -288,7 +305,9 @@ const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, o
         }
         return a.name.localeCompare(b.name);
     })
-        .map((child) => renderTreeNode(child))));
+        .map((child) => {
+        return renderTreeNode(child);
+    })));
 };
 exports.ResourcePickerTree = ResourcePickerTree;
 /**

package/lib-commonjs/components/pickers/ResourcePicker/index.js

@@ -109,7 +109,9 @@ const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, resou
             react_1.default.createElement("p", null, emptyMessage || 'No resources loaded')));
     }
     const containerHeight = typeof height === 'number' ? `${height}px` : height;
-    return (react_1.default.createElement("div", { className: `flex flex-col ${className}`, style: { height: containerHeight } },
+    return (react_1.default.createElement("div", { className: `flex flex-col !relative !z-auto !min-h-[400px] ${className}`, style: {
+            height: containerHeight
+        } },
         (enableSearch || showViewToggle) && (react_1.default.createElement("div", { className: "flex flex-col gap-3 mb-4" },
             enableSearch && (react_1.default.createElement("div", { className: "relative" },
                 react_1.default.createElement(outline_1.MagnifyingGlassIcon, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
@@ -131,7 +133,7 @@ const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, resou
                             : 'text-gray-600 hover:text-gray-900'}`, title: "Tree View" },
                         react_1.default.createElement(outline_1.FolderIcon, { className: "h-4 w-4" }),
                         react_1.default.createElement("span", { className: "ml-1" }, "Tree"))))))),
-        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50" }, viewMode === 'tree' ? (react_1.default.createElement(ResourcePickerTree_1.ResourcePickerTree, { resources: resources, pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })) : (react_1.default.createElement(ResourcePickerList_1.ResourcePickerList, { resourceIds: resources.summary.resourceIds || [], pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })))));
+        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 !relative !z-auto !min-h-[300px]" }, viewMode === 'tree' ? (react_1.default.createElement(ResourcePickerTree_1.ResourcePickerTree, { resources: resources, pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })) : (react_1.default.createElement(ResourcePickerList_1.ResourcePickerList, { resourceIds: resources.summary.resourceIds || [], pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })))));
 };
 exports.ResourcePicker = ResourcePicker;
 exports.default = exports.ResourcePicker;

package/lib-commonjs/components/views/ResolutionView/index.js

@@ -308,7 +308,7 @@ const ResolutionView = ({ resources, filterState, filterResult, resolutionState,
     }, [resolutionActions]);
     // Handle new resource creation
     const handleStartNewResource = (0, react_1.useCallback)(() => {
-        resolutionActions?.startNewResource(defaultResourceType);
+        resolutionActions?.startNewResource({ defaultTypeName: defaultResourceType });
         setShowNewResourceModal(true);
     }, [resolutionActions]);
     const handleCloseNewResourceModal = (0, react_1.useCallback)(() => {