@devtron-labs/devtron-fe-common-lib 1.17.0-beta-4 → 1.17.0-beta-7

package/dist/Shared/Components/CollapsibleList/CollapsibleList.component.d.ts

@@ -1,2 +1,5 @@
 import { CollapsibleListProps, TabOptions } from './CollapsibleList.types';
+/**
+ * @deprecated - Please use `TreeView` component instead.
+ */
 export declare const CollapsibleList: <TabType extends TabOptions>({ config, tabType, onCollapseBtnClick, }: CollapsibleListProps<TabType>) => JSX.Element;

package/dist/Shared/Components/Icon/Icon.d.ts

@@ -2,6 +2,7 @@ import { IconBaseProps } from './types';
 export declare const iconMap: {
     'ic-73strings': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-aborted': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-activity': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-add': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-amazon-eks': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-apica': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -92,6 +93,7 @@ export declare const iconMap: {
     'ic-flask': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-folder-color': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-folder-user': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-folder': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-gavel': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-gear': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-gift-gradient': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -109,6 +111,7 @@ export declare const iconMap: {
     'ic-heart-green': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-heart-red-animated': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-heart-red': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-helm-app': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-helm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-help-filled': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-help-outline': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
@@ -147,6 +150,7 @@ export declare const iconMap: {
     'ic-mobile': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-monitoring': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-more-vertical': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-namespace': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-new': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-node-script': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-oidc': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;

package/dist/Shared/Components/Security/SecurityModal/config/Sidebar.d.ts

@@ -1,3 +1,6 @@
-import { ScanCategoriesWithLicense } from '../../types';
-import { SidebarDataType } from '../types';
-export declare const getSidebarData: (categoriesConfig: Record<ScanCategoriesWithLicense, boolean>) => SidebarDataType[];
+import { TreeViewProps } from '../../../TreeView';
+import { GetSidebarDataParamsType } from '../../types';
+import { SidebarDataChildType } from '../types';
+export declare const getSecurityModalSidebarId: ({ category, subCategory }: SidebarDataChildType["value"]) => string;
+export declare const getSecurityModalSidebarChildFromId: (id: string) => SidebarDataChildType["value"];
+export declare const getSidebarData: ({ imageScan, codeScan, kubernetesManifest, imageScanLicenseRisks, selectedId, scanResult, }: GetSidebarDataParamsType) => TreeViewProps["nodes"];

package/dist/Shared/Components/Security/SecurityModal/config/index.d.ts

@@ -1,4 +1,4 @@
 export { getProgressingStateForStatus } from './ImageScan';
 export { getInfoCardData } from './InfoCard';
-export { getSidebarData } from './Sidebar';
+export { getSecurityModalSidebarChildFromId, getSecurityModalSidebarId, getSidebarData } from './Sidebar';
 export { getTableData } from './Table';

package/dist/Shared/Components/Security/SecurityModal/index.d.ts

@@ -1,7 +1,7 @@
-export { getProgressingStateForStatus, getSidebarData } from './config';
+export { getProgressingStateForStatus, getSecurityModalSidebarChildFromId, getSecurityModalSidebarId, getSidebarData, } from './config';
 export { CATEGORY_LABELS } from './constants';
 export { default as SecurityModal } from './SecurityModal';
 export { getSecurityScan } from './service';
-export type { GetResourceScanDetailsPayloadType, GetResourceScanDetailsResponseType, ScanResultDTO, SidebarDataChildType, SidebarDataType, SidebarPropsType, } from './types';
+export type { GetResourceScanDetailsPayloadType, GetResourceScanDetailsResponseType, ScanResultDTO, SidebarDataChildType, SidebarPropsType, } from './types';
 export { SeveritiesDTO } from './types';
 export { getSecurityScanSeveritiesCount, getTotalVulnerabilityCount, parseGetResourceScanDetailsResponse, } from './utils';

package/dist/Shared/Components/Security/SecurityModal/types.d.ts

@@ -224,12 +224,6 @@ export type SidebarDataChildType = {
         subCategory: ScanSubCategories;
     };
 };
-export type SidebarDataType = {
-    label: string;
-    isExpanded: boolean;
-    children: NonNullable<SidebarDataChildType[]>;
-    hideInHelmApp?: boolean;
-};
 export type EmptyStateType = Pick<GenericEmptyStateType, 'image' | 'SvgImage' | 'subTitle' | 'title' | 'children'>;
 export declare const VulnerabilityState: {
     readonly [-1]: "Failed";

package/dist/Shared/Components/Security/types.d.ts

@@ -1,4 +1,4 @@
-import { CATEGORIES, SUB_CATEGORIES } from './SecurityModal/types';
+import { CATEGORIES, ScanResultDTO, SUB_CATEGORIES } from './SecurityModal/types';
 export type ScanCategories = (typeof CATEGORIES)[keyof typeof CATEGORIES];
 export type ScanSubCategories = (typeof SUB_CATEGORIES)[keyof typeof SUB_CATEGORIES];
 export type ScanCategoriesWithLicense = ScanCategories | 'imageScanLicenseRisks';
@@ -16,4 +16,8 @@ export interface SecurityConfigType {
     codeScan?: SecurityConfigCategoryType;
     kubernetesManifest?: SecurityConfigCategoryType;
 }
+export interface GetSidebarDataParamsType extends Record<ScanCategoriesWithLicense, boolean> {
+    selectedId: string;
+    scanResult: ScanResultDTO;
+}
 export {};

package/dist/Shared/Components/SelectPicker/GroupedFilterSelectPicker.d.ts

@@ -0,0 +1,2 @@
+import { GroupedFilterSelectPickerProps } from './type';
+export declare const GroupedFilterSelectPicker: <T extends string | number>({ id, filterSelectPickerPropsMap, isFilterApplied, ...restProps }: GroupedFilterSelectPickerProps<T>) => JSX.Element;

package/dist/Shared/Components/SelectPicker/SelectPicker.component.d.ts

@@ -133,5 +133,5 @@ import { SelectPickerProps } from './type';
  * />
  * ```
  */
-declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef: refFromConsumer, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, menuListFooterConfig, isCreatable, onCreateOption, closeMenuOnSelect, shouldShowNoOptionsMessage, shouldRenderTextArea, onKeyDown, shouldHideMenu, warningText, layout, ariaLabel, borderConfig, borderRadiusConfig, labelTippyCustomizedConfig, labelTooltipConfig, hideFormFieldInfo, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
+declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef: refFromConsumer, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, menuListFooterConfig, isCreatable, onCreateOption, closeMenuOnSelect, shouldShowNoOptionsMessage, shouldRenderTextArea, onKeyDown, shouldHideMenu, warningText, layout, ariaLabel, borderConfig, borderRadiusConfig, labelTippyCustomizedConfig, labelTooltipConfig, hideFormFieldInfo, autoFocus, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
 export default SelectPicker;

package/dist/Shared/Components/SelectPicker/index.d.ts

@@ -1,5 +1,6 @@
 export { ValueContainerWithLoadingShimmer } from './common';
 export { default as FilterSelectPicker } from './FilterSelectPicker';
+export * from './GroupedFilterSelectPicker';
 export { default as SelectPicker } from './SelectPicker.component';
 export * from './SelectPickerTextArea.component';
 export * from './type';

package/dist/Shared/Components/SelectPicker/type.d.ts

@@ -6,6 +6,7 @@ import { ServerErrors } from '../../../Common/ServerError';
 import { TooltipProps } from '../../../Common/Tooltip';
 import { OptionType } from '../../../Common/Types';
 import { ComponentSizeType } from '../../constants';
+import { ActionMenuProps } from '../ActionMenu';
 import { ButtonComponentType, ButtonProps, ButtonVariantType } from '../Button';
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types';
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
@@ -100,7 +101,7 @@ export declare enum SelectPickerVariantType {
     BORDER_LESS = "border-less",
     COMPACT = "compact"
 }
-export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage' | 'defaultMenuIsOpen'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
+export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage' | 'defaultMenuIsOpen' | 'onFocus'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
     /**
      * Config for the footer at the bottom of menu list. It is sticky by default
      *
@@ -215,9 +216,13 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
 export type SelectPickerGroupHeadingProps<OptionValue> = GroupHeadingProps<SelectPickerOptionType<OptionValue>> & {
     isGroupHeadingSelectable: boolean;
 };
-export interface FilterSelectPickerProps extends Required<Pick<SelectPickerProps<number | string, true>, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>, Pick<SelectPickerProps<number | string, true>, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus' | 'shouldMenuAlignRight' | 'optionListError' | 'reloadOptionList' | 'getOptionValue' | 'isOptionDisabled'> {
+export interface FilterSelectPickerProps extends Required<Pick<SelectPickerProps<number | string, true>, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>, Pick<SelectPickerProps<number | string, true>, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus' | 'shouldMenuAlignRight' | 'optionListError' | 'reloadOptionList' | 'getOptionValue' | 'isOptionDisabled' | 'onMenuClose' | 'menuIsOpen' | 'onKeyDown'> {
     appliedFilterOptions: SelectPickerOptionType[];
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void;
 }
 export type SelectPickerTextAreaProps = Omit<SelectPickerProps<string, false>, 'selectRef' | 'inputValue' | 'onInputChange' | 'controlShouldRenderValue' | 'onKeyDown' | 'onCreateOption' | 'shouldRenderTextArea'> & Pick<ResizableTagTextAreaProps, 'maxHeight' | 'minHeight' | 'refVar' | 'dependentRefs'>;
+export interface GroupedFilterSelectPickerProps<T extends string | number = string | number> extends Omit<ActionMenuProps<T>, 'onClick' | 'disableDescriptionEllipsis' | 'children' | 'buttonProps' | 'isSearchable'> {
+    isFilterApplied?: boolean;
+    filterSelectPickerPropsMap: Record<T, Omit<FilterSelectPickerProps, 'autoFocus' | 'menuIsOpen' | 'onMenuClose' | 'onKeyDown'>>;
+}
 export {};

package/dist/Shared/Components/TrailingItem/TrailingItem.component.d.ts

@@ -0,0 +1,3 @@
+import { TrailingItemProps } from './types';
+declare const TrailingItem: ({ type, config, variant }: TrailingItemProps) => JSX.Element;
+export default TrailingItem;

package/dist/Shared/Components/TrailingItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TrailingItem } from './TrailingItem.component';
+export * from './types';

package/dist/Shared/Components/TrailingItem/types.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { OmitNever } from '../../types';
+import { ButtonProps } from '../Button';
+import { IconsProps } from '../Icon';
+import { NumbersCountProps } from '../NumbersCount';
+import { DTSwitchProps } from '../Switch';
+export type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
+    /** @default 'N800' */
+    color?: IconsProps['color'];
+};
+export type TrailingItemType = {
+    type: 'icon';
+    config: ActionMenuItemIconType;
+} | {
+    type: 'text';
+    config: {
+        value: string;
+        icon?: ActionMenuItemIconType;
+    };
+} | {
+    type: 'counter';
+    config: {
+        value: NumbersCountProps['count'];
+    } & Pick<NumbersCountProps, 'isSelected'>;
+} | {
+    type: 'switch';
+    config: Pick<DTSwitchProps, 'ariaLabel' | 'isChecked' | 'indeterminate' | 'isDisabled' | 'isLoading' | 'name' | 'onChange' | 'tooltipContent'>;
+} | {
+    type: 'button';
+    config: OmitNever<Omit<Extract<ButtonProps, {
+        icon: ReactElement;
+    }>, 'size' | 'variant'>>;
+};
+export type TrailingItemProps = TrailingItemType & {
+    /**
+     * @default 'neutral'
+     */
+    variant?: 'neutral' | 'negative';
+};

package/dist/Shared/Components/TreeView/TreeView.component.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewProps } from './types';
+declare const TreeView: <DataAttributeType = null>({ nodes, isControlled, expandedMap: expandedMapProp, selectedId, onToggle: onToggleProp, onSelect, depth, mode, flatNodeList: flatNodeListProp, getUpdateItemsRefMap: getUpdateItemsRefMapProp, variant, defaultExpandedMap, }: TreeViewProps<DataAttributeType>) => JSX.Element;
+export default TreeView;

package/dist/Shared/Components/TreeView/TreeViewNodeContent.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewNodeContentProps } from './types';
+declare const TreeViewNodeContent: ({ startIconConfig, title, subtitle, type, customTooltipConfig, strikeThrough, isSelected, }: TreeViewNodeContentProps) => JSX.Element;
+export default TreeViewNodeContent;

package/dist/Shared/Components/TreeView/constants.d.ts

@@ -0,0 +1,4 @@
+import { TreeViewProps } from './types';
+export declare const DEFAULT_NO_ITEMS_TEXT = "No items found";
+export declare const VARIANT_TO_BG_CLASS_MAP: Record<TreeViewProps['variant'], string>;
+export declare const VARIANT_TO_HOVER_CLASS_MAP: Record<TreeViewProps['variant'], string>;

package/dist/Shared/Components/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeView } from './TreeView.component';
+export * from './types';

package/dist/Shared/Components/TreeView/types.d.ts

@@ -0,0 +1,204 @@
+import { SyntheticEvent } from 'react';
+import { TooltipProps } from '../../../Common/Tooltip';
+import { DataAttributes, Never } from '../../types';
+import { IconsProps } from '../Icon';
+import { TrailingItemProps } from '../TrailingItem';
+export type TreeNode<DataAttributeType = null> = TreeHeading<DataAttributeType> | TreeItem<DataAttributeType>;
+/**
+ * Represents a base node structure for a tree view component.
+ *
+ * @typeParam DataAttributeType - The type for data attributes, defaults to null. If it extends `DataAttributes`, the node can have `dataAttributes` of this type.
+ *
+ * @property id - Unique identifier for the node.
+ * @property title - The main title text displayed for the node.
+ * @property subtitle - Optional subtitle text for the node.
+ * @property customTooltipConfig - Optional configuration for a custom tooltip.
+ * @property strikeThrough - If true, the title will be rendered with a line-through style.
+ * @property startIconConfig - Optional configuration for a start icon, which can be either a standard icon (with `name` and `color`) or a custom JSX element.
+ * @property trailingItem - Optional configuration for a trailing item (e.g., button, icon) displayed at the end of the node.
+ * @property dataAttributes - Optional data attributes, present only if `DataAttributeType` extends `DataAttributes`.
+ */
+type BaseNode<DataAttributeType = null> = {
+    /**
+     * id - Unique identifier for the node.
+     */
+    id: string;
+    /**
+     * The title of the list item.
+     */
+    title: string;
+    /**
+     * The subtitle of the list item.
+     */
+    subtitle?: string;
+    /**
+     *  Optional configuration for a custom tooltip.
+     */
+    customTooltipConfig?: TooltipProps;
+    /**
+     * If true, the title will be rendered with line-through.
+     */
+    strikeThrough?: boolean;
+    /**
+     * Optional configuration for a start icon, which can be either a standard icon (with `name` and `color`) or a custom JSX element.
+     */
+    startIconConfig?: {
+        tooltipContent?: string;
+    } & ((Pick<IconsProps, 'name' | 'color'> & {
+        customIcon?: never;
+    }) | (Never<Pick<IconsProps, 'name' | 'color'>> & {
+        customIcon?: JSX.Element;
+    }));
+    trailingItem?: TrailingItemProps;
+} & (DataAttributeType extends DataAttributes ? {
+    dataAttributes?: DataAttributeType;
+} : {
+    dataAttributes?: never;
+});
+export type TreeHeading<DataAttributeType = null> = BaseNode<DataAttributeType> & {
+    type: 'heading';
+    items?: TreeNode<DataAttributeType>[];
+    /**
+     * Text to display when there are no items in the list.
+     * @default DEFAULT_NO_ITEMS_TEXT
+     */
+    noItemsText?: string;
+};
+export type NodeElementType = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+/**
+ * Represents an item node in a tree structure, supporting different rendering modes.
+ *
+ * @template DataAttributeType - The type for custom data attributes, defaults to null.
+ *
+ * A `TreeItem` can be rendered as a button, link, or div, each with its own set of properties:
+ * - When `as` is `'button'` (default), it can have an `onClick` handler.
+ * - When `as` is `'link'`, it requires an `href`, can have an `onClick` handler, and supports clearing query parameters on navigation.
+ * - When `as` is `'div'`, it is a non-interactive container.
+ *
+ * @property {'item'} type - Identifies the node as an item.
+ * @property {boolean} [isDisabled=false] - If true, disables the item.
+ * @property {'button' | 'link' | 'div'} [as] - Determines the rendered element type.
+ * @property {(e: SyntheticEvent) => void} [onClick] - Callback for click events (button or link only).
+ * @property {string} [href] - The navigation URL (link only).
+ * @property {boolean} [clearQueryParamsOnNavigation=false] - If true, clears query parameters during navigation (link only).
+ */
+export type TreeItem<DataAttributeType = null> = BaseNode<DataAttributeType> & {
+    type: 'item';
+    /**
+     * @default false
+     */
+    isDisabled?: boolean;
+} & ({
+    as?: 'button';
+    /**
+     * The callback function to handle click events on the button.
+     */
+    onClick?: (e: SyntheticEvent) => void;
+    href?: never;
+    clearQueryParamsOnNavigation?: never;
+} | {
+    as: 'link';
+    href: string;
+    /**
+     * The callback function to handle click events on the nav link.
+     */
+    onClick?: (e: SyntheticEvent) => void;
+    /**
+     * If `true`, clears query parameters during navigation.
+     * @default false
+     */
+    clearQueryParamsOnNavigation?: boolean;
+} | {
+    as: 'div';
+    href?: never;
+    onClick?: never;
+    clearQueryParamsOnNavigation?: never;
+});
+/**
+ * Props for the TreeView component.
+ *
+ * @template DataAttributeType - The type for data attributes associated with tree nodes.
+ *
+ * @property nodes - An array of tree nodes to be rendered in the tree view.
+ * @property selectedId - (Optional) The ID of the currently selected tree item.
+ * @property onSelect - (Optional) Callback invoked when a tree item is selected.
+ * @property mode - (Optional) Determines the navigation mode of the tree view.
+ *   - `'navigation'`: Enables keyboard navigation and focuses only the selected item.
+ *   - `'form'`: Leaves navigation to the browser.
+ *   - @default 'navigation'
+ * @property variant - (Optional) Visual variant of the tree view.
+ *   - `'primary'`: Uses primary background and hover colors.
+ *   - `'secondary'`: Uses secondary background and hover colors.
+ *   - @default 'primary'
+ * @property defaultExpandedMap - (Optional) Initial map of node IDs to their expanded state.
+ *   - @default {}
+ *
+ * @property depth - (Internal use only) The current depth level in the tree.
+ * @property getUpdateItemsRefMap - (Internal use only) Function to update the ref map for item buttons/anchors.
+ * @property flatNodeList - (Internal use only) List of all visible node IDs for keyboard navigation.
+ * @property onToggle - (Internal use only) Callback invoked when a tree heading is toggled.
+ * @property expandedMap - (Internal use only) Map of node IDs to their expanded state.
+ * @property isControlled - (Internal use only) Indicates if the tree view is controlled.
+ */
+export type TreeViewProps<DataAttributeType = null> = {
+    nodes: TreeNode<DataAttributeType>[];
+    selectedId?: string;
+    onSelect?: (item: TreeItem<DataAttributeType>) => void;
+    /**
+     * If navigation mode, the tree view will provide navigation through keyboard actions and make the only selected item focusable.
+     * If form mode, will leave the navigation to browser.
+     * @default 'navigation'
+     */
+    mode?: 'navigation' | 'form';
+    /**
+     * If primary the background color will be bg__primary and bg__hover--opaque, if secondary the background color will be bg__secondary bg__hover-secondary--opaque.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * @default {}
+     */
+    defaultExpandedMap?: Record<string, boolean>;
+} /**
+ * WARNING: For internal use only.
+ */ & ({
+    depth: number;
+    /**
+     * Would pass this to item button/ref and store it in out ref map through this function.
+     */
+    getUpdateItemsRefMap: (id: string) => (element: NodeElementType) => void;
+    /**
+     * List of all nodes visible in tree view for keyboard navigation.
+     */
+    flatNodeList: string[];
+    /**
+     * Would be called when the user toggles a heading.
+     */
+    onToggle: (item: TreeHeading<DataAttributeType>) => void;
+    /**
+     * Map of id to whether the item is expanded or not.
+     */
+    expandedMap: Record<string, boolean>;
+    isControlled: true;
+} | {
+    depth?: never;
+    getUpdateItemsRefMap?: never;
+    flatNodeList?: never;
+    onToggle?: never;
+    expandedMap?: never;
+    isControlled?: false;
+});
+export interface TreeViewNodeContentProps extends Pick<BaseNode, 'startIconConfig' | 'title' | 'subtitle' | 'customTooltipConfig' | 'strikeThrough'> {
+    type: 'heading' | 'item';
+    isSelected: boolean;
+}
+export interface GetSelectedIdParentNodesProps<DataAttributeType = null> extends Pick<TreeViewProps<DataAttributeType>, 'nodes' | 'selectedId'> {
+}
+export interface FindSelectedIdParentNodesProps<DataAttributeType = null> extends Pick<GetSelectedIdParentNodesProps<DataAttributeType>, 'selectedId'> {
+    node: TreeNode<DataAttributeType>;
+    onFindParentNode: (id: string) => void;
+}
+export interface GetVisibleNodesProps<DataAttributeType = null> extends Pick<TreeViewProps<DataAttributeType>, 'expandedMap'> {
+    nodeList: TreeNode<DataAttributeType>[];
+}
+export {};

package/dist/Shared/Components/TreeView/utils.d.ts

@@ -0,0 +1,22 @@
+import { GetSelectedIdParentNodesProps, GetVisibleNodesProps } from './types';
+/**
+ * Retrieves an array of parent node IDs for the currently selected node.
+ *
+ * Iterates through the provided tree nodes and collects the IDs of all parent nodes
+ * leading to the node identified by `selectedId`. If no node is selected, returns an empty array.
+ *
+ * @returns {string[]} An array of parent node IDs for the selected node, or an empty array if no node is selected.
+ */
+export declare const getSelectedIdParentNodes: <DataAttributeType = null>({ nodes, selectedId, }: GetSelectedIdParentNodesProps<DataAttributeType>) => string[];
+/**
+ * Recursively traverses a list of tree nodes and returns an array of all node IDs that are present in DOM.
+ *
+ * For each node in the provided list:
+ * - Adds the node's `id` to the result array.
+ * - If the node is of type `'heading'`, is expanded (as per `expandedMap`), and has child items,
+ *   recursively traverses its child items and includes their IDs as well.
+ *
+ * @param nodeList - The list of nodes to traverse.
+ * @returns An array of strings representing the IDs of all traversed nodes.
+ */
+export declare const getVisibleNodes: <DataAttributeType = null>({ nodeList, expandedMap, }: GetVisibleNodesProps<DataAttributeType>) => string[];

package/dist/Shared/Components/index.d.ts

@@ -86,6 +86,7 @@ export * from './TargetPlatforms';
 export * from './Textarea';
 export * from './ThemeSwitcher';
 export * from './ToggleResolveScopedVariables';
+export * from './TreeView';
 export * from './Typewriter';
 export * from './UnsavedChanges';
 export * from './UnsavedChangesDialog';