@bitrise/bitkit 13.262.0 → 13.264.0

package/package.json

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

package/src/Components/Dialog/Dialog.context.tsx

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { DialogProps } from './DialogProps';
+
+export type DialogContextValueType = {
+  scrollBehavior: DialogProps['scrollBehavior'];
+};
+
+const DialogContext = createContext<DialogContextValueType>({ scrollBehavior: 'outside' });
+
+export const DialogContextProvider = ({ children, value }: { children: ReactNode; value: DialogContextValueType }) => {
+  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
+};
+
+export const useDialogContext = () => {
+  const context = useContext(DialogContext);
+
+  if (!context) {
+    throw new Error('DialogContext is not provided');
+  }
+
+  return context;
+};

package/src/Components/Dialog/Dialog.tsx

@@ -1,13 +1,11 @@
 import { useId } from 'react';
 import {
   ComponentWithAs,
-  HTMLChakraProps,
   Modal,
   ModalCloseButton,
   ModalContent,
   ModalHeader,
   ModalOverlay,
-  ModalProps,
   useBreakpointValue,
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
@@ -15,21 +13,8 @@ import { BREAKPOINTS } from '../../types/bitkit';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-
-export interface DialogProps
-  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>,
-    Pick<ModalProps, 'returnFocusOnClose'> {
-  isClosable?: boolean;
-  isOpen: boolean;
-  onClose(): void;
-  onCloseComplete?: () => void;
-  size?: 'small' | 'medium' | 'large' | 'full';
-  scrollBehavior?: 'inside' | 'outside';
-  title: string;
-  trapFocus?: boolean;
-  variant?: 'default' | 'empty';
-  closeNotice?: string;
-}
+import { DialogContextProvider } from './Dialog.context';
+import { DialogProps } from './DialogProps';
 
 const Dialog: ComponentWithAs<'section', DialogProps> = ({
   children,
@@ -57,39 +42,42 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
   );
 
   return (
-    <Modal
-      closeOnEsc={isClosable}
-      closeOnOverlayClick={false}
-      isOpen={isOpen}
-      motionPreset={prefersReducedMotion ? 'none' : 'scale'}
-      onClose={isClosable ? onClose : () => {}}
-      onCloseComplete={onCloseComplete}
-      returnFocusOnClose={returnFocusOnClose}
-      scrollBehavior={scrollBehavior}
-      size={dialogSize}
-      trapFocus={trapFocus}
-    >
-      <ModalOverlay />
-      <ModalContent aria-labelledby={variant !== 'empty' ? headerId : undefined} {...rest}>
-        {variant !== 'empty' && (
-          <>
-            <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} textStyle="comp/dialog/title">
-                {title}
-              </Text>
-            </ModalHeader>
-            {closeNotice ? (
-              <Tooltip label={closeNotice} placement="top">
-                {closeBtn}
-              </Tooltip>
-            ) : (
-              closeBtn
-            )}
-          </>
-        )}
-        {children}
-      </ModalContent>
-    </Modal>
+    <DialogContextProvider value={{ scrollBehavior }}>
+      <Modal
+        closeOnEsc={isClosable}
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        motionPreset={prefersReducedMotion ? 'none' : 'scale'}
+        onClose={isClosable ? onClose : () => {}}
+        onCloseComplete={onCloseComplete}
+        returnFocusOnClose={returnFocusOnClose}
+        scrollBehavior={scrollBehavior}
+        size={dialogSize}
+        trapFocus={trapFocus}
+      >
+        <ModalOverlay />
+
+        <ModalContent aria-labelledby={variant !== 'empty' ? headerId : undefined} {...rest}>
+          {variant !== 'empty' && (
+            <>
+              <ModalHeader marginRight="48">
+                <Text as="h1" id={headerId} textStyle="comp/dialog/title">
+                  {title}
+                </Text>
+              </ModalHeader>
+              {closeNotice ? (
+                <Tooltip label={closeNotice} placement="top">
+                  {closeBtn}
+                </Tooltip>
+              ) : (
+                closeBtn
+              )}
+            </>
+          )}
+          {children}
+        </ModalContent>
+      </Modal>
+    </DialogContextProvider>
   );
 };
 

