@bitrise/bitkit 13.324.0 → 13.325.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.324.0",
+  "version": "13.325.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Badge/Badge.theme.ts

@@ -4,8 +4,8 @@ import { BadgeColorScheme, BadgeProps } from './Badge';
 const baseStyle: SystemStyleObject = {
   borderRadius: '4',
   display: 'inline-flex',
+  alignItems: 'center',
   gap: '4',
-  padding: '4',
   textStyle: 'comp/badge/sm',
 };
 
@@ -87,15 +87,62 @@ const getVariant = (props: BadgeProps) => {
   return colors[variant || 'subtle'][colorScheme || 'neutral'];
 };
 
+const sizes: Record<'xs' | 'xxs', SystemStyleObject> = {
+  xs: {
+    height: 'fit-content',
+    width: 'fit-content',
+    padding: '4px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&.has-children': {
+      paddingInlineStart: '8px',
+      paddingInlineEnd: '8px',
+    },
+    '&.has-icon': {
+      paddingInlineStart: '4px',
+    },
+    '&.has-icon:not(.has-children)': {
+      paddingInlineEnd: '4px',
+    },
+    '&.single-char': {
+      width: '24px',
+      height: '24px',
+      padding: '4px 0',
+    },
+  },
+  xxs: {
+    height: 'fit-content',
+    width: 'fit-content',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '2px 6px 2px 4px',
+    '&.single-char:not(.has-icon)': {
+      width: '20px',
+      height: '20px',
+      padding: '2px 0',
+    },
+    '&.has-icon:not(.has-children)': {
+      padding: '2px',
+    },
+    '&.has-icon.has-children': {
+      padding: '2px 6px 2px 4px',
+    },
+  },
+};
+
 const BadgeTheme = {
   baseStyle,
   variants: {
     bold: getVariant,
     subtle: getVariant,
   },
+  sizes,
   defaultProps: {
     variant: 'subtle',
     colorScheme: 'neutral',
+    size: 'xs',
   },
 };
 

package/src/Components/Badge/Badge.tsx

@@ -11,22 +11,33 @@ export type BadgeColorScheme =
   | 'progress'
   | 'orange'
   | 'turquoise';
