@odigos/ui-kit 0.0.14 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.15](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.14...ui-kit-v0.0.15) (2025-03-24)
+
+
+### Bug Fixes
+
+* :bug: react minified 310 error ([#40](https://github.com/odigos-io/ui-kit/issues/40)) ([eb1fa39](https://github.com/odigos-io/ui-kit/commit/eb1fa399a9244f95223b307fc0a2506845283043))
+
 ## [0.0.14](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.13...ui-kit-v0.0.14) (2025-03-20)
 
 

package/lib/components/data-tab/data-tab.stories.d.ts

@@ -1,9 +1,15 @@
 import React from 'react';
 import { type DataTabProps } from '.';
-import type { StoryFn } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
     component: React.FC<DataTabProps>;
 };
 export default _default;
-export declare const Default: StoryFn<DataTabProps>;
+export declare const NoStatus: StoryObj<DataTabProps>;
+export declare const ForcedBgColor: StoryObj<DataTabProps>;
+export declare const InfoStatus: StoryObj<DataTabProps>;
+export declare const DefaultStatus: StoryObj<DataTabProps>;
+export declare const ErrorStatus: StoryObj<DataTabProps>;
+export declare const WarningStatus: StoryObj<DataTabProps>;
+export declare const SuccessStatus: StoryObj<DataTabProps>;

package/lib/components/data-tab/index.d.ts

@@ -1,4 +1,4 @@
-import { type FC, type ReactNode } from 'react';
+import { type CSSProperties, type FC, type ReactNode } from 'react';
 import type { SVG } from '@/types';
 import { StatusType, SignalType } from '@/types';
 interface DataTabProps {
@@ -11,6 +11,8 @@ interface DataTabProps {
     hoverText?: string;
     status?: StatusType;
     faded?: boolean;
+    bgColor?: CSSProperties['backgroundColor'];
+    bgColorHover?: CSSProperties['backgroundColor'];
     monitors?: SignalType[];
     monitorsWithLabels?: boolean;
     isActive?: boolean;

package/lib/components.js

@@ -1,5 +1,5 @@
-import { B as Button } from './index-B5wdZoej.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 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, $ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-B5wdZoej.js';
+import { B as Button } from './index-zMKRaKMY.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 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, $ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-zMKRaKMY.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';

package/lib/containers/data-flow-actions-menu/filters/index.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
-import type { Source } from '@/types';
 interface Props {
     namespaces: {
         name: string;
     }[];
-    sources: Source[];
 }
 export declare const Filters: React.FC<Props>;
 export {};

package/lib/containers/data-flow-actions-menu/styled.d.ts

@@ -1,2 +1,4 @@
 export declare const RelativeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const AbsoluteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AbsoluteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hidden?: boolean;
+}>> & string;

package/lib/containers/overview-drawer/index.d.ts

@@ -16,5 +16,8 @@ interface OverviewDrawerProps extends PropsWithChildren {
     onCancel?: () => void;
     tabs?: DrawerProps['header']['tabs'];
 }
-declare const OverviewDrawer: React.FC<OverviewDrawerProps>;
-export { OverviewDrawer, type OverviewDrawerProps };
+interface OverviewDrawerRef {
+    closeDrawer: () => void;
+}
+declare const OverviewDrawer: React.ForwardRefExoticComponent<OverviewDrawerProps & React.RefAttributes<OverviewDrawerRef>>;
+export { OverviewDrawer, type OverviewDrawerProps, type OverviewDrawerRef };

package/lib/containers/overview-drawer/overview-drawer.stories.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { StoryFn } from '@storybook/react';
-import { type OverviewDrawerProps } from '.';
+import { type OverviewDrawerRef, type OverviewDrawerProps } from '.';
 declare const _default: {
     title: string;
-    component: React.FC<OverviewDrawerProps>;
+    component: React.ForwardRefExoticComponent<OverviewDrawerProps & React.RefAttributes<OverviewDrawerRef>>;
 };
 export default _default;
 export declare const Default: StoryFn<OverviewDrawerProps>;

package/lib/containers.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, useId, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
 import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CJKFedQi.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, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-B5wdZoej.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, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-zMKRaKMY.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-DYEcdkUF.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
@@ -332,7 +332,7 @@ const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }
         React.createElement(TextArea, { title: 'Notes', value: formData['notes'], onChange: ({ target: { value } }) => handleFormChange('notes', value), errorMessage: formErrors['notes'] })));
 };
 
