@integry/sdk 4.6.58 → 4.6.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.58",
+  "version": "4.6.60",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/TagsMenu/index.ts

@@ -1,8 +1,8 @@
 'use client';
 
 import { html } from 'htm/preact';
-import { render } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
+import { Hint } from '@/components/Tooltip';
 import styles from './styles.module.scss';
 
 // Update the TagNode interface to better handle various types
@@ -848,6 +848,35 @@ const TagList = ({
             tagsParamForOutput = value as Record<string, unknown>;
           }
 
+          const handleMenuRowClcik = (e: Event) => {
+            if (isStep && hasOutput) {
+              // For step nodes with output, toggle output expansion
+              setExpandedOutputs((prev) => ({
+                ...prev,
+                [key]: !prev[key],
+              }));
+            } else if (hasChildren) {
+              // For array/object nodes, toggle node expansion
+              toggleExpand(key);
+              toggleOutputExpand(key, e);
+            } else {
+              // For leaf nodes, select the value
+              const tagPath = `${activeTab}.${extractStepsFromOutputPath(
+                currentPath,
+              )}`;
+              onSelect({
+                currentPath: tagPath
+                  .replace(/\bparameters\.parameters\b/g, 'parameters')
+                  .replace(
+                    /\bauthorization\.authorization\b/g,
+                    'authorization',
+                  ),
+                key,
+                value: escapeHTMLIfNeeded(value),
+              });
+            }
+          };
+
           return html`
             <li key=${key} class="${nodeMatches ? styles.searchMatch : ''}">
               <div
@@ -898,17 +927,23 @@ const TagList = ({
                 (typeof value === 'string' ||
                   typeof value === 'number' ||
                   typeof value === 'boolean')
-                  ? html`<span class="${styles.value}">
-                      ${value ? ' ' : ''}
-                      <span
-                        dangerouslySetInnerHTML=${{
-                          __html: highlightSearchTerm(
-                            String(value),
-                            searchTerm,
-                          ),
-                        }}
-                      ></span>
-                    </span>`
+                  ? html`<${Hint}
+                      dismissOnClick=${false}
+                      position="top"
+                      deltaY=${0}
+                      className=${styles.hint}
+                      ><span class="${styles.value}">
+                        ${value ? ' ' : ''}
+                        <span
+                          data-hint=${value ? String(value) : ''}
+                          dangerouslySetInnerHTML=${{
+                            __html: highlightSearchTerm(
+                              String(value),
+                              searchTerm,
+                            ),
+                          }}
+                        ></span> </span
+                    ><//>`
                   : ''}
                 ${isStep &&
                 value !== undefined &&
@@ -951,7 +986,7 @@ const TagList = ({
                 ${Array.isArray(value) && value.length > 0
                   ? html`<span
                       class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                      onClick=${(e: Event) => toggleOutputExpand(key, e)}
+                      onClick=${(e: Event) => handleMenuRowClcik(e)}
                       title="Toggle expand output"
                     >
                       <svg
@@ -982,7 +1017,9 @@ const TagList = ({
                 Object.keys(value as Record<string, unknown>).length > 0
                   ? html`<span
                       class="${styles.outputIndicator} ${styles.objectExpandIcon}"
-                      onClick=${(e: Event) => toggleOutputExpand(key, e)}
+                      onClick=${(e: Event) => {
+                        handleMenuRowClcik(e);
+                      }}
                       title="Toggle expand output"
                     >
                       <svg

package/src/components/TagsMenu/styles.module.scss

@@ -120,6 +120,10 @@
           border-radius: 4px;
           padding-left: 4px;
           padding-right: 4px;
+          [class^='styles-module_preact-hint__content_'] {
+            white-space: pre-wrap;
+            word-break: break-word;
+          }
 
           &:hover {
             background-color: rgba(66, 80, 240, 0.1);
@@ -134,8 +138,8 @@
             }
           }
           span.tagIcon {
-            margin-right: 10px;
-            order: 1;
+            margin-right: 5px;
+            order: 2;
             svg,
             img {
               width: 1rem;
@@ -194,6 +198,12 @@
               }
             }
           }
+          div.hint {
+            order: 4;
+            max-width: 100%;
+            min-width: 0;
+            width: 100%;
+          }
           span.value {
             color: hsl(240 3.8% 60%);
             font-size: 0.75rem;
@@ -204,6 +214,9 @@
             white-space: nowrap;
             margin-left: 5px;
             order: 4;
+            display: inline-block;
+            max-width: 100%;
+            vertical-align: middle;
 
             mark {
               background-color: yellow;
@@ -223,6 +236,9 @@
             white-space: nowrap;
             margin-left: 5px;
             min-width: 20px;
+            width: 100%;
+            max-width: fit-content;
+            flex-shrink: 0;
 
             mark {
               background-color: yellow;