+
 export interface BadgeProps extends ChakraBadgeProps {
   children?: string | number;
   colorScheme?: BadgeColorScheme;
   iconName?: TypeIconName;
   variant?: 'bold' | 'subtle';
+  size?: 'xs' | 'xxs';
 }
 
 /**
  * Badges are used to highlight an item's status for quick recognition.
  */
 const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => {
-  const { children, iconName, ...rest } = props;
+  const { children, iconName, size = 'xs', className, ...rest } = props;
+
+  const hasIcon = !!iconName;
+  const hasChildren = !!children;
+  const isSingleChar = hasChildren && String(children).length === 1;
+
+  const classNames = [className, hasIcon && 'has-icon', hasChildren && 'has-children', isSingleChar && 'single-char']
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <ChakraBadge {...rest} ref={ref} paddingInlineStart={iconName ? '4' : '8'} paddingInlineEnd={children ? '8' : '4'}>
-      {!!iconName && <Icon size="16" name={iconName} />}
-      {!!children && (
+    <ChakraBadge {...rest} size={size} ref={ref} className={classNames || undefined}>
+      {hasIcon && <Icon size="16" name={iconName} />}
+      {hasChildren && (
         <Text hasEllipsis as="span">
           {children}
         </Text>

package/src/Components/Filter/Filter.storyData.ts

@@ -94,7 +94,7 @@ export const FILTER_STORY_DATA: FilterData = {
         }, 2000);
       });
     },
-    options: ['default 1', 'default 2', 'default 3'],
+    options: ['default 1', 'default 2', 'test case with a very long name that might overflow'],
     type: 'tag',
   },
   workflow: {

package/src/Components/Filter/Mobile/Filter.tsx

@@ -1,3 +1,4 @@
+import Divider from '../../Divider/Divider';
 import Badge from '../../Badge/Badge';
 import Text from '../../Text/Text';
 import Button from '../../Button/Button';
@@ -6,12 +7,29 @@ import { useFilterContext } from '../Filter.context';
 import { FilterProps } from '../Filter.types';
 import FilterDrawer from './FilterDrawer';
 import FilterForm from './FilterForm';
+import FilterSearch from './FilterSearch';
+
+const Filter = (props: FilterProps) => {
+  const {
+    data: initialData,
+    defaultState,
+    filtersDependOn,
+    isLoading,
+    isMobile,
+    onChange,
+    searchTooltip,
+    showAdd = true,
+    showFilterIcon = true,
+    showClearFilters = true,
+    showSearch,
+    ...rest
+  } = props;
 
-const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
   const {
     data,
     isPopoverOpen,
     onClearFilters,
+    onFilterChange,
     selectedCategory,
     setSelectedCategory,
     setPopoverOpen,
@@ -20,14 +38,14 @@ const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
   } = useFilterContext();
 
   const isAllOptionForSwitch = (category: string) => {
-    return data[category].type === 'switch' && state[category]?.[0] === 'all';
+    return data[category]?.type === 'switch' && state[category]?.[0] === 'all';
   };
 
   const count = Object.entries(state).filter(([name, item]) => item?.length > 0 && !isAllOptionForSwitch(name)).length;
 
   return (
-    <>
-      <Box alignItems="center" display="flex" justifyContent="space-between">
+    <Box display="flex" flexDirection="column" {...rest}>
+      <Box alignItems="center" display="flex" justifyContent="space-between" padding="12">
         <Button leftIconName="Filter" onClick={() => setPopoverOpen(true)} size="sm" variant="secondary">
           <Text alignItems="center" display="flex" gap="8">
             Filters
@@ -49,13 +67,20 @@ const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
           </Button>
         )}
       </Box>
+      {showSearch && (
+        <>
+          <Divider color="border/minimal" />
+          <FilterSearch onChange={onFilterChange} value={state.search?.length ? state.search[0] : ''} />
+          <Divider color="border/minimal" />
+        </>
+      )}
       <FilterDrawer isOpen={isPopoverOpen} onClose={() => setPopoverOpen(false)} showAdd={showAdd} />
       <FilterForm
         isOpen={Boolean(selectedCategory)}
         onClose={() => setSelectedCategory(undefined)}
         selectedCategory={selectedCategory || ''}
       />
-    </>
+    </Box>
   );
 };
 

package/src/Components/Filter/Mobile/FilterForm.tsx

@@ -97,8 +97,8 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
       bodyPadding="0"
       bodyProps={{ overflowY: 'auto' }}
       bodyRef={bodyRef}
-      contentProps={{ zIndex: 'dialog', top: '0' }}
-      headerPadding={16}
+      contentProps={{ gap: '0', zIndex: 'dialog', top: '0' }}
+      headerPadding="12"
       hideCloseButton
       isOpen={isOpen}
       maxWidth="100%"
@@ -118,7 +118,7 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
             <Text as="h6" color="text/tertiary" textStyle="heading/h6">
               Filter
             </Text>
-            <Text as="h3" color="text/primary" textStyle="heading/mobile/h3">
+            <Text as="h3" color="text/primary" textStyle="heading/mobile/h3" textTransform="initial">
               {name}
             </Text>
           </Box>
@@ -162,21 +162,20 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
         ) : null
       }
     >
-      <Box display="flex" flexDirection="column" gap="16">
+      <Box display="flex" flexDirection="column" gap="8">
         <Box
           backgroundColor="background/primary"
           display="flex"
           flexDirection="column"
           gap="8"
-          marginBottom="8"
           position="sticky"
           top="0"
         >
           {(withSearch || isAsync) && (
             <>
-              <Divider />
+              <Divider color="border/minimal" />
               <SearchInput
-                marginInline="12"
+                marginInline="8"
                 onChange={onSearchChange}
                 placeholder="Search for options"
                 value={searchValue}
@@ -184,7 +183,7 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
               />
             </>
           )}
