feat: add TreeView Component

docs/pages/components/TreeView.mdx

@@ -0,0 +1,155 @@
+---
+title: TreeView
+description: A component that displays a hierarchical tree structure.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/TreeView/TreeView.tsx
+---
+
+import { TreeView } from '@deque/cauldron-react';
+
+```jsx
+import { TreeView, type TreeViewFileType } from '@deque/cauldron-react';
+```
+
+## Examples
+
+### Single Selection
+
+Allows only one tree item to be selected at a time.
+
+```jsx example
+function SingleSelectionTreeView() {
+  const items = [
+    {
+      id: '1',
+      textValue: 'Documents',
+      children: [{ id: '2', textValue: 'Project' }]
+    },
+    {
+      id: '3',
+      textValue: 'Photos',
+      children: [{ id: '4', textValue: 'Image 1' }]
+    }
+  ];
+  return <TreeView selectionMode="single" items={items} />;
+}
+```
+
+### Multiple Selection
+
+Allows multiple tree items to be selected at once.
+
+```jsx example
+function MultipleSelectionTreeView() {
+  const items = [
+    {
+      id: '1',
+      textValue: 'Documents',
+      children: [{ id: '2', textValue: 'Project' }]
+    },
+    {
+      id: '3',
+      textValue: 'Photos',
+      children: [{ id: '4', textValue: 'Image 1' }]
+    }
+  ];
+  return <TreeView selectionMode="multiple" items={items} />;
+}
+```
+
+### Default Expanded
+
+Pass keys into the `defaultExpandedKeys` prop array to expand them by default.
+
+```jsx example
+function DefaultExpandedTreeView() {
+  const items = [
+    {
+      id: '1',
+      textValue: 'Documents',
+      children: [{ id: '2', textValue: 'Project' }]
+    },
+    {
+      id: '3',
+      textValue: 'Photos',
+      children: [{ id: '4', textValue: 'Image 1' }]
+    },
+    {
+      id: '5',
+      textValue: 'More Photos',
+      children: [
+        { id: '6', textValue: 'Another Image 1' },
+        { id: '7', textValue: 'Another Image 2' },
+        {
+          id: '8',
+          textValue: 'Another Image 3',
+          children: [{ id: '9', textValue: 'Another Image 4' }]
+        }
+      ]
+    }
+  ];
+  return <TreeView defaultExpandedKeys={['1', '5', '8']} items={items} />;
+}
+```
+
+### Custom onAction
+
+TreeView with a custom action handler for item selection.
+
+```jsx example
+function ActionTreeView() {
+  const onAction = (key) => {
+    alert(`Selected item: ${key}`);
+  };
+  const items = [
+    {
+      id: '1',
+      textValue: 'Documents',
+      children: [{ id: '2', textValue: 'Project' }]
+    },
+    {
+      id: '3',
+      textValue: 'Photos',
+      children: [{ id: '4', textValue: 'Image 1' }]
+    }
+  ];
+  return <TreeView selectionMode="single" onAction={onAction} items={items} />;
+}
+```
+
+## Props
+
+<ComponentProps
+  props={[
+    {
+      name: 'ariaLabel',
+      type: 'string',
+      required: true,
+      description: 'Accessible label for the tree view component.'
+    },
+    {
+      name: 'items',
+      type: 'TreeViewFileType[]',
+      required: true,
+      description: 'Array of tree items to display.'
+    },
+    {
+      name: 'onAction',
+      type: '() => void',
+      defaultValue: 'undefined',
+      description: 'Callback fired when a tree item is activated.'
+    },
+    {
+      name: 'selectionMode',
+      type: "'none' | 'single' | 'multiple'",
+      defaultValue: 'none',
+      description:
+        'Selection mode: none, single, or multiple selection allowed. Checkboxes will not show if selectioMode is none'
+    },
+    {
+      name: 'defaultExpandedKeys',
+      type: 'string[]',
+      defaultValue: 'undefined',
+      description: 'Keys of tree items that should be expanded by default.'
+    }
+  ]}
+/>

package.json

@@ -114,5 +114,6 @@
     "webpack": "^5.102.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/react/package.json

@@ -27,6 +27,7 @@
     "classnames": "^2.2.6",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
+    "react-aria-components": "^1.13.0",
     "react-id-generator": "^3.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "tslib": "^2.4.0"

packages/react/src/components/Checkbox/index.tsx

@@ -19,6 +19,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   customIcon?: React.ReactNode;
   checkboxRef?: React.ForwardedRef<HTMLInputElement>;
   indeterminate?: boolean;
