feat(@clayui/core): Add initial sketch of components to TreeView

packages/clay-core/package.json

@@ -30,7 +30,9 @@
 		"@clayui/drop-down": "^3.35.3",
 		"@clayui/icon": "^3.32.0",
 		"@clayui/modal": "^3.35.3",
-		"@clayui/provider": "^3.35.3"
+		"@clayui/provider": "^3.35.3",
+		"@clayui/layout": "^3.32.0",
+		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
 		"@clayui/css": "3.x",

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

@@ -0,0 +1,71 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import {TreeViewGroup} from './TreeViewGroup';
+import {TreeViewItem, TreeViewItemStack} from './TreeViewItem';
+import {TreeViewContext} from './context';
+import type {IExpandable, IMultipleSelection} from './useTree';
+
+type ChildrenFunction<T> = (item: T) => React.ReactElement;
+
+interface ITreeViewProps<T>
+	extends React.HTMLAttributes<HTMLUListElement>,
+		IMultipleSelection,
+		IExpandable {
+	children: React.ReactNode | ChildrenFunction<T>;
+	displayType?: 'light' | 'dark';
+	items?: Array<T>;
+	showExpanderOnHover?: boolean;
+}
+
+export function TreeView<T>(
+	props: ITreeViewProps<T>
+): JSX.Element & {
+	Item: typeof TreeViewItem;
+	Group: typeof TreeViewGroup;
+	ItemStack: typeof TreeViewItemStack;
+};
+
+export function TreeView<T>({
+	children,
+	className,
+	displayType = 'light',
+	items,
+	showExpanderOnHover = true,
+	...otherProps
+}: ITreeViewProps<T>) {
+	return (
+		<ul
+			{...otherProps}
+			className={classNames('treeview', className, {
+				[`treeview-${displayType}`]: displayType,
+				'show-component-expander-on-hover': showExpanderOnHover,
+			})}
+			role="tree"
+		>
+			<TreeViewContext.Provider value={{showExpanderOnHover}}>
+				{items
+					? items.map((item, index) => {
+							if (typeof children === 'function') {
+								return React.cloneElement(
+									children(item) as React.ReactElement,
+									{key: index}
+								);
+							}
+
+							return null;
+					  })
+					: children}
+			</TreeViewContext.Provider>
+		</ul>
+	);
+}
+
+TreeView.Item = TreeViewItem;
+TreeView.Group = TreeViewGroup;
+TreeView.ItemStack = TreeViewItemStack;

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

@@ -0,0 +1,42 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+type ChildrenFunction<T> = (item: T) => React.ReactElement;
+
+type TreeViewItemProps<T> = {
+	children: React.ReactNode | ChildrenFunction<T>;
+	items?: Array<T>;
+};
+
+export function TreeViewGroup<T>(
+	props: TreeViewItemProps<T>
+): JSX.Element & {
+	displayName: string;
+};
+
+export function TreeViewGroup<T>({children, items}: TreeViewItemProps<T>) {
+	return (
+		<div className="collapse show">
+			<ul className="treeview-group" role="group">
+				{items
+					? items.map((item, index) => {
+							if (typeof children === 'function') {
+								return React.cloneElement(
+									children(item) as React.ReactElement,
+									{key: index}
+								);
+							}
+
+							return null;
+					  })
+					: children}
+			</ul>
+		</div>
+	);
+}
+
+TreeViewGroup.displayName = 'ClayTreeViewGroup';

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

@@ -0,0 +1,117 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import Button from '@clayui/button';
+import Icon from '@clayui/icon';
+import Layout from '@clayui/layout';
+import React, {useContext} from 'react';
+
+type TreeViewItemProps = {
+	children: React.ReactNode;
+};
+
+const SpacingContext = React.createContext(0);
+
+export function TreeViewItem({children}: TreeViewItemProps) {
+	const spacing = useContext(SpacingContext);
+
+	const [left, right] = React.Children.toArray(children);
+
+	const group =
+		// @ts-ignore
+		right?.type?.displayName === 'ClayTreeViewGroup' ? right : null;
+
+	return (
+		<SpacingContext.Provider value={spacing + 24}>
+			<li className="treeview-item" role="none">
+				<div
+					aria-expanded="true"
+					className="treeview-link"
+					data-toggle="collapse"
+					role="treeitem"
+					style={{paddingLeft: `${spacing}px`}}
+					tabIndex={0}
+				>
+					<span
+						className="c-inner"
+						style={{marginLeft: `-${spacing}px`}}
+						tabIndex={-2}
+					>
+						{typeof left === 'string' ? (
+							<Layout.ContentRow>
+								<Layout.ContentCol expand>
+									<div className="component-text">{left}</div>
+								</Layout.ContentCol>
+							</Layout.ContentRow>
+						) : group ? (
+							left
+						) : (
+							<TreeViewItemStack expandable={false}>
+								{children}
+							</TreeViewItemStack>
+						)}
+					</span>
+				</div>
+				{group}
+			</li>
+		</SpacingContext.Provider>
+	);
+}
+
+type TreeViewItemStackProps = {
+	children: React.ReactNode;
+	expandable?: boolean;
+};
+
+export function TreeViewItemStack({
+	children,
+	expandable = true,
+}: TreeViewItemStackProps) {
+	const childrenArray = React.Children.toArray(children);
+
+	return (
+		<Layout.ContentRow>
+			{expandable && (
+				<Layout.ContentCol>
+					<Button
+						aria-expanded="true"
+						className="component-expander"
+						data-toggle="collapse"
+						displayType={null}
+						monospaced
+					>
+						<span className="c-inner" tabIndex={-2}>
+							<Icon symbol="angle-down" />
+							<Icon
+								className="component-expanded-d-none"
+								symbol="angle-right"
+							/>
+						</span>
+					</Button>
+				</Layout.ContentCol>
+			)}
+
+			{React.Children.map(children, (child, index) => {
+				let content = child;
+
+				if (typeof child === 'string') {
+					content = <div className="component-text">{child}</div>;
+
+					// @ts-ignore
+				} else if (child?.type.displayName === 'ClayIcon') {
+					content = <div className="component-icon">{child}</div>;
+				}
+
+				return (
+					<Layout.ContentCol
+						expand={index === childrenArray.length - 1}
+					>
+						{content}
+					</Layout.ContentCol>
+				);
+			})}
+		</Layout.ContentRow>
+	);
+}

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

@@ -0,0 +1,16 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React, {useContext} from 'react';
+
+export interface ITreeViewContext {
+	showExpanderOnHover?: boolean;
+}
+
+export const TreeViewContext = React.createContext<ITreeViewContext>({});
+
+export function useTreeViewContext(): ITreeViewContext {
+	return useContext(TreeViewContext);
+}

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

@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './TreeView';

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

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export interface IExpandable {
+	/**
+	 * The currently expanded keys in the collection.
+	 */
+	expandedKeys?: Set<string>;
+
+	/**
+	 * Handler that is called when items are expanded or collapsed.
+	 */
+	onExpandedChange?: (keys: Set<string>) => void;
+}
+
+export interface IMultipleSelection {
+	/**
+	 * The currently selected keys in the collection.
+	 */
+	selectedKeys?: Set<string>;
+
+	/**
+	 * Handler that is called when the selection changes.
+	 */
+	onSelectionChange?: (keys: Set<string>) => void;
+}