@odigos/ui-kit 0.0.22 → 0.0.23

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.0.23](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.22...ui-kit-v0.0.23) (2025-04-14)
+
+
+### Bug Fixes
+
+* icon group and wrapper design ([#84](https://github.com/odigos-io/ui-kit/issues/84)) ([c4761b3](https://github.com/odigos-io/ui-kit/commit/c4761b399f36124696da4f01ba18a8e4c30eddef))
+* text truncation logic and add word break support in Tooltip ([#83](https://github.com/odigos-io/ui-kit/issues/83)) ([afc7508](https://github.com/odigos-io/ui-kit/commit/afc7508b1c55330b2152b8fa3b52507e86143eaf))
+* untyped destinations ([#82](https://github.com/odigos-io/ui-kit/issues/82)) ([ed93ecd](https://github.com/odigos-io/ui-kit/commit/ed93ecd5e192e247bd0ef29d19907245718618e3))
+
 ## [0.0.22](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.21...ui-kit-v0.0.22) (2025-04-10)
 
 

package/lib/components.js

@@ -1,5 +1,5 @@
-import { B as Button } from './index-3mlRUlHD.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a1 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a3 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a2 as Overlay, S as ScrollX, O as SectionTitle, P as Segment, Q as SkeletonLoader, R as Status, U as Stepper, a4 as TableContainer, a5 as TableTitleWrap, a6 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, _ as WarningModal } from './index-3mlRUlHD.js';
+import { B as Button } from './index-BKyIuPoq.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a1 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a3 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a2 as Overlay, S as ScrollX, O as SectionTitle, P as Segment, Q as SkeletonLoader, R as Status, U as Stepper, a4 as TableContainer, a5 as TableTitleWrap, a6 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, _ as WarningModal } from './index-BKyIuPoq.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';

package/lib/containers.js

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-D3sp5Hx7.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, V as Text, P as Segment, O as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, W as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a3 as ModalBody, A as AutocompleteInput, i as Divider, R as Status, $ as FlexRow, Y as Tooltip, s as IconWrapped, G as MonitorsIcons, a4 as TableContainer, a5 as TableTitleWrap, r as IconTitleBadge, a6 as TableWrap, y as InteractiveTable, a1 as CenterThis, J as NoDataFound, a0 as FlexColumn, Z as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a7 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, L as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-3mlRUlHD.js';
+import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, V as Text, P as Segment, O as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, W as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a3 as ModalBody, A as AutocompleteInput, i as Divider, R as Status, $ as FlexRow, Y as Tooltip, s as IconWrapped, G as MonitorsIcons, a4 as TableContainer, a5 as TableTitleWrap, r as IconTitleBadge, a6 as TableWrap, y as InteractiveTable, a1 as CenterThis, J as NoDataFound, a0 as FlexColumn, Z as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a7 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, L as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-BKyIuPoq.js';
 import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DiTtXTRm.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
@@ -13958,7 +13958,6 @@ const buildCard$2 = (destination, yamlFields) => {
         { title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
         { title: DISPLAY_TITLES.TYPE, value: destinationType.type },
         { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.Monitors, value: buildMonitorsList(exportedSignals) },
-        { type: DataCardFieldTypes.Divider },
     ];
     const parsedFields = safeJsonParse(fields, {});
     const sortedParsedFields = yamlFields.map((field) => ({ key: field.name, value: parsedFields[field.name] ?? null })).filter((item) => item.value !== null) ||
@@ -13971,6 +13970,7 @@ const buildCard$2 = (destination, yamlFields) => {
         if (!shouldHide) {
             const { type } = safeJsonParse(componentProperties, { type: '' });
             const isSecret = (secret || type === 'password') && !!value.length ? new Array(10).fill('•').join('') : '';
+            arr.push({ type: DataCardFieldTypes.Divider });
             if (!!customReadDataLabels?.length) {
                 customReadDataLabels.forEach(({ condition, ...custom }) => {
                     if (condition == value) {
@@ -14205,8 +14205,8 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
     }, [isOpen, drawerEntityId, destinations]);
     if (!thisItem)
         return null;
-    const thisOptionType = categories.map(({ items }) => items.filter(({ type }) => type === thisItem.destinationType.type)).filter((arr) => !!arr.length)?.[0]?.[0];
-    const { icon, iconSrc } = getDestinationIcon(thisOptionType.type);
+    const thisOptionType = categories.flatMap((category) => category.items).find((option) => option.type === thisItem.destinationType.type);
+    const { icon, iconSrc } = thisOptionType ? getDestinationIcon(thisOptionType?.type) : { icon: undefined, iconSrc: undefined };
     const handleEdit = (bool) => {
         setIsEditing(typeof bool === 'boolean' ? bool : true);
     };

package/lib/{index-3mlRUlHD.js → index-BKyIuPoq.js}

@@ -397,6 +397,10 @@ const TooltipContainer = styled.div `
   gap: 4px;
   cursor: help;
 `;
+const TextBreakWord = styled(Text) `
+  word-break: break-word;
+  white-space: pre-wrap;
+`;
 const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, children }) => {
     const theme = Theme.useTheme();
     const [isHovered, setIsHovered] = useState(false);
@@ -426,7 +430,7 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
                     title && React.createElement(React.Fragment, null,
                         title,
                         "\u00A0-\u00A0"))),
-                React.createElement(Text, { size: 12, color: theme.text.info }, text),
+                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
                 !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString())))))));
 };
 const PopupContainer = styled.div `
@@ -4085,7 +4089,7 @@ const Status = ({ title, subtitle, size = 12, family = 'secondary', status = Sta
 };
 
 const LimitedText = styled(Text) `