+  onChangeToggle?: boolean;
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
@@ -31,6 +32,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       checkboxRef,
       className,
       onChange,
+      onChangeToggle = true,
       onFocus,
       onBlur,
       'aria-describedby': ariaDescribedby,
@@ -121,7 +123,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               if (isIndeterminate) {
                 setIsIndeterminate(false);
               }
-              setIsChecked(e.target.checked);
+              if (onChangeToggle) {
+                setIsChecked(e.target.checked);
+              }
               if (onChange) {
                 onChange(e);
               }

packages/react/src/components/TreeView/TreeView.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import TreeView, { TreeViewFileType } from '../../../src/components/TreeView';
+
+const items: TreeViewFileType[] = [
+  {
+    id: '1',
+    textValue: 'TreeView',
+    children: [
+      { id: '2', textValue: 'pizza' },
+      { id: '3', textValue: 'pie' }
+    ]
+  },
+  {
+    id: '4',
+    textValue: 'Another One',
+    children: [
+      { id: '5', textValue: 'foo' },
+      { id: '6', textValue: 'bar' }
+    ]
+  }
+];
+
+test('renders tree items', () => {
+  const { getByText } = render(
+    <TreeView ariaLabel="Test TreeView" items={items} />
+  );
+  expect(getByText('TreeView')).toBeInTheDocument();
+  expect(getByText('Another One')).toBeInTheDocument();
+});
+
+test('selects a tree item on click', () => {
+  const { getByText } = render(
+    <TreeView ariaLabel="Test TreeView" items={items} selectionMode="single" />
+  );
+  const child1 = getByText('TreeView');
+  fireEvent.click(child1);
+  expect(child1.closest('[aria-selected="true"]')).toBeTruthy();
+});
+
+test('selects a checkbox when clicked', () => {
+  const { getAllByLabelText } = render(
+    <TreeView
+      ariaLabel="Test TreeView"
+      items={items}
+      selectionMode="multiple"
+    />
+  );
+  const checkbox = getAllByLabelText('TreeView')[1];
+  fireEvent.click(checkbox);
+  expect(checkbox).toBeChecked();
+});
+
+test('calls onAction when a tree item is activated', () => {
+  const onAction = jest.fn();
+  const { getByText } = render(
+    <TreeView
+      ariaLabel="Test TreeView"
+      items={items}
+      onAction={onAction}
+      selectionMode="single"
+    />
+  );
+  fireEvent.click(getByText('TreeView'));
+  expect(onAction).toHaveBeenCalled();
+});
+
+test('only one item can be selected in single selection mode', () => {
+  const { getByText } = render(
+    <TreeView ariaLabel="Test TreeView" items={items} selectionMode="single" />
+  );
+  const item1 = getByText('TreeView');
+  const item2 = getByText('Another One');
+  fireEvent.click(item1);
+  expect(item1.closest('[aria-selected="true"]')).toBeTruthy();
+  fireEvent.click(item2);
+  expect(item2.closest('[aria-selected="true"]')).toBeTruthy();
+  expect(item1.closest('[aria-selected="true"]')).toBeFalsy();
+});
+
+test('multiple items can be selected in multiple selection mode', () => {
+  const { getAllByLabelText } = render(
+    <TreeView
+      ariaLabel="Test TreeView"
+      items={items}
+      selectionMode="multiple"
+    />
+  );
+  const checkbox1 = getAllByLabelText('TreeView')[1];
+  const checkbox2 = getAllByLabelText('Another One')[1];
+  fireEvent.click(checkbox1);
+  fireEvent.click(checkbox2);
+  expect(checkbox1).toBeChecked();
+  expect(checkbox2).toBeChecked();
+});
+
+test('children are rendered when treeview is open', () => {
+  const { getByText, queryByText } = render(
+    <TreeView
+      ariaLabel="Test TreeView"
+      items={items}
+      defaultExpandedKeys={['1']}
+    />
+  );
+  expect(getByText('pizza')).toBeInTheDocument();
+  expect(getByText('pie')).toBeInTheDocument();
+  expect(queryByText('foo')).toBeNull();
+  expect(queryByText('bar')).toBeNull();
+});
+
+test('multiple treeviews can be open at once', () => {
+  const { getByText } = render(
+    <TreeView
+      ariaLabel="Test TreeView"
+      items={items}
+      defaultExpandedKeys={['1', '4']}
+    />
+  );
+  expect(getByText('pizza')).toBeInTheDocument();
+  expect(getByText('pie')).toBeInTheDocument();
+  expect(getByText('foo')).toBeInTheDocument();
+  expect(getByText('bar')).toBeInTheDocument();
+});