@odigos/ui-kit 0.0.49 → 0.0.50

package/lib/{index-CkTdd3MS.js → index-CyHOJpMl.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-Bw7RE2T2.js';
+import { T as Theme } from './index-BC03UmY5.js';
 
 const ArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-DsEoqSQn.js → index-Dbs7YARA.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-Bw7RE2T2.js';
+import './index-BC03UmY5.js';
 import 'styled-components';
-import { T as TracesIcon, M as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, E as ErrorTriangleIcon, C as CheckCircledIcon } from './index-DxR7e2Cq.js';
+import { T as TracesIcon, M as MetricsIcon, L as LogsIcon, O as OdigosLogo, I as InfoIcon, W as WarningTriangleIcon, E as ErrorTriangleIcon, C as CheckCircledIcon } from './index-H8TwBQHm.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-DOU0EdZP.js → index-DnhO-nLH.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { aa as WarningModal } from './index-C1V7D2ey.js';
+import { ai as WarningModal } from './index-CgdNGqvh.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-Bw7RE2T2.js';
+import './index-BC03UmY5.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-DxR7e2Cq.js → index-H8TwBQHm.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-Bw7RE2T2.js';
+import { T as Theme } from './index-BC03UmY5.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-CeDmxXUE.js → index-LgzkJ05H.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-Bw7RE2T2.js';
+import { T as Theme } from './index-BC03UmY5.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
@@ -61,7 +61,7 @@ const UserIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const fill = f || theme.text.secondary;
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("path", { stroke: fill, strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z' }),
-        React.createElement("path", { stroke: fill, strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M16 15H8C5.79086 15 4 16.7909 4 19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19C20 16.7909 18.2091 15 16 15Z' })));
+        React.createElement("path", { stroke: fill, strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7.27466 21H16.7253C18.5339 21 20 19.5339 20 17.7253C20 15.4389 17.7163 13.8564 15.5755 14.6592L13.6502 15.3812C12.5862 15.7802 11.4138 15.7802 10.3498 15.3812L8.42447 14.6592C6.28366 13.8564 4 15.4389 4 17.7253C4 19.5339 5.46612 21 7.27466 21Z' })));
 };
 
 const OverviewIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {

package/lib/{index-CeBxw8J4.js → index-r72g3gV5.js}

@@ -1,10 +1,10 @@
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, l as DISPLAY_TITLES } from './index-Bw7RE2T2.js';
-import { E as EditIcon } from './index-CkTdd3MS.js';
-import { d as Button, a5 as Text, Z as NotificationNote } from './index-C1V7D2ey.js';
+import { T as Theme, B as BUTTON_TEXTS, m as DISPLAY_TITLES } from './index-BC03UmY5.js';
+import { E as EditIcon } from './index-CyHOJpMl.js';
+import { e as Button, ad as Text, a2 as NotificationNote } from './index-CgdNGqvh.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-DxR7e2Cq.js';
+import { I as InfoIcon } from './index-H8TwBQHm.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/snippets/copy-text/index.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface CopyTextProps {
+    value: string;
+}
+declare const CopyText: FC<CopyTextProps>;
+export { CopyText, type CopyTextProps };

package/lib/snippets/index.d.ts

@@ -1,4 +1,7 @@
-export * from './add-button/index';
-export * from './edit-button/index';
+export * from './add-button';
+export * from './copy-text';
+export * from './edit-button';
 export * from './note-back-to-summary/index';
+export * from './pod-container';
 export * from './react-flow';
+export * from './source-container';

package/lib/snippets/pod-container/index.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { type PodContainerAnalyze } from '@/types';
+type PodContainerProps = PodContainerAnalyze;
+export declare const PodContainer: FC<PodContainerProps>;
+export {};

package/lib/snippets/source-container/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import { SourceContainer as SourceContainerType, SourceFormData } from '@/types';
+interface SourceContainerProps extends SourceContainerType {
+    callbackRuntimeOverride?: (payload: Pick<SourceFormData, 'containerName' | 'language' | 'version'>) => Promise<void>;
+}
+export declare const SourceContainer: FC<SourceContainerProps>;
+export {};

package/lib/snippets.js

@@ -1,12 +1,12 @@
-export { A as AddButton, a as AddNode, B as BaseNode, E as EdgedNode, F as Flow, b as FrameNode, H as HeaderNode, L as LabeledEdge, M as MapItemNode, N as NoDataNode, S as ScrollNode, c as SkeletonNode, n as nodeConfig } from './index-C1V7D2ey.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-CeBxw8J4.js';
+export { A as AddButton, a as AddNode, B as BaseNode, C as CopyText, E as EdgedNode, F as Flow, b as FrameNode, H as HeaderNode, L as LabeledEdge, M as MapItemNode, N as NoDataNode, P as PodContainer, S as ScrollNode, c as SkeletonNode, d as SourceContainer, n as nodeConfig } from './index-CgdNGqvh.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-r72g3gV5.js';
 import 'react';
-import './index-Bw7RE2T2.js';
+import './index-BC03UmY5.js';
 import './types.js';
 import 'styled-components';
-import './index-CkTdd3MS.js';
-import './index-DsEoqSQn.js';
-import './index-DxR7e2Cq.js';
+import './index-CyHOJpMl.js';
+import './index-Dbs7YARA.js';
+import './index-H8TwBQHm.js';
 import './index-BnvrwbRB.js';
-import './useTransition-mupXsbop.js';
 import 'react-dom';
+import './useTransition-DmHfJSEP.js';

package/lib/store/index.d.ts

@@ -1,3 +1,4 @@
+export * from './useActiveNodeStore';
 export * from './useDarkMode';
 export * from './useDataStreamStore';
 export * from './useDrawerStore';

package/lib/store/useActiveNodeStore.d.ts

@@ -0,0 +1,11 @@
+import { NodeTypes } from '@/types';
+export interface ActiveNodeStoreState {
+    activeNodeType: NodeTypes | null;
+    activeNodeId: string | null;
+}
+interface ActiveNodeStoreStateSetters {
+    setActiveNodeType: (value: ActiveNodeStoreState['activeNodeType']) => void;
+    setActiveNodeId: (value: ActiveNodeStoreState['activeNodeId']) => void;
+}
+export declare const useActiveNodeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActiveNodeStoreState & ActiveNodeStoreStateSetters>>;
+export {};

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDataStreamStore, b as useDrawerStore, c as useEntityStore, d as useFilterStore, e as useInstrumentStore, f as useModalStore, g as useNotificationStore, h as usePendingStore, i as useSelectedStore, j as useSetupStore } from './index-Bw7RE2T2.js';
+export { u as useActiveNodeStore, a as useDarkMode, b as useDataStreamStore, c as useDrawerStore, d as useEntityStore, e as useFilterStore, f as useInstrumentStore, g as useModalStore, h as useNotificationStore, i as usePendingStore, j as useSelectedStore, k as useSetupStore } from './index-BC03UmY5.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-Bw7RE2T2.js';
+export { T as default } from './index-BC03UmY5.js';
 import 'styled-components';
 import 'react';
 import './types.js';

package/lib/types/describe/index.d.ts

@@ -68,12 +68,12 @@ interface OtelAgentsAnalyze {
     createTime?: EntityProperty | null;
     containers: ContainerAgentConfigAnalyze[];
 }
-interface InstrumentationInstanceAnalyze {
+export interface InstrumentationInstanceAnalyze {
     healthy: EntityProperty;
     message?: EntityProperty | null;
     identifyingAttributes?: EntityProperty[];
 }
-interface PodContainerAnalyze {
+export interface PodContainerAnalyze {
     containerName: EntityProperty;
     actualDevices: EntityProperty;
     started?: EntityProperty | null;

package/lib/types/sources/index.d.ts

@@ -11,20 +11,21 @@ export interface WorkloadId {
     name: string;
     kind: K8sResourceKind | '';
 }
+export interface SourceContainer {
+    containerName: string;
+    language: ProgrammingLanguages;
+    runtimeVersion: string;
+    overriden?: boolean;
+    instrumented: boolean;
+    instrumentationMessage: string;
+    otelDistroName: string | null;
+}
 export interface Source extends WorkloadId {
     selected: boolean;
     otelServiceName: string;
     numberOfInstances?: number;
     dataStreamNames: string[];
-    containers: {
-        containerName: string;
-        language: ProgrammingLanguages;
-        runtimeVersion: string;
-        overriden?: boolean;
-        instrumented: boolean;
-        instrumentationMessage: string;
-        otelDistroName: string | null;
-    }[] | null;
+    containers: SourceContainer[] | null;
     conditions: Condition[] | null;
 }
 export interface SourceFormData {

package/lib/{useSourceSelectionFormData-C5VMfWEf.js → useSourceSelectionFormData-CwggurLH.js}

@@ -1,9 +1,9 @@
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { g as useNotificationStore, F as FORM_ALERTS, b as useDrawerStore, c as useEntityStore, a as useDataStreamStore, j as useSetupStore } from './index-Bw7RE2T2.js';
+import { h as useNotificationStore, F as FORM_ALERTS, c as useDrawerStore, d as useEntityStore, b as useDataStreamStore, k as useSetupStore } from './index-BC03UmY5.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BnvrwbRB.js';
-import { c as useGenericForm } from './useTransition-mupXsbop.js';
+import { c as useGenericForm } from './useTransition-DmHfJSEP.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-BlZKWuxe.js';
 
 const INITIAL$2 = {

package/lib/{useTransition-mupXsbop.js → useTransition-DmHfJSEP.js}

@@ -1,4 +1,4 @@
-import { f as useModalStore, b as useDrawerStore } from './index-Bw7RE2T2.js';
+import { g as useModalStore, c as useDrawerStore, u as useActiveNodeStore } from './index-BC03UmY5.js';
 import { AddNodeTypes, EntityTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
@@ -64,15 +64,18 @@ const useGenericForm = (initialFormData) => {
 const useClickNode = () => {
     const { setCurrentModal } = useModalStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const { setActiveNodeType, setActiveNodeId } = useActiveNodeStore();
     const onClickNode = (_, object) => {
-        const { data: { id, type }, } = object;
-        switch (type) {
+        const { id: nodeId, type: nodeType, data: { id: entityId, type: entityType }, } = object;
+        setActiveNodeType(nodeType);
+        setActiveNodeId(nodeId);
+        switch (entityType) {
             case EntityTypes.Source:
             case EntityTypes.Destination:
             case EntityTypes.Action:
             case EntityTypes.InstrumentationRule:
-                setDrawerType(type);
-                setDrawerEntityId(id);
+                setDrawerType(entityType);
+                setDrawerEntityId(entityId);
                 break;
             case AddNodeTypes.AddSource:
                 setCurrentModal(EntityTypes.Source);
@@ -273,6 +276,35 @@ const useOnClickOutside = (ref, handler) => {
     }, [ref, handler]);
 };
 
+const usePopup = ({ defaultClientHeight = 0, defaultClientwidth = 0, onClickOutside } = {}) => {
+    const popupRef = useRef(null);
+    const [popupOpen, setPopupOpen] = useState(false);
+    const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
+    useOnClickOutside(popupRef, () => {
+        if (popupOpen) {
+            setPopupOpen(false);
+            onClickOutside?.();
+        }
+    });
+    const handlePosition = (clientX, clientY) => {
+        const { innerWidth, innerHeight } = window;
+        let top = clientY;
+        let left = clientX;
+        if (top >= innerHeight / 2)
+            top += -(popupRef.current?.clientHeight || defaultClientHeight);
+        if (left >= innerWidth / 2)
+            left += -(popupRef.current?.clientWidth || defaultClientwidth);
+        setPopupPosition({ top, left });
+    };
+    return {
+        popupRef,
+        popupOpen,
+        setPopupOpen,
+        popupPosition,
+        handlePosition,
+    };
+};
+
 // Fallback locale.
 // (when not a single one of the supplied "preferred" locales is available)
 var defaultLocale$1 = 'en'; // For all locales added
@@ -3535,4 +3567,4 @@ const useTransition = ({ container, animateIn, animateOut, duration = 300 }) =>
     return Transition;
 };
 
-export { useContainerSize as a, useCopy as b, useGenericForm as c, useInstrumentationRuleFormData as d, useKeyDown as e, useOnClickOutside as f, useTimeAgo as g, useTransition as h, useClickNode as u };
+export { useContainerSize as a, useCopy as b, useGenericForm as c, useInstrumentationRuleFormData as d, useKeyDown as e, useOnClickOutside as f, usePopup as g, useTimeAgo as h, useTransition as i, useClickNode as u };

package/package.json

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

package/lib/containers/data-flow-actions-menu/search/recent-searches/index.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RecentSearches: () => React.JSX.Element;