-          <Divider />
+          <Divider color="border/minimal" />
         </Box>
         <Box display="flex" flexDirection="column" gap="8">
           {isLoading && (

package/src/Components/Filter/Mobile/FilterItem.tsx

@@ -4,6 +4,7 @@ import FormLabel from '../../Form/FormLabel';
 import Button from '../../Button/Button';
 import Box from '../../Box/Box';
 import Icon from '../../Icon/Icon';
+import Text from '../../Text/Text';
 import IconButton from '../../IconButton/IconButton';
 import { useFilterContext } from '../Filter.context';
 import { getDateRangeLabel, getOptionLabel } from '../Filter.utils';
@@ -59,7 +60,9 @@ const FilterItem = ({ category }: FilterItemProps) => {
             variant="secondary"
             width="100%"
           >
-            {getText()}
+            <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" width="100%" textAlign="left" minW="0">
+              {getText()}
+            </Text>
           </Button>
           <IconButton
             aria-label="Clear"
@@ -88,7 +91,9 @@ const FilterItem = ({ category }: FilterItemProps) => {
               {getText()}
             </Box>
           ) : (
-            getText()
+            <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" minW="0">
+              {getText()}
+            </Text>
           )}
         </Button>
       )}

package/src/Components/Filter/Mobile/FilterSearch.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { InputProps } from 'chakra-ui-2--react';
+import { useDebounce } from '../../../utils/utils';
+import SearchInput from '../../SearchInput/SearchInput';
+import { FilterValue } from '../Filter.types';
+
+export interface FilterSearchProps extends Omit<InputProps, 'onChange' | 'value'> {
+  onChange: (category: string, selected: FilterValue) => void;
+  value: string;
+}
+
+const FilterSearch = (props: FilterSearchProps) => {
+  const { onChange, value } = props;
+
+  const [searchValue, setSearchValue] = useState(value);
+
+  const onInputChange = (newSearchValue: string) => {
+    setSearchValue(newSearchValue);
+  };
+
+  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
+
+  useEffect(() => {
+    onChange('search', debouncedSearchValue.length ? [debouncedSearchValue] : []);
+  }, [debouncedSearchValue]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  return (
+    <SearchInput onChange={onInputChange} paddingBlock="4" placeholder="Search" value={searchValue} variant="mobile" />
+  );
+};
+
+export default FilterSearch;

package/src/Components/Icons/16x16/FolderEmpty.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const FolderEmpty = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.37868 2.5C6.7765 2.5 7.15804 2.65804 7.43934 2.93934L8 3.5H13.5C14.3284 3.5 15 4.17157 15 5V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V4C1 3.17157 1.67157 2.5 2.5 2.5H6.37868ZM7.37868 5L6.37868 4H2.5V12H13.5V5L7.37868 5Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default FolderEmpty;

package/src/Components/Icons/16x16/index.ts

@@ -108,6 +108,7 @@ export { default as Filter } from './Filter';
 export { default as Flag } from './Flag';
 export { default as Flutter } from './Flutter';
 export { default as Folder } from './Folder';
+export { default as FolderEmpty } from './FolderEmpty';
 export { default as Fullscreen } from './Fullscreen';
 export { default as FullscreenExit } from './FullscreenExit';
 export { default as Gauge } from './Gauge';

package/src/Components/Icons/24x24/FolderEmpty.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const FolderEmpty = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.5858 4.58579C10.2107 4.21071 9.70201 4 9.17157 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V8C22 6.89543 21.1046 6 20 6H12L10.5858 4.58579ZM4 6V18H20V8H11.1716L9.17157 6H4Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default FolderEmpty;

package/src/Components/Icons/24x24/index.ts

@@ -106,6 +106,7 @@ export { default as Filter } from './Filter';
 export { default as Flag } from './Flag';
 export { default as Flutter } from './Flutter';
 export { default as Folder } from './Folder';
+export { default as FolderEmpty } from './FolderEmpty';
 export { default as Fullscreen } from './Fullscreen';
 export { default as FullscreenExit } from './FullscreenExit';
 export { default as Gauge } from './Gauge';

package/src/Components/TreeView/TreeView.context.tsx

@@ -3,6 +3,7 @@ import { useControllableState } from 'chakra-ui-2--react';
 import { NodeCallback, TreeViewAction, TreeViewState } from './TreeView.types';
 
 const TreeViewContext = createContext<TreeViewState & TreeViewAction>({
+  variant: undefined,
   selectedId: undefined,
   expandedIds: new Set<string>(),
   disabledIds: new Set<string>(),
@@ -10,7 +11,7 @@ const TreeViewContext = createContext<TreeViewState & TreeViewAction>({
   onExpandedChange: () => undefined,
 });
 
-export type TreeViewContenxtProviderProps = PropsWithChildren<
+export type TreeViewContextProviderProps = PropsWithChildren<
   Partial<TreeViewState> &
     Partial<TreeViewAction> & {
       defaultSelectedId?: string;
@@ -19,6 +20,7 @@ export type TreeViewContenxtProviderProps = PropsWithChildren<
     }
 >;
 export const TreeViewContextProvider = ({
+  variant = 'navigation',
   selectedId: controlledSelectedId,
   defaultSelectedId,
   expandedIds: controlledExpandedIds,
@@ -28,7 +30,7 @@ export const TreeViewContextProvider = ({
   onSelectionChange,
   onExpandedChange,
   children,
-}: TreeViewContenxtProviderProps) => {
+}: TreeViewContextProviderProps) => {
   const [selectedId, setSelectedId] = useControllableState({
     value: controlledSelectedId,
     defaultValue: defaultSelectedId,
@@ -71,8 +73,15 @@ export const TreeViewContextProvider = ({
   );
 
   const contextValue = useMemo(
-    () => ({ selectedId, expandedIds, disabledIds, onSelectionChange: handleSelect, onExpandedChange: handleExpand }),
-    [selectedId, expandedIds, disabledIds, handleSelect, handleExpand],
+    () => ({
+      variant,
+      selectedId,
+      expandedIds,
+      disabledIds,
+      onSelectionChange: handleSelect,
+      onExpandedChange: handleExpand,
+    }),
+    [variant, selectedId, expandedIds, disabledIds, handleSelect, handleExpand],
   );
 
   return <TreeViewContext.Provider value={contextValue}>{children}</TreeViewContext.Provider>;

package/src/Components/TreeView/TreeView.theme.ts

@@ -1,28 +1,63 @@
 import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
+  'listItem',
   'icon',
+  'iconWrapper',
   'button',
   'buttonContent',
   'textBlock',
   'suffixBlock',
   'selectionIndicator',
+  'collapseContent',
+  'hoverActionsWrapper',
+  'hoverActionButton',
+  'leafBadge',
 ]);
 
 const baseStyle = definePartsStyle({
+  listItem: {
+    overflow: 'hidden',
+  },
   icon: {
     marginTop: '10px',
     marginBottom: '2px',
     color: 'icon/primary',
   },
+  leafBadge: {
+    marginTop: '10px',
+    marginBottom: '2px',
+  },
+  iconWrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignSelf: 'flex-start',
+    zIndex: 1,
+    '&.show-connector::after': {
+      content: '""',
+      position: 'absolute',
+      left: '50%',
+      top: '100%',
+      bottom: '-100px',
+      width: '1px',
+      backgroundColor: 'border/regular',
+    },
+  },
   button: {
     pos: 'relative',
     py: '0',
     px: '16',
     pl: 'calc(16px + 24px * var(--level))',
     w: '100%',
+    overflow: 'hidden',
     _hover: {
       bgColor: 'background/secondary',
+      '& .hover-actions': {
+        display: 'flex',
+      },
+      '& .hide-on-hover': {
+        display: 'none',
+      },
     },
     _active: {
       bgColor: 'background/tertiary',
@@ -37,6 +72,15 @@ const baseStyle = definePartsStyle({
         bgColor: 'background/selected-hover',
       },
     },
+    '&.show-ancestor-connectors::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: '24px',
+      width: 'calc(var(--level) * 24px)',
+      zIndex: 1,
+    },
   },
   buttonContent: {
     gap: '8',
@@ -63,9 +107,17 @@ const baseStyle = definePartsStyle({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    paddingTop: '8',
     paddingLeft: '16',
     gap: '8',
+    '& > .hide-on-hover': {
+      display: 'flex',
+    },
+    'button:hover > div > div > &': {
+      pt: '0',
+    },
+    'button:hover > div > div > & > .hide-on-hover': {
+      display: 'none',
+    },
   },
   selectionIndicator: {
     width: '3px',
@@ -75,6 +127,23 @@ const baseStyle = definePartsStyle({
     bgColor: 'border/selected',
     borderLeftRadius: '2',
   },
+  collapseContent: {
+    position: 'relative',
+    '&.show-connector::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 'calc(16px + var(--level) * 24px + 8px)',
+      width: '1px',
+      backgroundColor: 'border/regular',
+      zIndex: 1,
+    },
+  },
+  hoverActionsWrapper: {
+    display: 'none',
+    alignItems: 'center',
+  },
 });
 
 const TreeViewTheme = defineMultiStyleConfig({

package/src/Components/TreeView/TreeView.tsx

@@ -1,81 +1,36 @@
 import { PropsWithChildren } from 'react';
-import { TreeViewContenxtProviderProps, TreeViewContextProvider } from './TreeView.context';
+import { TreeViewContextProviderProps, TreeViewContextProvider } from './TreeView.context';
 import TreeViewGroup from './TreeViewGroup';
 import TreeViewNode from './TreeViewNode';
-import { NodeData } from './TreeView.types';
+import { NodeData, TreeViewVariant, BranchNodeData, LeafNodeData } from './TreeView.types';
 
-const TreeViewLeaf = (props: Omit<NodeData, 'type' | 'children'>) => (
+const TreeViewLeaf = (props: Omit<LeafNodeData, 'type' | 'children'>) => (
   <TreeViewNode type="leaf" level={-1} indexPath={[]} titlePath={[]} {...props} />
 );
-const TreeViewBranch = (props: PropsWithChildren<Omit<NodeData, 'type' | 'children'>>) => (
+const TreeViewBranch = (props: PropsWithChildren<Omit<BranchNodeData, 'type' | 'children'>>) => (
   <TreeViewNode type="branch" level={-1} indexPath={[]} titlePath={[]} {...props} />
 );
 
 const renderTreeNodes = (nodes: NodeData[]) => {
   return nodes.map((node) => {
-    const {
-      id,
-      type,
-      title,
-      description,
-      iconName,
-      iconColor,
-      label,
-      labelIconName,
-      labelIconColor,
-      children,
-      onClick,
-    } = node;
+    const { id, type, children, ...rest } = node;
 
     if (type === 'branch') {
       return (
-        <TreeViewNode
-          key={id}
-          id={id}
-          type="branch"
-          title={title}
-          description={description}
-          iconName={iconName}
-          iconColor={iconColor}
-          label={label}
-          labelIconName={labelIconName}
-          labelIconColor={labelIconColor}
-          // Thes props will be overridden by the TreeViewGroup
-          level={-1}
-          indexPath={[]}
-          titlePath={[]}
-          onClick={onClick}
-        >
+        <TreeViewNode key={id} id={id} type="branch" level={-1} indexPath={[]} titlePath={[]} {...rest}>
           {children && renderTreeNodes(children)}
         </TreeViewNode>
       );
     }
 
-    return (
-      <TreeViewNode
-        key={id}
-        id={id}
-        type="leaf"
-        title={title}
-        description={description}
-        iconName={iconName}
-        iconColor={iconColor}
-        label={label}
-        labelIconName={labelIconName}
-        labelIconColor={labelIconColor}
-        // Thes props will be overridden by the TreeViewGroup
-        level={-1}
-        indexPath={[]}
-        titlePath={[]}
-        onClick={onClick}
-      />
-    );
+    return <TreeViewNode key={id} id={id} type="leaf" level={-1} indexPath={[]} titlePath={[]} {...rest} />;
   });
 };
 
-export type TreeViewProps = TreeViewContenxtProviderProps & {
+export type TreeViewProps = TreeViewContextProviderProps & {
   label: string;
   data?: NodeData[];
+  variant?: TreeViewVariant;
 };
 
 const TreeView = ({ data, label, children, ...rest }: PropsWithChildren<TreeViewProps>) => {

package/src/Components/TreeView/TreeView.types.ts

@@ -1,21 +1,87 @@
+import { PropsWithChildren } from 'react';
+import { UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import { TypeIconName } from '../Icon/Icon';
+import { BadgeColorScheme, BadgeProps } from '../Badge/Badge';
 
 export type NodeType = 'branch' | 'leaf';
 
-export type NodeData = {
+export type TreeViewVariant = 'navigation' | 'files';
+
+export type HoverControlButton = {
+  iconName: TypeIconName;
+  label: string;
+  isDanger?: boolean;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type LeafIndicator =
+  | {
+      iconName?: TypeIconName;
+      iconColor?: string;
+      badgeLabel?: never;
+      badgeVariant?: never;
+      badgeColorScheme?: never;
+      badgeTooltip?: never;
+    }
+  | {
+      iconName?: never;
+      iconColor?: never;
+      badgeLabel?: string;
+      badgeVariant?: BadgeProps['variant'];
+      badgeColorScheme?: BadgeColorScheme;
+      badgeTooltip?: {
+        label: string;
+        placement?: UseFloatingProps['placement'];
+      };
+    };
+
+type NodeBase = {
   id: string;
-  type: NodeType;
   title: string;
   description?: string;
-  iconName?: TypeIconName;
-  iconColor?: string;
+  hasWarning?: boolean;
   label?: string;
   labelIconName?: TypeIconName;
   labelIconColor?: string;
-  children?: NodeData[];
   onClick?: VoidFunction;
+  hoverActions?: [HoverControlButton] | [HoverControlButton, HoverControlButton];
+  children?: NodeData[];
 };
 
+type LeafNodeData = NodeBase & { type: 'leaf' } & LeafIndicator;
+
+type BranchNodeData = NodeBase & {
+  type: 'branch';
+  iconName?: TypeIconName;
+  iconColor?: string;
+  branchIconTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+};
+
+export type NodeData = LeafNodeData | BranchNodeData;
+export type { LeafNodeData, BranchNodeData };
+
+type AllNodeProps = NodeBase & {
+  type: NodeType;
+  iconName?: TypeIconName;
+  iconColor?: string;
+  badgeLabel?: string;
+  badgeVariant?: BadgeProps['variant'];
+  badgeColorScheme?: BadgeColorScheme;
+  badgeTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+  branchIconTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+};
+
+export type TreeViewNodeProps = PropsWithChildren<Omit<AllNodeProps, 'children'> & NodePath>;
+
 export type NodePath = {
   level: number;
   indexPath: number[];
@@ -32,6 +98,7 @@ export type NodeState = {
 };
 
 export type TreeViewState = {
+  variant?: TreeViewVariant;
   selectedId?: string;
   expandedIds: Set<string>;
   disabledIds: Set<string>;

package/src/Components/TreeView/TreeViewNode.tsx

@@ -1,12 +1,15 @@
-import { memo, PropsWithChildren, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, MouseEvent } from 'react';
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
 import Icon from '../Icon/Icon';
+import Badge from '../Badge/Badge';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import Collapse from '../Collapse/Collapse';
+import ControlButton from '../ControlButton/ControlButton';
+import Tooltip from '../Tooltip/Tooltip';
 import TreeViewGroup from './TreeViewGroup';
 import { useTreeViewContext } from './TreeView.context';
-import { NodeData, NodePath } from './TreeView.types';
+import { HoverControlButton, TreeViewNodeProps } from './TreeView.types';
 
 type TreeViewNodeContentProps = TreeViewNodeProps & {
   isBranch: boolean;
@@ -22,11 +25,18 @@ const TreeViewNodeContent = memo(
     id,
     title,
     description,
+    hasWarning,
     iconName,
     iconColor,
+    badgeLabel,
+    badgeVariant,
+    badgeColorScheme,
+    badgeTooltip,
     label,
     labelIconName,
     labelIconColor,
+    hoverActions,
+    branchIconTooltip,
     // NodePath
     level,
     indexPath,
@@ -40,6 +50,29 @@ const TreeViewNodeContent = memo(
     children,
   }: TreeViewNodeContentProps) => {
     const styles = useMultiStyleConfig('TreeView', {});
+    const { variant } = useTreeViewContext();
+
+    const isFilesVariant = variant === 'files';
+    const hasChildren = Boolean(children);
+    const isSelectable = !(isBranch && !hasChildren);
+    const isEmptyBranch = isBranch && !hasChildren;
+    const chevronIcon = isExpanded ? 'ChevronDown' : 'ChevronRight';
+    const primaryIconName = isFilesVariant ? 'FolderEmpty' : chevronIcon;
+
+    const showAncestorConnectors = isFilesVariant && level > 1;
+    const showOwnConnector = isFilesVariant && isBranch && isExpanded;
+
+    const hasHoverActions = hoverActions && hoverActions.length > 0;
+    const hasLabelContent = label || labelIconName || hasWarning;
+
+    const showIcon = !isBranch && iconName;
+    const showBadge = !isBranch && !iconName && badgeLabel;
+
+    const handleActionClick = useCallback((e: MouseEvent, action: HoverControlButton) => {
+      e.stopPropagation();
+      e.preventDefault();
+      action.onClick(e);
+    }, []);
 
     return (
       <Box
@@ -47,27 +80,59 @@ const TreeViewNodeContent = memo(
         id={id}
         role="treeitem"
         aria-level={level}
-        aria-disabled={isDisabled}
+        aria-disabled={isDisabled || !isSelectable}
         aria-selected={isSelected}
-        {...(isBranch ? { 'aria-expanded': isExpanded } : {})}
+        {...(isBranch ? { 'aria-expanded': hasChildren ? isExpanded : undefined } : {})}
+        sx={styles.listItem}
       >
         <Box
           as="button"
-          tabIndex={isSelected ? 0 : -1}
-          data-selected={isSelected ? '' : undefined}
-          sx={{ '--level': `${level - 1}`, ...styles.button }}
+          tabIndex={!isSelectable || !isSelected ? -1 : 0}
+          data-selected={isSelectable && isSelected ? '' : undefined}
+          className={`${showAncestorConnectors ? 'show-ancestor-connectors' : ''}`}
+          sx={{
+            '--level': `${level - 1}`,
+            '--connector-color': 'var(--chakra-colors-border-regular)',
+            cursor: isEmptyBranch ? 'default' : 'pointer',
+            ...styles.button,
+          }}
           onClick={onClick}
         >
           <Box sx={{ ...styles.buttonContent }}>
-            {isBranch && <Icon size="16" name={isExpanded ? 'ChevronDown' : 'ChevronRight'} sx={styles.icon} />}
+            {isBranch && (
+              <Box sx={styles.iconWrapper} className={showOwnConnector ? 'show-connector' : ''}>
+                {isFilesVariant && isEmptyBranch ? (
+                  <Tooltip
+                    label={branchIconTooltip?.label || 'Empty branch'}
+                    placement={branchIconTooltip?.placement || 'top'}
+                  >
+                    <Icon size="16" name={primaryIconName} sx={styles.icon} />
+                  </Tooltip>
+                ) : (
+                  <Icon size="16" name={primaryIconName} sx={styles.icon} />
+                )}
+              </Box>
+            )}
             <Box sx={styles.borderBox}>
-              {iconName && (
+              {showIcon && (
                 <Icon
                   size="16"
                   name={iconName}
-                  sx={{ ...styles.icon, ...{ color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary') } }}
+                  sx={{
+                    ...styles.icon,
+                    color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary'),
+                  }}
                 />
               )}
+
+              {showBadge && (
+                <Tooltip shouldWrapChildren label={badgeTooltip?.label} placement={badgeTooltip?.placement || 'top'}>
+                  <Badge variant={badgeVariant} colorScheme={badgeColorScheme} size="xxs" sx={styles.leafBadge}>
+                    {badgeLabel}
+                  </Badge>
+                </Tooltip>
+              )}
+
               <Box sx={styles.textBlock}>
                 <Text fontWeight={isExpanded ? 'semibold' : 'normal'} overflowWrap="break-word" wordBreak="break-word">
                   {title}
@@ -83,25 +148,60 @@ const TreeViewNodeContent = memo(
                   </Text>
                 )}
               </Box>
-              {(label || labelIconName) && (
+
+              {(hasLabelContent || hasHoverActions) && (
                 <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
-                  {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
-                  {label && (
-                    <Text textStyle="body/md/regular" textAlign="right">
-                      {label}
-                    </Text>
+                  {hasHoverActions && (
+                    <Box sx={styles.hoverActionsWrapper} className="hover-actions">
+                      {hoverActions.map((action, index) => (
+                        <ControlButton
+                          /* eslint-disable-next-line react/no-array-index-key */
+                          key={index}
+                          aria-label={action.label}
+                          iconName={action.iconName}
+                          isDanger={action.isDanger}
+                          onClick={(e: MouseEvent) => handleActionClick(e, action)}
+                          size="xs"
+                        />
+                      ))}
+                    </Box>
+                  )}
+                  {hasLabelContent && (
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      gap="8"
+                      pt="8px"
+                      className={hasHoverActions ? 'hide-on-hover' : undefined}
+                    >
+                      {hasWarning && <Icon name="WarningYellow" size="16" />}
+                      {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
+                      {label && (
+                        <Text textStyle="body/md/regular" textAlign="right">
+                          {label}
+                        </Text>
+                      )}
+                    </Box>
                   )}
                 </Box>
               )}
             </Box>
-            {isSelected && <Box sx={styles.selectionIndicator} />}
+            {!isFilesVariant && isSelected && <Box sx={styles.selectionIndicator} />}
           </Box>
         </Box>
         {isBranch && children && (
           <Collapse in={isExpanded} unmountOnExit>
-            <TreeViewGroup role="group" level={level + 1} indexPath={indexPath} titlePath={titlePath}>
-              {children}
-            </TreeViewGroup>
+            <Box
+              className={showOwnConnector ? 'show-connector' : undefined}
+              sx={{
+                '--level': `${level - 1}`,
+                ...styles.collapseContent,
+              }}
+            >
+              <TreeViewGroup role="group" level={level + 1} indexPath={indexPath} titlePath={titlePath}>
+                {children}
+              </TreeViewGroup>
+            </Box>
           </Collapse>
         )}
       </Box>
@@ -109,19 +209,24 @@ const TreeViewNodeContent = memo(
   },
 );
 
-export type TreeViewNodeProps = PropsWithChildren<Omit<NodeData, 'children'> & NodePath>;
-
 const TreeViewNode = ({
   // NodeData
   id,
   type,
   title,
   description,
+  hasWarning,
   iconName,
   iconColor,
+  badgeLabel,
+  badgeVariant,
+  badgeColorScheme,
+  badgeTooltip,
   label,
   labelIconName,
   labelIconColor,
+  hoverActions,
+  branchIconTooltip,
   onClick,
   // NodePath
   level,
@@ -133,12 +238,14 @@ const TreeViewNode = ({
   const { selectedId, disabledIds, expandedIds, onSelectionChange, onExpandedChange } = useTreeViewContext();
 
   const isBranch = type === 'branch';
+  const hasChildren = Boolean(children);
+  const isSelectable = !(isBranch && !hasChildren);
   const isDisabled = useMemo(() => disabledIds.has(id), [id, disabledIds]);
   const isExpanded = useMemo(() => (isBranch ? expandedIds.has(id) : undefined), [id, isBranch, expandedIds]);
-  const isSelected = useMemo(() => id === selectedId, [id, selectedId]);
+  const isSelected = useMemo(() => (isSelectable ? id === selectedId : false), [id, selectedId, isSelectable]);
 
   const handleClick = useCallback(() => {
-    if (isDisabled) {
+    if (isDisabled || !isSelectable) {
       return;
     }
 
@@ -158,7 +265,7 @@ const TreeViewNode = ({
       });
     }
 
-    if (isBranch) {
+    if (isBranch && hasChildren) {
       onExpandedChange({
         node: {
           id,
@@ -198,11 +305,18 @@ const TreeViewNode = ({
       type={type}
       title={title}
       description={description}
+      hasWarning={hasWarning}
       iconName={iconName}
       iconColor={iconColor}
+      badgeLabel={badgeLabel}
+      badgeVariant={badgeVariant}
+      badgeColorScheme={badgeColorScheme}
+      badgeTooltip={badgeTooltip}
       label={label}
       labelIconName={labelIconName}
       labelIconColor={labelIconColor}
+      hoverActions={hoverActions}
+      branchIconTooltip={branchIconTooltip}
       level={level}
       indexPath={indexPath}
       titlePath={titlePath}