@odigos/ui-kit 0.0.15 → 0.0.17

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.0.17](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.16...ui-kit-v0.0.17) (2025-03-26)
+
+
+### Features
+
+* add search to dropdowns in destinations forms ([#53](https://github.com/odigos-io/ui-kit/issues/53)) ([38d67e2](https://github.com/odigos-io/ui-kit/commit/38d67e21775c9d7ce13b5e45b127e37670c4b424))
+* bring back icons for source drawer (in header) ([#56](https://github.com/odigos-io/ui-kit/issues/56)) ([7a72f1d](https://github.com/odigos-io/ui-kit/commit/7a72f1d267e905e0a9afea6e6971d9af8b80e5a9))
+* kill simple mode for source selections ([#58](https://github.com/odigos-io/ui-kit/issues/58)) ([c349daa](https://github.com/odigos-io/ui-kit/commit/c349daa65e50821f76777089c963cbe0cf54266a))
+
+
+### Bug Fixes
+
+* cleanup build from stories & side effects ([#55](https://github.com/odigos-io/ui-kit/issues/55)) ([a0f4bac](https://github.com/odigos-io/ui-kit/commit/a0f4bac0418fb8198f9ab39d8cf8b20f2cfdf6e9))
+* missing active-status for base nodes (actions, rules) ([#52](https://github.com/odigos-io/ui-kit/issues/52)) ([029a4c1](https://github.com/odigos-io/ui-kit/commit/029a4c1bdb4610e986d4229f8417a07b1dd3016e))
+* missing namespace in entity functions ([#54](https://github.com/odigos-io/ui-kit/issues/54)) ([fed55b3](https://github.com/odigos-io/ui-kit/commit/fed55b3ba2e3f38ee8f75c946ece01184ff27c37))
+
+## [0.0.16](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.15...ui-kit-v0.0.16) (2025-03-25)
+
+
+### Features
+
+* destination icons as imported SVGs ([#51](https://github.com/odigos-io/ui-kit/issues/51)) ([9351568](https://github.com/odigos-io/ui-kit/commit/93515684b7fa464f526159092061f63a4b8675fb))
+* kill `crypto.randomUUID` (after killing `useId`) ([#49](https://github.com/odigos-io/ui-kit/issues/49)) ([f668cf7](https://github.com/odigos-io/ui-kit/commit/f668cf719c44ebf267138b6c565c81701f135a86))
+* move namespaces into entity store ([#47](https://github.com/odigos-io/ui-kit/issues/47)) ([4c96c3f](https://github.com/odigos-io/ui-kit/commit/4c96c3f746fcd2192e7b3c7cd69cf0d9c2dc6f6d))
+* refactor data-tab props ([#48](https://github.com/odigos-io/ui-kit/issues/48)) ([d81559a](https://github.com/odigos-io/ui-kit/commit/d81559ae8fc0268c52ab52fd4171fedd63060fb2))
+
 ## [0.0.15](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.14...ui-kit-v0.0.15) (2025-03-24)
 
 

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

@@ -1,30 +1,41 @@
 import { type CSSProperties, type FC, type ReactNode } from 'react';
 import type { SVG } from '@/types';
 import { StatusType, SignalType } from '@/types';
-interface DataTabProps {
-    title: string;
-    subTitle?: string;
+interface IconProps {
     icon?: SVG;
     icons?: SVG[];
     iconSrc?: string;
     iconSrcs?: string[];
-    hoverText?: string;
+}
+interface VisualProps {
     status?: StatusType;
     faded?: boolean;
     bgColor?: CSSProperties['backgroundColor'];
     bgColorHover?: CSSProperties['backgroundColor'];
     monitors?: SignalType[];
     monitorsWithLabels?: boolean;
-    isActive?: boolean;
+}
+interface CheckboxProps {
     withCheckbox?: boolean;
     isCheckboxDisabled?: boolean;
     isChecked?: boolean;
     onCheckboxChange?: (value: boolean) => void;
+}
+interface ExtendableProps {
     withExtend?: boolean;
     isExtended?: boolean;
     renderExtended?: () => ReactNode;
-    renderActions?: () => ReactNode;
+}
+interface DataTabProps {
+    title: string;
+    subTitle?: string;
+    hoverText?: string;
     onClick?: () => void;
+    renderActions?: () => ReactNode;
+    iconProps?: IconProps;
+    visualProps?: VisualProps;
+    checkboxProps?: CheckboxProps;
+    extendableProps?: ExtendableProps;
 }
 declare const DataTab: FC<DataTabProps>;
 export { DataTab, type DataTabProps };

package/lib/components/drawer/drawer-header/index.d.ts

@@ -3,8 +3,8 @@ import type { SVG } from '@/types';
 import { type ButtonProps } from '../../button';
 interface DrawerHeaderProps {
     onClose: () => void;
-    icon?: SVG;
-    iconSrc?: string;
+    icons?: SVG[];
+    iconSrcs?: string[];
     title?: string;
     titleTooltip?: string;
     replaceTitleWith?: ReactNode | (() => ReactNode);

package/lib/components/icon-group/index.d.ts

@@ -6,6 +6,7 @@ interface IconGroupProps {
     iconSrcs?: string[];
     status?: StatusType;
     size?: number;
+    id: string;
 }
 declare const IconGroup: FC<IconGroupProps>;
 export { IconGroup, type IconGroupProps };

package/lib/components.js

@@ -1,18 +1,17 @@
-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 { B as Button, F as FlexRow } from './index-BiNX-Cge.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, $ 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, o as FadeLoader, p as FieldError, q as FieldLabel, _ as FlexColumn, I as IconButton, r as IconGroup, s as IconTitleBadge, t as IconWrapped, u as IconsNav, v as ImageControlled, w as Input, x as InputList, y as InputTable, z as InteractiveTable, K as KeyValueInputsList, M as Modal, a1 as ModalBody, G as MonitorsCheckboxes, H as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a0 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a2 as TableContainer, a3 as TableTitleWrap, a4 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-BiNX-Cge.js';
+import React, { Component, createElement, createContext, Fragment } from 'react';
 import Theme from './theme.js';
-import './types.js';
-import './index-DYEcdkUF.js';
-import 'styled-components';
-import './index-CYn62h8x.js';
-import './index-BGlk5VhF.js';
-import './index-9ObpINp4.js';
+import styled from 'styled-components';
+import './index-BVVVevuY.js';
+import './index-BxQTUOME.js';
+import './index-BsH_egEe.js';
+import './index-BWqrekK4.js';
+import './index-DbfrGXPH.js';
+import './index-BJxaoI0G.js';
 import './index-BZS1ijMm.js';
-import './index-D_Qn2U89.js';
-import './index-CJKFedQi.js';
-import './index-Db_ZDrEr.js';
-import './useTransition-CFmm4scp.js';
+import './index-C1PCuZgw.js';
+import './useTransition-D0wUpPGk.js';
 import 'react-dom';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
@@ -21,6 +20,8 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
+import './useDarkMode-DxhIuVNi.js';
+import './react-CjImwkhV.js';
 
 const ErrorBoundaryContext = createContext(null);
 
@@ -170,4 +171,34 @@ const ErrorBoundary = ({ children }) => {
             React.createElement(ErrorFallback, { ...props }))) }, children));
 };
 
-export { Button, ErrorBoundary };
+const Container = styled(FlexRow) `
+  position: relative;
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border + Theme.opacity.hex['050']};
+`;
+const AlignLeft = styled(FlexRow) `
+  margin-right: auto;
+  margin-left: 32px;
+  gap: 12px;
+`;
+const AlignRight = styled(FlexRow) `
+  margin-left: auto;
+  margin-right: 32px;
+  gap: 12px;
+`;
+const PositionCenter = styled(FlexRow) `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  gap: 12px;
+`;
+const Header = ({ left = [], center = [], right = [] }) => {
+    return (React.createElement(Container, null,
+        React.createElement(AlignLeft, null, left.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
+        React.createElement(PositionCenter, null, center.map((child, index) => child && React.createElement(Fragment, { key: index }, child))),
+        React.createElement(AlignRight, null, right.map((child, index) => child && React.createElement(Fragment, { key: index }, child)))));
+};
+
+export { Button, ErrorBoundary, FlexRow, Header };

package/lib/constants.js

@@ -1,12 +1,16 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-CJKFedQi.js';
+export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-G4WmxXds.js';
+export { M as MONITORS_OPTIONS } from './index-C1PCuZgw.js';
 export { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import './types.js';
-import './index-Db_ZDrEr.js';
-import './index-BGlk5VhF.js';
+import './index-C3nz3TIx.js';
+import './index-CIXQeSHu.js';
 import 'react';
 import './theme.js';
-import './index-DYEcdkUF.js';
 import 'styled-components';
+import './useDarkMode-DxhIuVNi.js';
+import './react-CjImwkhV.js';
+import './index-RBS1MqCQ.js';
+import './index-BWqrekK4.js';
+import './index-DbfrGXPH.js';
 
 const TOKEN_ABOUT_TO_EXPIRE = 604800000; // 7 days in milliseconds
 

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

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

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import { EntityTypes } from '@/types';
 interface DataFlowActionsMenuProps {
-    namespaces: {
-        name: string;
-    }[];
     addEntity?: EntityTypes;
 }
 declare const DataFlowActionsMenu: React.FC<DataFlowActionsMenuProps>;

package/lib/containers/dropdowns/namespace-dropdown/index.d.ts

@@ -1,9 +1,6 @@
 import { type FC } from 'react';
 import { type DropdownProps } from '@/components';
 interface NamespaceDropdownProps {
-    namespaces: {
-        name: string;
-    }[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;

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

@@ -5,8 +5,8 @@ interface OverviewDrawerProps extends PropsWithChildren {
     width?: number;
     title: string;
     titleTooltip?: string;
-    icon?: SVG;
-    iconSrc?: string;
+    icons?: SVG[];
+    iconSrcs?: string[];
     isEdit?: boolean;
     isFormDirty?: boolean;
     isLastItem?: boolean;

package/lib/containers/source-modal/index.d.ts

@@ -1,13 +1,9 @@
 import { type Dispatch, type FC, type SetStateAction } from 'react';
 import { type Namespace, type PersistSources } from '@/types';
-import { type SourceSelectionFormProps } from '../source-selection-form';
 interface SourceModalProps {
-    componentType?: SourceSelectionFormProps['componentType'];
-    namespaces: Namespace[];
-    namespace?: Namespace;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     setSelectedNamespace: Dispatch<SetStateAction<string>>;
+    namespace?: Namespace;
     persistSources: PersistSources;
 }
 declare const SourceModal: FC<SourceModalProps>;

package/lib/containers/source-selection-form/index.d.ts

@@ -2,13 +2,10 @@ import React from 'react';
 import type { Namespace } from '@/types';
 import type { AvailableSourcesByNamespace, NamespaceSelectionFormData, SourceSelectionFormData } from '@/store';
 interface SourceSelectionFormProps {
-    componentType: 'SIMPLE' | 'FAST';
     isModal?: boolean;
-    namespaces: Namespace[];
-    namespace?: Namespace;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     onSelectNamespace: (namespace: string) => void;
+    namespace?: Namespace;
 }
 interface SourceSelectionFormRef {
     getFormValues: () => {

package/lib/containers/source-selection-form/{fast/list → list}/index.d.ts

@@ -2,7 +2,6 @@ import { type FC } from 'react';
 import type { UseSourceSelectionFormData } from '@/hooks';
 interface ListProps extends UseSourceSelectionFormData {
     isModal?: boolean;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     onSelectNamespace: (namespace: string) => void;
 }

package/lib/containers/table-cell-conditions/index.d.ts

@@ -2,6 +2,7 @@ import { type FC } from 'react';
 import { type Condition } from '@/types';
 interface TableCellConditionsProps {
     conditions: Condition[];
+    id: string;
 }
 declare const TableCellConditions: FC<TableCellConditionsProps>;
 export { TableCellConditions, type TableCellConditionsProps };