-const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, iconSrc, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs, }) => {
+const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, icon, iconSrc, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs }, drawerRef) => {
     const theme = Theme.useTheme();
     const { isThisPending } = usePendingStore();
     const { addNotification } = useNotificationStore();
@@ -342,18 +342,20 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
     const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
     const titleRef = useRef(null);
     const isSource = drawerType === EntityTypes.Source;
-    const closeDrawer = () => {
-        setDrawerType(null);
-        setDrawerEntityId(null);
-        if (onEdit)
-            onEdit(false);
-        setIsDeleteModalOpen(false);
-        setIsCancelModalOpen(false);
-    };
     const closeWarningModals = () => {
         setIsDeleteModalOpen(false);
         setIsCancelModalOpen(false);
     };
+    const closeDrawer = () => {
+        closeWarningModals();
+        if (onEdit)
+            onEdit(false);
+        setDrawerType(null);
+        setDrawerEntityId(null);
+    };
+    useImperativeHandle(drawerRef, () => ({
+        closeDrawer,
+    }));
     const handleCancel = () => {
         titleRef.current?.clearTitle();
         if (onCancel)
@@ -402,7 +404,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
         actionButtons.push({
             'data-id': 'drawer-edit',
             variant: 'tertiary',
-            onClick: isPending ? () => handlePending('edit') : onEdit ? () => onEdit(true) : undefined,
+            onClick: isPending ? () => handlePending('edit') : () => onEdit(true),
             children: (React.createElement(React.Fragment, null,
                 React.createElement(EditIcon, null),
                 React.createElement(Text, { size: 14, family: 'secondary', decoration: 'underline' }, "Edit"))),
@@ -411,7 +413,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
         actionButtons.push({
             'data-id': 'drawer-delete',
             variant: 'tertiary',
-            onClick: isPending ? () => handlePending(isSource ? 'uninstrument' : 'delete') : onEdit ? clickDelete : undefined,
+            onClick: isPending ? () => handlePending(isSource ? 'uninstrument' : 'delete') : clickDelete,
             children: (React.createElement(React.Fragment, null,
                 React.createElement(TrashIcon, null),
                 React.createElement(Text, { color: theme.text.error, size: 14, family: 'secondary', decoration: 'underline' }, isSource ? 'Uninstrument' : 'Delete'))),
@@ -454,7 +456,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
             } }, children),
         React.createElement(DeleteWarning, { isOpen: isDeleteModalOpen, noOverlay: true, name: `${drawerType}${title ? ` (${title})` : ''}`, type: drawerType, isLastItem: isLastItem, onApprove: handleDelete, onDeny: closeWarningModals }),
         React.createElement(CancelWarning, { isOpen: isCancelModalOpen, noOverlay: true, name: 'edit mode', onApprove: handleCancel, onDeny: closeWarningModals })));
-};
+});
 const EditTitle = forwardRef(({ title }, ref) => {
     const [inputValue, setInputValue] = useState(title);
     useEffect(() => {
@@ -482,12 +484,9 @@ const DataContainer$3 = styled.div `
 `;
 const ActionDrawer = ({ updateAction, deleteAction }) => {
     const { actions } = useEntityStore();
-    const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
+    const { drawerType, drawerEntityId } = useDrawerStore();
+    const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.Action;
-    const onClose = () => {
-        setDrawerType(null);
-        setDrawerEntityId(null);
-    };
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
@@ -518,7 +517,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         setIsFormDirty(false);
         resetFormData();
         // close drawer, all other cases are handled in OverviewDrawer
-        onClose();
+        drawerRef.current?.closeDrawer();
     };
     const handleSave = (newTitle) => {
         if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
@@ -529,7 +528,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { title: thisItem.spec.actionName || thisItem.type, icon: getActionIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$3, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.spec.actionName || thisItem.type, icon: getActionIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$3, null,
         React.createElement(ActionForm, { isUpdate: true, action: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -657,7 +656,7 @@ const ConditionsStatuses = ({ conditions }) => {
         if (status === 'loading' || status === 'disabled')
             status = StatusType.Info;
         const icon = getStatusIcon(status, theme);
-        return (React.createElement(Tooltip, { key: useId(), titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
+        return (React.createElement(Tooltip, { key: crypto.randomUUID(), titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
             React.createElement(Status, { status: status, title: reason || type, withBorder: true, withIcon: true })));
     })));
 };
@@ -13545,6 +13544,7 @@ const AbsoluteContainer$1 = styled.div `
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
   border-radius: 24px;
   width: 420px;
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};
 `;
 
 const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
@@ -13675,6 +13675,13 @@ const Actions = styled.div `
   padding: 12px;
   border-top: ${({ theme }) => `1px solid ${theme.colors.border}`};
 `;
+const ActionButton$1 = styled(Button) `
+  font-size: 14px;
+  ${({ $color }) => `color: ${$color};`}
+`;
+const PushRight = styled.div `
+  margin-left: auto;
+`;
 const getFilterCount = (params) => {
     let count = 0;
     count += params.namespaces?.length || 0;
@@ -13688,7 +13695,6 @@ const getFilterCount = (params) => {
 };
 const Filters$1 = ({ namespaces: namespaceItems }) => {
     const theme = Theme.useTheme();
-    const { sources } = useEntityStore();
     const { namespaces, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
     // We need local state, because we want to keep the filters in the store only when the user clicks on apply
     const [filters, setFilters] = useState({ namespaces, kinds, monitors, languages, errors, onlyErrors });
@@ -13703,9 +13709,15 @@ const Filters$1 = ({ namespaces: namespaceItems }) => {
         }
     }, [focused, namespaces, kinds, monitors, errors, onlyErrors]);
     const onApply = () => {
-        setAll(filters);
-        setFilterCount(getFilterCount(filters));
-        setFocused(false);
+        // TODO: remove trycatch after debugging
+        try {
+            setAll(filters);
+            setFilterCount(getFilterCount(filters));
+            setFocused(false);
+        }
+        catch (error) {
+            console.error(error);
+        }
     };
     const onReset = () => {
         clearAll();
@@ -13713,15 +13725,17 @@ const Filters$1 = ({ namespaces: namespaceItems }) => {
         setFilterCount(0);
         setFocused(false);
     };
-    const onCancel = useCallback(() => setFocused(false), []);
+    const onCancel = () => {
+        setFocused(false);
+    };
     const ref = useRef(null);
     useOnClickOutside(ref, onCancel);
     useKeyDown({ key: 'Escape', active: focused }, onCancel);
     return (React.createElement(RelativeContainer$1, { ref: ref },
         React.createElement(SelectionButton, { label: 'Filters', icon: FilterIcon, badgeLabel: filterCount, badgeFilled: !!filterCount, withBorder: true, color: 'transparent', onClick: toggleFocused }),
-        focused && (React.createElement(AbsoluteContainer$1, null,
+        React.createElement(AbsoluteContainer$1, { "$hidden": !focused },
             React.createElement(FormWrapper, null,
-                React.createElement(NamespaceDropdown, { namespaces: !!namespaceItems?.length ? namespaceItems : sources?.map(({ namespace }) => ({ name: namespace })) || [], value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
+                React.createElement(NamespaceDropdown, { namespaces: namespaceItems, value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(KindDropdown, { value: filters['kinds'], onSelect: (val) => setFilters((prev) => ({ ...prev, kinds: [...(prev.kinds || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, kinds: (prev.kinds || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(LanguageDropdown, { value: filters['languages'], onSelect: (val) => setFilters((prev) => ({ ...prev, languages: [...(prev.languages || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, languages: (prev.languages || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(MonitorDropdown, { value: filters['monitors'], onSelect: (val) => setFilters((prev) => ({ ...prev, monitors: [...(prev.monitors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, monitors: (prev.monitors || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
@@ -13729,9 +13743,10 @@ const Filters$1 = ({ namespaces: namespaceItems }) => {
                     React.createElement(Toggle, { title: 'Show only sources with errors', initialValue: filters['onlyErrors'], onChange: (bool) => setFilters((prev) => ({ ...prev, errors: [], onlyErrors: bool })) })),
                 React.createElement(ErrorDropdown, { value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })),
             React.createElement(Actions, null,
-                React.createElement(Button, { variant: 'primary', onClick: onApply, style: { fontSize: 14 } }, "Apply"),
-                React.createElement(Button, { variant: 'secondary', onClick: onCancel, style: { fontSize: 14 } }, "Cancel"),
-                React.createElement(Button, { variant: 'tertiary', onClick: onReset, style: { fontSize: 14, color: theme.text.error, marginLeft: '160px' } }, "Reset"))))));
+                React.createElement(ActionButton$1, { variant: 'primary', onClick: onApply }, "Apply"),
+                React.createElement(ActionButton$1, { variant: 'secondary', onClick: onCancel }, "Cancel"),
+                React.createElement(PushRight, null,
+                    React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))))));
 };
 
 const Container$b = styled.div `
@@ -13756,10 +13771,9 @@ const AddButton = styled(Button) `
 const DataFlowActionsMenu = ({ namespaces, addEntity }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
-    const { sources, destinations, actions, instrumentationRules } = useEntityStore();
     return (React.createElement(Container$b, null,
         React.createElement(Search, null),
-        React.createElement(Filters$1, { namespaces: namespaces, sources: sources }),
+        React.createElement(Filters$1, { namespaces: namespaces }),
         addEntity && (React.createElement(PushToEnd, null,
             React.createElement(AddButton, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity) },
                 React.createElement(PlusIcon$1, { fill: theme.colors.primary }),
@@ -13991,12 +14005,9 @@ const DataContainer$2 = styled.div `
 `;
 const DestinationDrawer = ({ categories, updateDestination, deleteDestination, testConnection, testLoading, testResult }) => {
     const { destinations } = useEntityStore();
-    const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
+    const { drawerType, drawerEntityId } = useDrawerStore();
+    const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.Destination;
-    const onClose = () => {
-        setDrawerType(null);
-        setDrawerEntityId(null);
-    };
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     // const [thisItem, setThisItem] = useState<Destination | undefined>(undefined)
@@ -14044,7 +14055,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
         setIsFormDirty(false);
         resetFormData();
         // close drawer, all other cases are handled in OverviewDrawer
-        onClose();
+        drawerRef.current?.closeDrawer();
     };
     const handleSave = async (newTitle) => {
         if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
@@ -14055,7 +14066,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { title: thisItem.name || thisItem.destinationType.displayName, iconSrc: thisItem.destinationType.imageUrl, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinations.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, iconSrc: thisItem.destinationType.imageUrl, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinations.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
         React.createElement(DestinationForm, { isUpdate: true, categoryItem: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -14615,12 +14626,9 @@ const FormContainer$1 = styled.div `
 const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrumentationRule }) => {
     const { instrumentationRules } = useEntityStore();
     const { addNotification } = useNotificationStore();
-    const { drawerType, drawerEntityId, setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const { drawerType, drawerEntityId } = useDrawerStore();
+    const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.InstrumentationRule;
-    const onClose = () => {
-        setDrawerType(null);
-        setDrawerEntityId(null);
-    };
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData();
@@ -14672,7 +14680,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
             setIsFormDirty(false);
             resetFormData();
             // close drawer, all other cases are handled in OverviewDrawer
-            onClose();
+            drawerRef.current?.closeDrawer();
         }
     };
     const handleSave = (newTitle) => {
@@ -14684,7 +14692,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { title: thisItem.ruleName || thisItem.type, icon: getInstrumentationRuleIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$1, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.ruleName || thisItem.type, icon: getInstrumentationRuleIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$1, null,
         React.createElement(InstrumentationRuleForm, { isUpdate: true, rule: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -15220,16 +15228,12 @@ const DataContainer$1 = styled.div `
 `;
 const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) => {
     const { sources } = useEntityStore();
-    const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
-    const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
+    const { drawerType, drawerEntityId } = useDrawerStore();
+    const drawerRef = useRef(null);
     const isOpen = drawerType !== EntityTypes.Source;
-    const onClose = () => {
-        setSelectedTab(Tabs.Overview);
-        setDrawerType(null);
-        setDrawerEntityId(null);
-    };
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
+    const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
     const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useSourceFormData();
     const thisItem = useMemo(() => {
         if (isOpen)
@@ -15249,27 +15253,27 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         setIsEditing(typeof bool === 'boolean' ? bool : true);
     };
     const handleCancel = () => {
-        setIsEditing(false);
         setIsFormDirty(false);
+        setIsEditing(false);
         handleFormChange('otelServiceName', thisItem.otelServiceName || thisItem.name || '');
     };
     const handleDelete = async () => {
         const { namespace } = thisItem;
         persistSources({ [namespace]: [{ ...thisItem, selected: false }] }, {});
-        setIsEditing(false);
         setIsFormDirty(false);
+        setIsEditing(false);
         resetFormData();
         // close drawer, all other cases are handled in OverviewDrawer
-        onClose();
+        drawerRef.current?.closeDrawer();
     };
     const handleSave = async () => {
         const title = formData.otelServiceName !== thisItem.name ? formData.otelServiceName : '';
         handleFormChange('otelServiceName', title);
         await updateSource(drawerEntityId, { ...formData, otelServiceName: title });
-        setIsEditing(false);
         setIsFormDirty(false);
+        setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icon: getEntityIcon(EntityTypes.Source), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icon: getEntityIcon(EntityTypes.Source), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
             {
                 label: Tabs.Overview,
                 onClick: () => setSelectedTab(Tabs.Overview),

package/lib/{index-B5wdZoej.js → index-zMKRaKMY.js}

@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
+import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment } from 'react';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
 import './index-DYEcdkUF.js';
 import styled, { css } from 'styled-components';
@@ -3731,14 +3731,14 @@ const getComponentsFromPropertyString = (propertyString, theme) => {
         const [type, value] = c.split('=');
         switch (type) {
             case 'tooltip':
-                return React.createElement(Tooltip, { key: useId(), withIcon: true, text: value });
+                return React.createElement(Tooltip, { key: crypto.randomUUID(), withIcon: true, text: value });
             case 'status':
                 if (value === 'none')
-                    return React.createElement("div", { key: useId(), style: { width: 16, height: 16 } });
+                    return React.createElement("div", { key: crypto.randomUUID(), style: { width: 16, height: 16 } });
                 let Icon = getStatusIcon(value, theme);
                 if (!Icon)
                     Icon = getStatusIcon(StatusType.Warning, theme);
-                return React.createElement(Icon, { key: useId() });
+                return React.createElement(Icon, { key: crypto.randomUUID() });
             default:
                 console.warn('unexpected component type!', type);
                 return null;
@@ -3753,7 +3753,7 @@ const PrettyJsonCode = ({ darkMode, str }) => {
         const rows = new Array(count).fill((props) => (React.createElement(TableRow$1, { ...props },
             React.createElement(TableData, null),
             React.createElement(TableData, null))));
-        return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: useId(), style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
+        return (React.createElement(Fragment, null, rows.map((R, i) => (React.createElement(R, { key: crypto.randomUUID(), style: i === 0 ? { borderBottom: `1px solid ${theme.colors.border}` } : {} })))));
     };
     return (React.createElement(Highlight2, { theme: darkMode ? themes_exports.palenight : themes_exports.vsLight, language: 'json', code: str }, ({ getLineProps, getTokenProps, tokens }) => (React.createElement(Table$1, null,
         React.createElement(TableBody$1, null, tokens.map((line, i) => {
@@ -4122,6 +4122,11 @@ 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;
@@ -4134,22 +4139,35 @@ const IconWrapper$3 = styled.div `
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   border-radius: 100%;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-  background: ${({ $status, theme }) => ($status ? theme.colors[$status] : theme.colors.info)};
 `;
 const IconGroup = ({ icons = [], iconSrcs = [], status, size = 36 }) => {
     const theme = Theme.useTheme();
     const imgSize = icons.length === 1 || iconSrcs.length === 1 ? size - 16 : size / 3;
-    if (!!iconSrcs.length) {
+    if (iconSrcs.length > 0) {
         return React.createElement(IconGroup, { icons: iconSrcs.map((src) => (() => React.createElement(ImageControlled, { src: src, size: imgSize }))), status: status, size: size });
     }
     if (icons.length === 1) {
         return React.createElement(IconWrapped, { icon: icons[0], status: status, size: size });
     }
-    return (React.createElement(Container$n, { "$size": size }, icons.map((Icon, idx) => {
+    const getTopPosition = (idx) => {
+        if (icons.length > 2) {
+            return idx === 0 || idx === 1 ? imgSize * 0.2 : imgSize * 1.4;
+        }
+        return imgSize * 0.7;
+    };
+    const getLeftPosition = (idx) => {
+        if (idx >= 2) {
+            return imgSize * 0.7;
+        }
+        else if (idx % 2 === 0) {
+            return imgSize * 0.05;
+        }
+        return imgSize * 1.4;
+    };
+    return (React.createElement(Container$n, { "$status": status, "$size": size }, icons.map((Icon, idx) => {
         if (idx > 2)
             return null;
-        return (React.createElement(IconWrapper$3, { key: useId(), "$status": status, "$size": imgSize * 1.5, "$top": icons.length > 2 ? (idx === 0 || idx === 1 ? 0 : imgSize * 1.4) : imgSize * 0.7, "$left": idx >= 2 ? imgSize * 0.7 : idx % 2 === 0 ? 0 : imgSize * 1.4, "$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: crypto.randomUUID(), "$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 }))));
     })));
@@ -4224,14 +4242,14 @@ const Container$m = styled.div `
   padding: 16px;
   width: calc(100% - 32px);
   border-radius: 16px;
-  background-color: ${({ $status, theme }) => (!!$status ? theme.text[$status] + Theme.opacity.hex['010'] : theme.colors.secondary + Theme.opacity.hex['005'])};
+  background-color: ${({ theme, $status, $bgColor }) => $bgColor || ($status ? theme.text[$status] + Theme.opacity.hex['010'] : theme.colors.secondary + Theme.opacity.hex['005'])};
   opacity: ${({ $faded }) => ($faded ? 0.5 : 1)};
 
-  ${({ $withClick, $status, theme }) => $withClick
+  ${({ theme, $status, $bgColorHover, $withClick }) => $withClick
     ? css `
           &:hover {
             cursor: pointer;
-            background-color: ${!!$status ? theme.text[$status] + Theme.opacity.hex['020'] : theme.colors.secondary + Theme.opacity.hex['010']};
+            background-color: ${$bgColorHover || ($status ? theme.text[$status] + Theme.opacity.hex['020'] : theme.colors.secondary + Theme.opacity.hex['010'])};
             ${ControlledVisibility} {
               visibility: visible;
             }
@@ -4250,6 +4268,7 @@ const Title$b = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+
   font-size: 14px;
   &::after {
     // This is to prevent the browser "default tooltip" from appearing when the title is too long
@@ -4258,6 +4277,10 @@ const Title$b = styled(Text) `
   }
 `;
 const SubTitleWrapper = styled.div `
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
+  overflow: hidden;
+  white-space: nowrap;
+
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4275,7 +4298,7 @@ const ActionsWrapper = styled.div `
 const HoverText = styled(Text) `
   margin-right: 16px;
 `;
-const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, status, faded, monitors, monitorsWithLabels, isActive, withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange, withExtend, isExtended, renderExtended, renderActions, onClick, ...props }) => {
+const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, status, faded, bgColor, bgColorHover, monitors, monitorsWithLabels, isActive, withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange, withExtend, isExtended, renderExtended, renderActions, onClick, ...props }) => {
     const [extend, setExtend] = useState(isExtended || false);
     const [maxWidth, setMaxWidth] = useState(0);
     const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
@@ -4286,9 +4309,10 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
         if (containerRef.current && actionsRef.current) {
             const containerWidth = containerRef.current.clientWidth;
             const actionsWidth = actionsRef.current.clientWidth;
-            // 85 is the sum of the container-padding, icon width, and flex-row-gap
-            // we round to 100, to consider cases with actions
-            setMaxWidth(containerWidth - actionsWidth - 100);
+            // 85 is the sum of the container-padding, icon width, and flex-row-gap.
+            // we round it to 120, to consider cases with actions.
+            const widthOfInnerContents = 120;
+            setMaxWidth(containerWidth - actionsWidth - widthOfInnerContents);
         }
     }, []);
     useEffect(() => {
@@ -4314,7 +4338,7 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
             withSeperator && React.createElement(SubTitle$2, null, '•'),
             React.createElement(Status, { status: isActive ? StatusType.Success : StatusType.Error, size: 10 })));
     };
-    return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$withClick": !!onClick, onClick: onClick, ...props },
+    return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
             React.createElement(FlexRow, { "$gap": 16 },
                 withCheckbox && React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }),
@@ -4322,7 +4346,7 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
             React.createElement(FlexColumn, { "$gap": 4 },
                 React.createElement(Tooltip, { text: isTitleOverflowed ? title : undefined, withIcon: false },
                     React.createElement(Title$b, { ref: titleRef, "$maxWidth": maxWidth }, title)),
-                React.createElement(SubTitleWrapper, null,
+                React.createElement(SubTitleWrapper, { "$maxWidth": maxWidth },
                     subTitle && React.createElement(SubTitle$2, null, subTitle),
                     renderMonitors(!!subTitle),
                     renderActiveStatus(!!monitors?.length))),
@@ -4422,7 +4446,7 @@ const TableRow = ({ index, columns, cells, onClick, status, faded }) => {
         if (!rowCell)
             return null;
         const { value, textColor, withTooltip, icon, component: Component } = rowCell;
-        return (React.createElement(Td, { key: useId(), "$isFirst": i === 0 },
+        return (React.createElement(Td, { key: crypto.randomUUID(), "$isFirst": i === 0 },
             !!icon ? (React.createElement(IconWrapped, { icon: icon })) : !!Component ? (React.createElement(Component, null)) : (React.createElement(Tooltip, { text: withTooltip && !!value ? String(value) : '' },
                 React.createElement(RowText, { "$color": textColor }, !isEmpty(value) ? value : '-'))),
             i === 0 && React.createElement(RowBackground, { "$height": containerHeight, "$width": containerWidth, "$top": containerHeight * index, "$hovered": isHovered, "$status": status })));
@@ -4641,7 +4665,7 @@ const renderValue = (type, value) => {
                                 text: process.health === StatusType.Success ? 'healthy' : 'unhealthy',
                                 status: process.health,
                             } }),
-                        process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: useId(), title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
+                        process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: crypto.randomUUID(), title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
                 } }));
         }
         case DataCardFieldTypes.SourceContainer: {
@@ -5978,7 +6002,7 @@ const Segment = ({ options = [], selected, setSelected }) => {
     return (React.createElement(Container$6, null,
         options.map(({ icon: Icon, label, value, selectedBgColor }, idx) => {
             const isSelected = selected === value;
-            return (React.createElement(Button, { key: useId(), ref: isSelected ? selectedRef : undefined, "$isFirstItem": idx === 0, "$isLastItem": idx === options.length - 1, onClick: () => {
+            return (React.createElement(Button, { key: crypto.randomUUID(), ref: isSelected ? selectedRef : undefined, "$isFirstItem": idx === 0, "$isLastItem": idx === options.length - 1, onClick: () => {
                     setSelected(value);
                     setBgColor(selectedBgColor || '');
                 } },

package/package.json

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