@integry/sdk 4.6.27 → 4.6.29

package/package.json

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

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -529,7 +529,8 @@ const ListBox = (props: ListBoxProps) => {
     setSearchValue('');
     let fieldVal = el.value;
     if (isMultiSelect) {
-      const fieldIds = value ? JSON.parse(value) : [];
+      let fieldIds = value ? JSON.parse(value) : [];
+      fieldIds = Array.isArray(fieldIds) ? fieldIds : [String(fieldIds)];
       // check if el.id is already selected and then remove it
       if (fieldIds.includes(el.id)) {
         const index = fieldIds.indexOf(el.id);
@@ -546,8 +547,8 @@ const ListBox = (props: ListBoxProps) => {
       if (indexes.length > 0) {
         fieldVal = indexes.map((i) => items[i].value).join(', ');
       }
-      onChange(JSON.stringify(fieldIds));
-      setEditableTextValue(JSON.stringify(fieldIds));
+      onChange(fieldIds.length > 0 ? JSON.stringify(fieldIds) : '');
+      setEditableTextValue(fieldIds.length > 0 ? JSON.stringify(fieldIds) : '');
     } else {
       onChange(el.id);
       setEditableTextValue(fieldVal);
@@ -600,12 +601,14 @@ const ListBox = (props: ListBoxProps) => {
   const getSelectedItem = useMemo(() => {
     let index = -1;
     if (isMultiSelect) {
-      const values = value ? JSON.parse(value) : [];
+      let values = value ? JSON.parse(value) : [];
+      values = Array.isArray(values) ? values : [String(values)];
       const indexes: any = [];
-      const selectedValues = values.map((val: any) => {
-        index = items.findIndex((el) => el.id === val);
-        indexes.push(index);
-      });
+      const selectedValues =
+        values.map((val: any) => {
+          index = items.findIndex((el) => el.id === val);
+          indexes.push(index);
+        }) || [];
       if (indexes.length > 0 && items.length > 0) {
         return indexes.map((i: number) => items[i].value).join(', ');
       }

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -215,6 +215,9 @@ const FieldDropdown = (props: FieldMenuProps) => {
   if (value) {
     if (isMultiSelect) {
       selectedValues = JSON.parse(value);
+      selectedValues = Array.isArray(selectedValues)
+        ? selectedValues
+        : [String(selectedValues)];
     } else {
       selectedValues = [value];
     }

package/src/components/TagsMenu/index.ts

@@ -515,10 +515,29 @@ const TagList = ({
     }));
   };
 
+  const escapeHTMLIfNeeded = (input: any) => {
+    if (typeof input !== 'string') {
+      return input;
+    }
+    const isHTML = /<\/?[a-z][\s\S]*>/i.test(input);
+
+    const output = isHTML
+      ? input
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#039;')
+      : input;
+
+    return output.length > 200 ? `${output.slice(0, 200)}...` : output;
+  };
+
   const highlightSearchTerm = (text: string, term: string) => {
-    if (!term) return text;
+    const textModified = escapeHTMLIfNeeded(text);
+    if (!term) return textModified;
     const regex = new RegExp(`(${term})`, 'gi');
-    return text.replace(regex, '<mark>$1</mark>');
+    return textModified.replace(regex, '<mark>$1</mark>');
   };
 
   // Update the filterTags function with proper type checking
@@ -718,7 +737,11 @@ const TagList = ({
                     const tagPath = `${activeTab}.${extractStepsFromOutputPath(
                       currentPath,
                     )}`;
-                    onSelect({ currentPath: tagPath, key, value });
+                    onSelect({
+                      currentPath: tagPath,
+                      key,
+                      value: escapeHTMLIfNeeded(value),
+                    });
                   }
                 }}
                 class="${styles.listItemContent}"
@@ -1011,45 +1034,21 @@ const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
     if (name.includes('parameter')) {
       return html`
         <svg
-          width="18"
-          height="18"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
           viewBox="0 0 24 24"
           fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-variable"
         >
-          <path
-            d="M4 6H14"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-          />
-          <circle cx="18" cy="6" r="2" stroke="currentColor" stroke-width="2" />
-          <path
-            d="M4 12H10"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-          />
-          <circle
-            cx="14"
-            cy="12"
-            r="2"
-            stroke="currentColor"
-            stroke-width="2"
-          />
-          <path
-            d="M4 18H12"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-          />
-          <circle
-            cx="16"
-            cy="18"
-            r="2"
-            stroke="currentColor"
-            stroke-width="2"
-          />
+          <path d="M8 21s-4-3-4-9 4-9 4-9" />
+          <path d="M16 3s4 3 4 9-4 9-4 9" />
+          <line x1="15" x2="9" y1="9" y2="15" />
+          <line x1="9" x2="15" y1="9" y2="15" />
         </svg>
       `;
     }