fix: move dropdown icon props to tree

README.md

@@ -128,6 +128,7 @@ The main container component that provides the tree context.
 | `className`       | `string`          | `''`    | Additional CSS classes for the tree container      |
 | `aria-label`      | `string`          | -       | Accessibility label for the tree                   |
 | `aria-labelledby` | `string`          | -       | Reference to an element that labels the tree       |
+| `dropDownIcon`    | `React.ReactNode` | `'▶'`  | Icon for expand/collapse in branch nodes           |
 
 ### TreeItem
 
@@ -143,11 +144,10 @@ Represents a single item in the tree.
 
 Provides the visual layout for a tree item.
 
-| Prop           | Type              | Default | Description                                      |
-| -------------- | ----------------- | ------- | ------------------------------------------------ |
-| `children`     | `React.ReactNode` | -       | **Required** Content to render inside the layout |
-| `className`    | `string`          | `''`    | Additional CSS classes for the layout            |
-| `dropDownIcon` | `React.ReactNode` | `'▶'`  | Icon for expand/collapse in branch nodes         |
+| Prop        | Type              | Default | Description                                      |
+| ----------- | ----------------- | ------- | ------------------------------------------------ |
+| `children`  | `React.ReactNode` | -       | **Required** Content to render inside the layout |
+| `className` | `string`          | `''`    | Additional CSS classes for the layout            |
 
 ### TreeWithJson
 

src/tree/RootTreeContext.tsx

@@ -5,7 +5,9 @@ export interface RootTreeContextValue {
 }
 
 export const RootTreeContext = React.createContext<RootTreeContextValue | null>(
-  null
+  {
+    open: false,
+  }
 );
 
 export const useRootTreeContext = () => {

src/tree/SubTreeContext.tsx

@@ -1,9 +1,19 @@
 import * as React from 'react';
 
-export interface SubTreeContextValue {}
+export interface SubTreeContextValue {
+  dropDownIcon?: React.ReactNode;
+}
 
 export const SubTreeContext = React.createContext<
   SubTreeContextValue | null | undefined
 >(undefined);
 
 SubTreeContext.displayName = 'SubTreeContext';
+
+export const useSubTreeContext = () => {
+  const context = React.useContext(SubTreeContext);
+  if (!context) {
+    throw new Error('useSubTreeContext must be used within a SubTree');
+  }
+  return context;
+};

src/tree/Tree.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {
   args: {
     'aria-label': 'Default',
     children: (
-      <Tree aria-label="Default" open>
+      <Tree aria-label="Default" open dropDownIcon=">">
         <TreeItem itemType="leaf">
           <TreeItemLayout>customer id: 1234567890</TreeItemLayout>
         </TreeItem>

src/tree/Tree.tsx

@@ -8,6 +8,7 @@ export interface TreeProps {
   'aria-labelledby'?: string;
   children: React.ReactNode;
   open?: boolean;
+  dropDownIcon?: React.ReactNode;
   className?: string;
 }
 
@@ -18,10 +19,16 @@ export const Tree = (props: TreeProps) => {
   return isRoot ? <RootTree {...props} /> : <SubTree {...props} />;
 };
 
-const RootTree = ({ children, open, className = '', ...props }: TreeProps) => {
+const RootTree = ({
+  children,
+  open,
+  dropDownIcon = '▶',
+  className = '',
+  ...props
+}: TreeProps) => {
   return (
     <RootTreeContext.Provider value={{ open }}>
-      <SubTreeContext.Provider value={null}>
+      <SubTreeContext.Provider value={{ dropDownIcon }}>
         <div role="tree" className={className} {...props}>
           {children}
         </div>
@@ -30,9 +37,14 @@ const RootTree = ({ children, open, className = '', ...props }: TreeProps) => {
   );
 };
 
-const SubTree = ({ children, className = '', ...props }: TreeProps) => {
+const SubTree = ({
+  children,
+  className = '',
+  dropDownIcon,
+  ...props
+}: TreeProps) => {
   return (
-    <SubTreeContext.Provider value={null}>
+    <SubTreeContext.Provider value={{ dropDownIcon }}>
       <div role="tree" className={className} {...props}>
         {children}
       </div>

src/tree/TreeItemLayout.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { useTreeItemContext } from './TreeItemContext';
 import './TreeItemLayout.css';
+import { useSubTreeContext } from './SubTreeContext';
 
 export interface TreeItemLayoutProps
   extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   className?: string;
-  dropDownIcon?: React.ReactNode;
 }
 
 export const TreeItemLayout = ({
   children,
   className = '',
-  dropDownIcon = '▶',
   ...props
 }: TreeItemLayoutProps) => {
+  const { dropDownIcon } = useSubTreeContext();
   const { itemType, isOpen, onToggle } = useTreeItemContext();
 
   return (