feat(@clayui/core): adds multiple selection implementation for Tree View

This implementation is a lightweight and efficient solution for multiple Node selection, it also supports intermediate state and tree selection behaviors if the Node has children.

We maintain a light, flat tree structure and build it along with React's render stream to avoid traversing the tree in a separate stream, so we can have big performance gains on very large trees.

packages/clay-core/src/tree-view/Collection.tsx

@@ -15,7 +15,10 @@ export interface ICollectionProps<T> {
 }
 
 function getKey(index: number, key?: React.Key | null, parentKey?: React.Key) {
-	if (key != null) {
+	if (
+		key != null &&
+		(!String(key).startsWith('.') || String(key).startsWith('.$'))
+	) {
 		return key;
 	}
 
@@ -26,7 +29,7 @@ export function Collection<T extends Record<any, any>>({
 	children,
 	items,
 }: ICollectionProps<T>) {
-	const {parentKey} = useItem();
+	const {key: parentKey} = useItem();
 
 	return (
 		<>
@@ -43,7 +46,7 @@ export function Collection<T extends Record<any, any>>({
 						return (
 							<ItemContextProvider
 								key={key}
-								value={{...item, key, parentKey: key}}
+								value={{...item, key}}
 							>
 								{child}
 							</ItemContextProvider>
@@ -57,10 +60,7 @@ export function Collection<T extends Record<any, any>>({
 						const key = getKey(index, child.key, parentKey);
 
 						return (
-							<ItemContextProvider
-								key={key}
-								value={{key, parentKey: key}}
-							>
+							<ItemContextProvider key={key} value={{key}}>
 								{child}
 							</ItemContextProvider>
 						);

packages/clay-core/src/tree-view/TreeView.tsx

@@ -10,12 +10,11 @@ import {ChildrenFunction, Collection, ICollectionProps} from './Collection';
 import {TreeViewGroup} from './TreeViewGroup';
 import {TreeViewItem, TreeViewItemStack} from './TreeViewItem';
 import {Icons, TreeViewContext} from './context';
-import {IExpandable, IMultipleSelection, useTree} from './useTree';
+import {ITreeProps, useTree} from './useTree';
 
 interface ITreeViewProps<T>
 	extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'>,
-		IMultipleSelection,
-		IExpandable,
+		ITreeProps,
 		ICollectionProps<T> {
 	displayType?: 'light' | 'dark';
 	expanderIcons?: Icons;
@@ -40,6 +39,8 @@ export function TreeView<T>({
 	items,
 	nestedKey,
 	onExpandedChange,
+	onSelectionChange,
+	selectedKeys,
 	showExpanderOnHover = true,
 	...otherProps
 }: ITreeViewProps<T>) {
@@ -55,6 +56,8 @@ export function TreeView<T>({
 				: undefined,
 		expanderIcons,
 		nestedKey,
+		onSelectionChange,
+		selectedKeys,
 		showExpanderOnHover,
 		...state,
 	};

packages/clay-core/src/tree-view/TreeViewGroup.tsx

@@ -29,7 +29,7 @@ export function TreeViewGroup<T extends Record<any, any>>({
 	return (
 		<CSSTransition
 			className={classNames('collapse', {
-				show: expandedKeys!.has(item.key),
+				show: expandedKeys.has(item.key),
 			})}
 			classNames={{
 				enter: 'collapsing',
@@ -39,7 +39,7 @@ export function TreeViewGroup<T extends Record<any, any>>({
 				exitActive: 'collapsing',
 			}}
 			id={item.key}
-			in={expandedKeys!.has(item.key)}
+			in={expandedKeys.has(item.key)}
 			onEnter={(el: HTMLElement) =>
 				el.setAttribute('style', 'height: 0px')
 			}

packages/clay-core/src/tree-view/TreeViewItem.tsx

@@ -44,12 +44,12 @@ export function TreeViewItem({children}: TreeViewItemProps) {
 			<li className="treeview-item" role="none">
 				<div
 					aria-expanded={
-						group ? expandedKeys!.has(item.key) : undefined
+						group ? expandedKeys.has(item.key) : undefined
 					}
 					className={classNames('treeview-link', {
-						collapsed: group && !expandedKeys!.has(item.key),
+						collapsed: group && expandedKeys.has(item.key),
 					})}
-					onClick={() => group && toggle!(item.key)}
+					onClick={() => group && toggle(item.key)}
 					role="treeitem"
 					style={{paddingLeft: `${spacing}px`}}
 					tabIndex={0}
@@ -89,7 +89,12 @@ export function TreeViewItemStack({
 	children,
 	expandable = true,
 }: TreeViewItemStackProps) {
-	const {expandedKeys, expanderIcons, toggle} = useTreeViewContext();
+	const {
+		expandedKeys,
+		expanderIcons,
+		selection,
+		toggle,
+	} = useTreeViewContext();
 
 	const item = useItem();
 
@@ -100,14 +105,14 @@ export function TreeViewItemStack({
 			{expandable && (
 				<Layout.ContentCol>
 					<Button
-						aria-controls={item.key}
-						aria-expanded={expandedKeys!.has(item.key)}
+						aria-controls={`${item.key}`}
+						aria-expanded={expandedKeys.has(item.key)}
 						className={classNames('component-expander', {
-							collapsed: !expandedKeys!.has(item.key),
+							collapsed: expandedKeys.has(item.key),
 						})}
 						displayType={null}
 						monospaced
-						onClick={() => toggle!(item.key)}
+						onClick={() => toggle(item.key)}
 					>
 						<span className="c-inner" tabIndex={-2}>
 							{expanderIcons?.close ? (
@@ -143,6 +148,14 @@ export function TreeViewItemStack({
 					// @ts-ignore
 				} else if (child?.type.displayName === 'ClayIcon') {
 					content = <div className="component-icon">{child}</div>;
+
+					// @ts-ignore
+				} else if (child?.type.displayName === 'ClayCheckbox') {
+					content = React.cloneElement(child as React.ReactElement, {
+						checked: selection.selectedKeys.has(item.key),
+						indeterminate: selection.isIntermediate(item.key),
+						onChange: () => selection.toggleSelection(item.key),
+					});
 				}
 
 				return (

packages/clay-core/src/tree-view/context.ts

@@ -3,23 +3,25 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import React, {Key, useContext} from 'react';
+import React, {useContext} from 'react';
+
+import type {ITreeState} from './useTree';
 
 export type Icons = {
 	open: React.ReactElement;
 	close: React.ReactElement;
 };
 
-export interface ITreeViewContext {
+export interface ITreeViewContext extends ITreeState {
 	childrenRoot?: (item: Object) => React.ReactElement;
-	expandedKeys?: Set<Key>;
 	expanderIcons?: Icons;
 	nestedKey?: string;
 	showExpanderOnHover?: boolean;
-	toggle?: (key: Key) => void;
 }
 
-export const TreeViewContext = React.createContext<ITreeViewContext>({});
+export const TreeViewContext = React.createContext<ITreeViewContext>(
+	{} as ITreeViewContext
+);
 
 export function useTreeViewContext(): ITreeViewContext {
 	return useContext(TreeViewContext);

packages/clay-core/src/tree-view/useItem.tsx

@@ -3,24 +3,38 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import React, {useContext, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 
-type Value = Record<string, any>;
+import {useTreeViewContext} from './context';
+
+type Value = {
+	[propName: string]: any;
+	key: React.Key;
+};
 
 type Props = {
 	children: React.ReactNode;
 	value: Value;
 };
 
-const ItemContext = React.createContext<Value>({});
+const ItemContext = React.createContext<Value>({} as Value);
 
 function getKey(key: React.Key) {
 	return `${key}`.replace('.$', '');
 }
 
-export function ItemContextProvider({children, value = {}}: Props) {
+export function ItemContextProvider({children, value}: Props) {
+	const {selection} = useTreeViewContext();
+	const {key: parentKey} = useItem();
+
 	const keyRef = useRef(getKey(value.key));
 
+	useEffect(() => selection.mount(keyRef.current, parentKey), [
+		selection.mount,
+		keyRef,
+		parentKey,
+	]);
+
 	const props = {
 		...value,
 		key: keyRef.current,