package/src/Components/Dialog/DialogBody.tsx

@@ -1,9 +1,102 @@
-import { ModalBody, ModalBodyProps } from '@chakra-ui/react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { ModalBody, ModalBodyProps, useModalContext } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Icon from '../Icon/Icon';
+import { useDialogContext } from './Dialog.context';
+
+const ScrollButton = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      as="button"
+      bg="background/primary"
+      borderColor="border/minimal"
+      borderRadius={16}
+      borderWidth={1}
+      boxShadow="large"
+      h={32}
+      w={32}
+    >
+      <Icon color="icon/tertiary" name="ArrowDown" size="16" />
+    </Box>
+  );
+};
 
 export type DialogBodyProps = ModalBodyProps;
 
+const ScrollableDialogBody = (props: DialogBodyProps) => {
+  const { isOpen } = useModalContext();
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
+
+  const updateScrollButtonVisibility = useCallback(() => {
+    const content = contentRef.current;
+
+    if (!isOpen || !content) {
+      setIsScrollButtonVisible(false);
+
+      return;
+    }
+
+    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;
+    setIsScrollButtonVisible(!didScrollToBottom);
+  }, []);
+
+  useEffect(() => {
+    const content = contentRef.current;
+
+    if (!isOpen || !content) {
+      return;
+    }
+
+    updateScrollButtonVisibility();
+
+    content.addEventListener('scroll', updateScrollButtonVisibility);
+    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);
+    resizeObserver.observe(content);
+
+    return () => {
+      content.removeEventListener('scroll', updateScrollButtonVisibility);
+      resizeObserver.unobserve(content);
+      resizeObserver.disconnect();
+    };
+  }, [isOpen]);
+
+  return (
+    <Box display="flex" flexDir="column" minH={0} position="relative">
+      <ModalBody ref={contentRef} {...props} />
+      {isScrollButtonVisible && (
+        <ScrollButton
+          alignSelf="center"
+          bottom={8}
+          flexShrink={0}
+          onClick={() => {
+            if (!contentRef.current) {
+              return;
+            }
+
+            contentRef.current.scrollTo({
+              top: contentRef.current.scrollHeight,
+              behavior: 'smooth',
+            });
+          }}
+          position="absolute"
+        />
+      )}
+    </Box>
+  );
+};
+
 const DialogBody = (props: DialogBodyProps) => {
-  return <ModalBody {...props} />;
+  const { scrollBehavior } = useDialogContext();
+
+  if (scrollBehavior === 'outside') {
+    return <ModalBody {...props} />;
+  }
+
+  return <ScrollableDialogBody {...props} />;
 };
 
 export default DialogBody;

package/src/Components/Dialog/DialogProps.ts

@@ -0,0 +1,16 @@
+import { HTMLChakraProps, ModalProps } from '@chakra-ui/react';
+
+export interface DialogProps
+  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>,
+    Pick<ModalProps, 'returnFocusOnClose'> {
+  isClosable?: boolean;
+  isOpen: boolean;
+  onClose(): void;
+  onCloseComplete?: () => void;
+  size?: 'small' | 'medium' | 'large' | 'full';
+  scrollBehavior?: 'inside' | 'outside';
+  title: string;
+  trapFocus?: boolean;
+  variant?: 'default' | 'empty';
+  closeNotice?: string;
+}

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

@@ -1,35 +1,79 @@
-import { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, PropsWithChildren, useCallback, useContext, useMemo } from 'react';
+import { useControllableState } from '@chakra-ui/react';
+import { NodeCallback, TreeViewAction, TreeViewState } from './TreeView.types';
 