-  max-width: ${({ $maxWidth }) => `${$maxWidth}px` || 'unset'};
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'unset')};
   white-space: nowrap;
   overflow-x: auto;
 
@@ -4095,23 +4099,22 @@ const LimitedText = styled(Text) `
     display: block;
   }
 `;
-const ELIPSIS_WIDTH = 12;
-const ScrollX = ({ maxWidth, text, textSize, textColor }) => {
+const ScrollX = ({ maxWidth, text, textSize = 16, textColor }) => {
     const [isOverflowed, setIsOverflowed] = useState(false);
     const ref = useRef(null);
     // Check if text is overflowed from maximum width
     useEffect(() => {
         if (ref.current) {
             const { clientWidth } = ref.current;
-            const marginUp = (maxWidth - ELIPSIS_WIDTH) * 1.05; // add 5%
-            const marginDown = (maxWidth - ELIPSIS_WIDTH) * 0.95; // subtract 5%
+            const marginUp = (maxWidth - textSize) * 1.05; // add 5%
+            const marginDown = (maxWidth - textSize) * 0.95; // subtract 5%
             setIsOverflowed(clientWidth < marginUp && clientWidth > marginDown);
         }
-    }, [maxWidth, text]);
+    }, [maxWidth, textSize, text]);
     return (React.createElement(FlexRow, { "$gap": 0 },
         text && (React.createElement(Tooltip, { text: isOverflowed ? text : undefined },
-            React.createElement(LimitedText, { ref: ref, "$maxWidth": maxWidth - ELIPSIS_WIDTH, size: textSize, color: textColor }, text))),
-        isOverflowed && (React.createElement(LimitedText, { "$maxWidth": ELIPSIS_WIDTH, size: textSize, color: textColor }, "..."))));
+            React.createElement(LimitedText, { ref: ref, "$maxWidth": maxWidth - textSize, size: textSize, color: textColor }, text))),
+        isOverflowed && (React.createElement(LimitedText, { "$maxWidth": textSize, size: textSize, color: textColor }, "..."))));
 };
 
 const ImageControlled = ({ src = '', alt = '', size = 16 }) => {
@@ -4130,12 +4133,12 @@ const Container$o = styled.div `
   height: ${({ $size }) => $size}px;
   border-radius: 8px;
   background: ${({ $status, theme }) => {
-    const clr = $status ? theme.text[$status] : theme.text.secondary;
-    return `linear-gradient(180deg, ${clr + Theme.opacity.hex['020']} 0%, ${clr + Theme.opacity.hex['005']} 100%)`;
+    const clr = theme.colors[$status || 'dropdown_bg_2'];
+    return `linear-gradient(180deg, ${clr} 0%, ${clr + Theme.opacity.hex['030']} 100%)`;
 }};
 `;
 const IconWrapped = ({ icon: Icon, src = '', alt = '', status, size = 36 }) => {
-    return (React.createElement(Container$o, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 16 }) : !!Icon ? React.createElement(Icon, { size: size - 16 }) : React.createElement(ImageErrorIcon, { size: size - 16 })));
+    return (React.createElement(Container$o, { "$status": status, "$size": size }, src ? React.createElement(ImageControlled, { src: src, alt: alt, size: size - 12 }) : !!Icon ? React.createElement(Icon, { size: size - 12 }) : React.createElement(ImageErrorIcon, { size: size - 12 })));
 };
 
 const Container$n = styled.div `
@@ -4146,11 +4149,6 @@ const Container$n = styled.div `
   justify-content: center;
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
-  border-radius: 8px;
-  background: ${({ $status, theme }) => {
-    const clr = $status ? theme.text[$status] : theme.text.secondary;
-    return `linear-gradient(180deg, ${clr + Theme.opacity.hex['020']} 0%, ${clr + Theme.opacity.hex['005']} 100%)`;
-}};
 `;
 const IconWrapper$3 = styled.div `
   position: absolute;