-type TreeViewState = {
-  selectedId?: string;
-  selectNode: (id: string) => void;
-};
-
-const TreeViewContext = createContext<TreeViewState>({
+const TreeViewContext = createContext<TreeViewState & TreeViewAction>({
   selectedId: undefined,
-  selectNode: () => {},
+  expandedIds: new Set<string>(),
+  disabledIds: new Set<string>(),
+  onSelectionChange: () => undefined,
+  onExpandedChange: () => undefined,
 });
 
-type TreeViewContenxtProviderProps = PropsWithChildren<{
-  defaultSelectedId?: string;
-  onNodeSelect?: (id: string) => void;
-}>;
+export type TreeViewContenxtProviderProps = PropsWithChildren<
+  Partial<TreeViewState> &
+    Partial<TreeViewAction> & {
+      defaultSelectedId?: string;
+      defaultExpandedIds?: Set<string>;
+      defaultDisabledIds?: Set<string>;
+    }
+>;
 export const TreeViewContextProvider = ({
+  selectedId: controlledSelectedId,
   defaultSelectedId,
-  onNodeSelect,
+  expandedIds: controlledExpandedIds,
+  defaultExpandedIds = new Set<string>(),
+  disabledIds: controlledDisabledIds,
+  defaultDisabledIds = new Set<string>(),
+  onSelectionChange,
+  onExpandedChange,
   children,
 }: TreeViewContenxtProviderProps) => {
-  const [selectedId, setSelectedId] = useState(defaultSelectedId);
+  const [selectedId, setSelectedId] = useControllableState({
+    value: controlledSelectedId,
+    defaultValue: defaultSelectedId,
+  });
+  const [expandedIds, setExpandedIds] = useControllableState({
+    value: controlledExpandedIds,
+    defaultValue: defaultExpandedIds,
+  });
+  const [disabledIds] = useControllableState({
+    value: controlledDisabledIds,
+    defaultValue: defaultDisabledIds,
+  });
 
-  const selectNode = useCallback(
-    (id: string) => {
-      setSelectedId((prevId) => (prevId === id ? undefined : id));
-      onNodeSelect?.(id);
+  const handleSelect = useCallback<NodeCallback>(
+    ({ node }) => {
+      setSelectedId(node.id);
+      onSelectionChange?.({ node: { ...node, selected: true } });
     },
-    [onNodeSelect],
+    [onSelectionChange],
   );
 
-  const contextValue = useMemo(() => ({ selectedId, selectNode }), [selectedId, selectNode]);
+  const handleExpand = useCallback<NodeCallback>(
+    ({ node }) => {
+      if (node.type === 'leaf') {
+        return;
+      }
+
+      setExpandedIds((prev) => {
+        const newIds = new Set(prev);
+        if (newIds.has(node.id)) {
+          newIds.delete(node.id);
+        } else {
+          newIds.add(node.id);
+        }
+        onExpandedChange?.({ node: { ...node, expanded: newIds.has(node.id) } });
+        return newIds;
+      });
+    },
+    [onExpandedChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({ selectedId, expandedIds, disabledIds, onSelectionChange: handleSelect, onExpandedChange: handleExpand }),
+    [selectedId, expandedIds, disabledIds, handleSelect, handleExpand],
+  );
 
   return <TreeViewContext.Provider value={contextValue}>{children}</TreeViewContext.Provider>;
 };

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

@@ -40,9 +40,10 @@ const baseStyle = definePartsStyle({
   },
   buttonContent: {
     w: '100%',
+    gap: '8',
     display: 'flex',
     alignItems: 'flex-start',
-    gap: '8',
+    textAlign: 'start',
     borderTop: '1px solid',
     borderColor: 'border/minimal',
   },

package/src/Components/TreeView/TreeView.tsx

@@ -1,68 +1,74 @@
 import { PropsWithChildren } from 'react';
-import { TreeViewContextProvider } from './TreeView.context';
+import { TreeViewContenxtProviderProps, TreeViewContextProvider } from './TreeView.context';
 import TreeViewGroup from './TreeViewGroup';
-import TreeViewNode, { TreeViewNodeProps } from './TreeViewNode';
-import { TreeViewData } from './TreeView.types';
+import TreeViewNode from './TreeViewNode';
+import { NodeData } from './TreeView.types';
 
-const TreeViewLeaf = (props: Omit<TreeViewNodeProps, 'children'>) => <TreeViewNode type="leaf" {...props} />;
-const TreeViewBranch = (props: Omit<TreeViewNodeProps, 'type'>) => <TreeViewNode type="branch" {...props} />;
+const TreeViewLeaf = (props: Omit<NodeData, 'type' | 'children'>) => (
+  <TreeViewNode type="leaf" level={-1} indexPath={[]} titlePath={[]} {...props} />
+);
+const TreeViewBranch = (props: PropsWithChildren<Omit<NodeData, 'type' | 'children'>>) => (
+  <TreeViewNode type="branch" level={-1} indexPath={[]} titlePath={[]} {...props} />
+);
 
-const renderTreeNodes = (nodes: TreeViewData, level: number) => {
+const renderTreeNodes = (nodes: NodeData[]) => {
   return nodes.map((node) => {
-    const { id, title, description, iconName, iconColor, suffixText, suffixIconName, suffixIconColor, children, type } =
-      node;
+    const { id, type, title, description, iconName, iconColor, label, labelIconName, labelIconColor, children } = node;
 
-    const nodeType = type || (children && children.length > 0 ? 'branch' : 'leaf');
-    const isBranch = nodeType === 'branch';
-
-    if (isBranch) {
+    if (type === 'branch') {
       return (
-        <TreeViewBranch
+        <TreeViewNode
           key={id}
           id={id}
-          level={level}
+          type="branch"
           title={title}
           description={description}
           iconName={iconName}
           iconColor={iconColor}
-          suffixText={suffixText}
-          suffixIconName={suffixIconName}
-          suffixIconColor={suffixIconColor}
+          label={label}
+          labelIconName={labelIconName}
+          labelIconColor={labelIconColor}
+          // Thes props will be overridden by the TreeViewGroup
+          level={-1}
+          indexPath={[]}
+          titlePath={[]}
         >
-          {children && renderTreeNodes(children, level + 1)}
-        </TreeViewBranch>
+          {children && renderTreeNodes(children)}
+        </TreeViewNode>
       );
     }
 
     return (
-      <TreeViewLeaf
+      <TreeViewNode
         key={id}
         id={id}
-        level={level}
+        type="leaf"
         title={title}
         description={description}
         iconName={iconName}
         iconColor={iconColor}
-        suffixText={suffixText}
-        suffixIconName={suffixIconName}
-        suffixIconColor={suffixIconColor}
+        label={label}
+        labelIconName={labelIconName}
+        labelIconColor={labelIconColor}
+        // Thes props will be overridden by the TreeViewGroup
+        level={-1}
+        indexPath={[]}
+        titlePath={[]}
       />
     );
   });
 };
 
-export type TreeViewProps = {
+export type TreeViewProps = TreeViewContenxtProviderProps & {
   label: string;
-  data?: TreeViewData;
-  defaultSelectedId?: string;
-  onNodeSelect?: (id: string) => void;
+  data?: NodeData[];
 };
 
-const TreeView = ({ children, label, data, defaultSelectedId, onNodeSelect }: PropsWithChildren<TreeViewProps>) => {
+const TreeView = ({ data, label, children, ...rest }: PropsWithChildren<TreeViewProps>) => {
   return (
-    <TreeViewContextProvider defaultSelectedId={defaultSelectedId} onNodeSelect={onNodeSelect}>
-      <TreeViewGroup level={1} label={label} role="tree">
-        {data ? renderTreeNodes(data, 1) : children}
+    <TreeViewContextProvider {...rest}>
+      <TreeViewGroup role="tree" label={label} level={1} indexPath={[]} titlePath={[]}>
+        {data ? renderTreeNodes(data) : children}
       </TreeViewGroup>
     </TreeViewContextProvider>
   );

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

@@ -1,18 +1,44 @@
 import { TypeIconName } from '../Icon/Icon';
 
-export type TreeNodeData = {
+export type NodeType = 'branch' | 'leaf';
+
+export type NodeData = {
   id: string;
-  type?: 'branch' | 'leaf';
+  type: NodeType;
   title: string;
   description?: string;
   iconName?: TypeIconName;
   iconColor?: string;
-  suffixText?: string;
-  suffixIconName?: TypeIconName;
-  suffixIconColor?: string;
-  disabled?: boolean;
+  label?: string;
+  labelIconName?: TypeIconName;
+  labelIconColor?: string;
+  children?: NodeData[];
+};
+
+export type NodePath = {
+  level: number;
+  indexPath: number[];
+  titlePath: string[];
+};
+
+export type NodeState = {
+  id: string;
+  type: NodeType;
+  title: string;
+  disabled: boolean;
+  selected: boolean;
   expanded?: boolean;
-  children?: TreeNodeData[];
 };
 
-export type TreeViewData = TreeNodeData[];
+export type TreeViewState = {
+  selectedId?: string;
+  expandedIds: Set<string>;
+  disabledIds: Set<string>;
+};
+
+export type NodeCallback = ({ node }: { node: NodeState & NodePath }) => void;
+
+export type TreeViewAction = {
+  onSelectionChange: NodeCallback;
+  onExpandedChange: NodeCallback;
+};

package/src/Components/TreeView/TreeViewGroup.tsx

@@ -3,15 +3,23 @@ import Box from '../Box/Box';
 
 type TreeViewGroupProps = PropsWithChildren<{
   level: number;
+  indexPath: number[];
+  titlePath: string[];
   label?: string;
   role?: string;
 }>;
 
-const TreeViewGroup = ({ label, role, level, children }: TreeViewGroupProps) => {
+const TreeViewGroup = ({ label, role, level, indexPath, titlePath, children }: TreeViewGroupProps) => {
   return (
     <Box as="ul" role={role} aria-label={label} listStyleType="none" textStyle="body/md/regular">
-      {Children.map(children, (child) =>
-        isValidElement(child) ? cloneElement(child, { level } as { level: number }) : child,
+      {Children.map(children, (child, childIndex) =>
+        isValidElement(child)
+          ? cloneElement(child, {
+              level,
+              indexPath: [...indexPath, childIndex],
+              titlePath: [...titlePath, child.props.title],
+            } as { level: number; indexPath: number[]; titlePath: string[] })
+          : child,
       )}
     </Box>
   );

package/src/Components/TreeView/TreeViewNode.tsx

@@ -1,4 +1,4 @@
-import { memo, PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import { memo, PropsWithChildren, useCallback, useMemo } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 import Box from '../Box/Box';
@@ -6,42 +6,38 @@ import Text from '../Text/Text';
 import Collapse from '../Collapse/Collapse';
 import TreeViewGroup from './TreeViewGroup';
 import { useTreeViewContext } from './TreeView.context';
-import { TreeNodeData } from './TreeView.types';
+import { NodeData, NodePath } from './TreeView.types';
 
-export type TreeViewNodeProps = PropsWithChildren<
-  Omit<TreeNodeData, 'disabled' | 'expanded' | 'children'> & {
-    level?: number;
-    defaultDisabled?: boolean;
-    defaultExpanded?: boolean;
-  }
->;
-
-type TreeViewNodeContentProps = Omit<TreeViewNodeProps, 'defaultDisabled' | 'defaultExpanded' | 'level'> & {
-  level: number;
-  isBranch?: boolean;
-  isSelected?: boolean;
-  isDisabled?: boolean;
+type TreeViewNodeContentProps = TreeViewNodeProps & {
+  isBranch: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
   isExpanded?: boolean;
   onClick: VoidFunction;
 };
 
 const TreeViewNodeContent = memo(
   ({
+    // NodeData
     id,
-    children,
-    level,
-    iconName,
-    iconColor,
     title,
     description,
-    suffixText,
-    suffixIconName,
-    suffixIconColor,
+    iconName,
+    iconColor,
+    label,
+    labelIconName,
+    labelIconColor,
+    // NodePath
+    level,
+    indexPath,
+    titlePath,
+    // Content props
     isBranch,
+    isSelected,
     isDisabled,
     isExpanded,
-    isSelected,
     onClick,
+    children,
   }: TreeViewNodeContentProps) => {
     const styles = useMultiStyleConfig('TreeView', {});
 
@@ -79,12 +75,12 @@ const TreeViewNodeContent = memo(
                 </Text>
               )}
             </Box>
-            {(suffixText || suffixIconName) && (
+            {(label || labelIconName) && (
               <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
-                {suffixIconName && <Icon name={suffixIconName} size="16" color={suffixIconColor} />}
-                {suffixText && (
+                {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
+                {label && (
                   <Text textStyle="body/md/regular" textAlign="right">
-                    {suffixText}
+                    {label}
                   </Text>
                 )}
               </Box>
@@ -94,7 +90,7 @@ const TreeViewNodeContent = memo(
         </Box>
         {isBranch && children && (
           <Collapse in={isExpanded} unmountOnExit>
-            <TreeViewGroup level={level + 1} role="group">
+            <TreeViewGroup role="group" level={level + 1} indexPath={indexPath} titlePath={titlePath}>
               {children}
             </TreeViewGroup>
           </Collapse>
@@ -104,26 +100,31 @@ const TreeViewNodeContent = memo(
   },
 );
 
+export type TreeViewNodeProps = PropsWithChildren<Omit<NodeData, 'children'> & NodePath>;
+
 const TreeViewNode = ({
+  // NodeData
   id,
   type,
-  level = 1,
-  iconName,
-  iconColor,
   title,
   description,
-  suffixText,
-  suffixIconName,
-  suffixIconColor,
-  defaultDisabled,
-  defaultExpanded,
+  iconName,
+  iconColor,
+  label,
+  labelIconName,
+  labelIconColor,
+  // NodePath
+  level,
+  indexPath,
+  titlePath,
+  // Children
   children,
 }: TreeViewNodeProps) => {
-  const { selectedId, selectNode } = useTreeViewContext();
+  const { selectedId, disabledIds, expandedIds, onSelectionChange, onExpandedChange } = useTreeViewContext();
 
-  const isBranch = (type || (children ? 'branch' : 'leaf')) === 'branch';
-  const [isDisabled] = useState(defaultDisabled || false);
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
+  const isBranch = type === 'branch';
+  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 handleClick = useCallback(() => {
@@ -132,25 +133,65 @@ const TreeViewNode = ({
     }
 
     if (!isSelected) {
-      selectNode(id);
+      onSelectionChange({
+        node: {
+          id,
+          type,
+          title,
+          disabled: isDisabled,
+          selected: true,
+          expanded: isExpanded,
+          level,
+          indexPath,
+          titlePath,
+        },
+      });
     }
 
     if (isBranch) {
-      setIsExpanded((prev) => !prev);
+      onExpandedChange({
+        node: {
+          id,
+          type,
+          title,
+          disabled: isDisabled,
+          selected: true,
+          expanded: !isExpanded,
+          level,
+          indexPath,
+          titlePath,
+        },
+      });
     }
-  }, [id, isDisabled, isSelected, selectNode, isBranch]);
+  }, [
+    id,
+    type,
+    title,
+    isDisabled,
+    isSelected,
+    isBranch,
+    isExpanded,
+    level,
+    indexPath,
+    titlePath,
+    onSelectionChange,
+    onExpandedChange,
+  ]);
 
   return (
     <TreeViewNodeContent
       id={id}
-      level={level}
-      iconName={iconName}
-      iconColor={iconColor}
+      type={type}
       title={title}
       description={description}
-      suffixText={suffixText}
-      suffixIconName={suffixIconName}
-      suffixIconColor={suffixIconColor}
+      iconName={iconName}
+      iconColor={iconColor}
+      label={label}
+      labelIconName={labelIconName}
+      labelIconColor={labelIconColor}
+      level={level}
+      indexPath={indexPath}
+      titlePath={titlePath}
       isBranch={isBranch}
       isDisabled={isDisabled}
       isExpanded={isExpanded}

package/src/index.ts

@@ -95,7 +95,7 @@ export { default as useToast } from './Components/Toast/Toast';
 export type { EmptyStateProps } from './Components/EmptyState/EmptyState';
 export { default as EmptyState } from './Components/EmptyState/EmptyState';
 
-export type { DialogProps } from './Components/Dialog/Dialog';
+export type { DialogProps } from './Components/Dialog/DialogProps';
 export { default as Dialog } from './Components/Dialog/Dialog';
 
 export type { DialogBodyProps } from './Components/Dialog/DialogBody';
@@ -372,6 +372,7 @@ export { default as ToggleButton } from './Components/ToggleButton/ToggleButton'
 
 export type { TreeViewProps } from './Components/TreeView/TreeView';
 export { default as TreeView } from './Components/TreeView/TreeView';
+export * from './Components/TreeView/TreeView.types';
 
 export {
   default as SettingsCard,