@@ -4163,10 +4161,17 @@ const IconWrapper$3 = styled.div `
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   border-radius: 100%;
+  border: 1px solid ${({ theme, $status }) => ($status ? theme.text[$status] : theme.colors.border) + Theme.opacity.hex['030']};
+  background: ${({ $status, theme }) => {
+    const clr = theme.colors[$status || 'dropdown_bg_2'];
+    return `linear-gradient(180deg, ${clr} 0%, ${clr + Theme.opacity.hex['030']} 100%)`;
+}};
 `;
 const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
     const theme = Theme.useTheme();
-    const imgSize = icons.length === 1 || iconSrcs.length === 1 ? size - 16 : size / 3;
+    const SINGLE_ICON_PADDING = 12;
+    const MULTI_ICON_SCALE_DIVIDER = 2.7;
+    const imgSize = icons.length === 1 || iconSrcs.length === 1 ? size - SINGLE_ICON_PADDING : size / MULTI_ICON_SCALE_DIVIDER;
     if (iconSrcs.length > 0) {
         return React.createElement(IconGroup, { icons: iconSrcs.map((src) => (() => React.createElement(ImageControlled, { src: src, size: imgSize }))), status: status, size: size, id: id });
     }
@@ -4174,24 +4179,25 @@ const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36, id }) => {
         return React.createElement(IconWrapped, { icon: icons[0], status: status, size: size });
     }
     const getTopPosition = (idx) => {
-        if (icons.length > 2) {
-            return idx === 0 || idx === 1 ? imgSize * 0.2 : imgSize * 1.4;
-        }
-        return imgSize * 0.7;
+        // The multiplications are magic numbers chosen based on the divider of the image size (currently 2.7)
+        if (icons.length <= 2)
+            return imgSize * 0.5;
+        if (idx === 0 || idx === 1)
+            return 0;
+        return imgSize * 1.15;
     };
     const getLeftPosition = (idx) => {
-        if (idx >= 2) {
-            return imgSize * 0.7;
-        }
-        else if (idx % 2 === 0) {
-            return imgSize * 0.05;
-        }
-        return imgSize * 1.4;
+        // The multiplications are magic numbers chosen based on the divider of the image size (currently 2.7)
+        if (idx === 0)
+            return 0;
+        if (idx === 1)
+            return imgSize * 1.15;
+        return imgSize * 1.15 * 0.5;
     };
     return (React.createElement(Container$n, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
         if (idx > 2)
             return null;
-        return (React.createElement(IconWrapper$3, { key: `icon-${id}-${idx}`, "$size": imgSize * 1.5, "$top": getTopPosition(idx), "$left": getLeftPosition(idx), "$zIndex": idx + 1 }, idx === 2 && icons.length > 3 ? (React.createElement(Text, { family: 'secondary', color: theme.text.dark_grey, size: imgSize * 0.8 },
+        return (React.createElement(IconWrapper$3, { key: `icon-${id}-${idx}`, "$status": status, "$size": imgSize * 1.5, "$top": getTopPosition(idx), "$left": getLeftPosition(idx), "$zIndex": idx + 1 }, idx === 2 && icons.length > 3 ? (React.createElement(Text, { family: 'secondary', color: theme.text.dark_grey, size: imgSize * 0.8 },
             "+",
             icons.length - 2)) : (React.createElement(Icon, { size: imgSize }))));
     })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "author": "Odigos",
   "repository": {
     "type": "git",