feat(@clayui/core): adds the implementation of the new data-oriented composition for Table

packages/clay-core/package.json

@@ -33,6 +33,7 @@
 		"@clayui/loading-indicator": "^3.60.0",
 		"@clayui/modal": "^3.104.0",
 		"@clayui/provider": "^3.93.0",
+		"@clayui/table": "^3.56.0",
 		"@clayui/shared": "^3.104.0",
 		"@tanstack/react-virtual": "3.0.0-beta.54",
 		"aria-hidden": "^1.2.2",

packages/clay-core/src/table/Body.tsx

@@ -0,0 +1,47 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+import {ChildrenFunction, Collection} from '../collection';
+import {Scope, ScopeContext} from './ScopeContext';
+
+type Props<T> = {
+	/**
+	 * Children content to render a dynamic or static content.
+	 */
+	children: React.ReactNode | ChildrenFunction<T, unknown>;
+
+	/**
+	 * Property to render content with dynamic data.
+	 */
+	items?: Array<T>;
+} & React.TableHTMLAttributes<HTMLTableSectionElement>;
+
+function BodyInner<T extends Record<string, any>>(
+	{children, items, ...otherProps}: Props<T>,
+	ref: React.Ref<HTMLTableSectionElement>
+) {
+	return (
+		<tbody {...otherProps} ref={ref}>
+			<ScopeContext.Provider value={Scope.Body}>
+				<Collection items={items} passthroughKey={false}>
+					{children}
+				</Collection>
+			</ScopeContext.Provider>
+		</tbody>
+	);
+}
+
+type ForwardRef = {
+	displayName: string;
+	<T>(
+		props: Props<T> & {ref?: React.Ref<HTMLTableSectionElement>}
+	): JSX.Element;
+};
+
+export const Body = React.forwardRef(BodyInner) as ForwardRef;
+
+Body.displayName = 'TableBody';

packages/clay-core/src/table/Column.tsx

@@ -0,0 +1,93 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import {Scope, useScope} from './ScopeContext';
+
+type Props = {
+	/**
+	 * Aligns the text inside the Cell.
+	 */
+	align?: 'center' | 'left' | 'right';
+
+	/**
+	 * Children content to render content.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Sometimes we are unable to remove specific table columns from the DOM
+	 * and need to hide it using CSS. This property can be added to the "new"
+	 * first or last cell to maintain table styles on the left and right side.
+	 */
+	delimiter?: 'start' | 'end';
+
+	/**
+	 * Fills out the remaining space inside a Cell.
+	 */
+	expanded?: boolean;
+
+	/**
+	 * Aligns horizontally contents inside the Cell.
+	 */
+	textAlign?: 'center' | 'end' | 'start';
+
+	/**
+	 * Truncates the text inside a Cell.
+	 */
+	truncate?: boolean;
+
+	/*
+	 * Break the text into lines when necessary.
+	 */
+	wrap?: boolean;
+} & React.ThHTMLAttributes<HTMLTableCellElement> &
+	React.TdHTMLAttributes<HTMLTableCellElement>;
+
+export const Column = React.forwardRef<HTMLTableCellElement, Props>(
+	function ColumnInner(
+		{
+			align,
+			children,
+			className,
+			delimiter,
+			expanded,
+			textAlign,
+			truncate,
+			wrap = true,
+			...otherProps
+		},
+		ref
+	) {
+		const scope = useScope();
+		const As = scope === Scope.Head ? 'th' : 'td';
+
+		return (
+			<As
+				{...otherProps}
+				className={classNames(className, {
+					'table-cell-expand': truncate || expanded,
+					[`table-cell-${delimiter}`]: delimiter,
+					[`table-column-text-${textAlign}`]: textAlign,
+					[`text-${align}`]: align,
+					'table-cell-ws-nowrap': !wrap,
+				})}
+				ref={ref}
+			>
+				{truncate ? (
+					<span className="text-truncate-inline">
+						<span className="text-truncate">{children}</span>
+					</span>
+				) : (
+					children
+				)}
+			</As>
+		);
+	}
+);
+
+Column.displayName = 'Item';

packages/clay-core/src/table/Head.tsx

@@ -0,0 +1,49 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+import {ChildrenFunction, Collection} from '../collection';
+import {Scope, ScopeContext} from './ScopeContext';
+
+type Props<T> = {
+	/**
+	 * Children content to render a dynamic or static content.
+	 */
+	children: React.ReactNode | ChildrenFunction<T, unknown>;
+
+	/**
+	 * Property to render content with dynamic data.
+	 */
+	items?: Array<T>;
+} & React.TableHTMLAttributes<HTMLTableSectionElement>;
+
+function HeadInner<T extends Record<string, any>>(
+	{children, items, ...otherProps}: Props<T>,
+	ref: React.Ref<HTMLTableSectionElement>
+) {
+	return (
+		<thead {...otherProps} ref={ref}>
+			<ScopeContext.Provider value={Scope.Head}>
+				<tr>
+					<Collection items={items} passthroughKey={false}>
+						{children}
+					</Collection>
+				</tr>
+			</ScopeContext.Provider>
+		</thead>
+	);
+}
+
+type ForwardRef = {
+	displayName: string;
+	<T>(
+		props: Props<T> & {ref?: React.Ref<HTMLTableSectionElement>}
+	): JSX.Element;
+};
+
+export const Head = React.forwardRef(HeadInner) as ForwardRef;
+
+Head.displayName = 'TableHead';

packages/clay-core/src/table/Row.tsx

@@ -0,0 +1,61 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import {ChildrenFunction, Collection} from '../collection';
+
+type Props<T> = {
+	/**
+	 * Children content to render a dynamic or static content.
+	 */
+	children: React.ReactNode | ChildrenFunction<T, unknown>;
+
+	/**
+	 * This property can be added to the "new" first
+	 * or last ClayTable.Row to maintain table styles on the top and bottom sides.
+	 */
+	delimiter?: 'start' | 'end';
+
+	/**
+	 * Applies a divider style inside the row.
+	 */
+	divider?: boolean;
+
+	/**
+	 * Property to render content with dynamic data.
+	 */
+	items?: Array<T>;
+} & React.HTMLAttributes<HTMLTableRowElement>;
+
+function RowInner<T extends Record<string, any>>(
+	{children, className, delimiter, divider, items, ...otherProps}: Props<T>,
+	ref: React.Ref<HTMLTableRowElement>
+) {
+	return (
+		<tr
+			{...otherProps}
+			className={classNames(className, {
+				'table-divider': divider,
+				[`table-row-${delimiter}`]: delimiter,
+			})}
+			ref={ref}
+		>
+			<Collection items={items} passthroughKey={false}>
+				{children}
+			</Collection>
+		</tr>
+	);
+}
+
+type ForwardRef = {
+	displayName: string;
+	<T>(props: Props<T> & {ref?: React.Ref<HTMLTableRowElement>}): JSX.Element;
+};
+
+export const Row = React.forwardRef(RowInner) as ForwardRef;
+
+Row.displayName = 'TableRow';

packages/clay-core/src/table/ScopeContext.ts

@@ -0,0 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React, {useContext} from 'react';
+
+export enum Scope {
+	Head = 'head',
+	Body = 'body',
+}
+
+export const ScopeContext = React.createContext<Scope>(Scope.Head);
+
+export function useScope() {
+	return useContext(ScopeContext);
+}

packages/clay-core/src/table/Table.tsx

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import RootTable from '@clayui/table';
+
+export const Table = RootTable;

packages/clay-core/src/table/index.ts

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './Body';
+export * from './Column';
+export * from './Head';
+export * from './Row';
+export * from './Table';

packages/clay-core/stories/Table.stories.tsx

@@ -0,0 +1,81 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+import {Body, Column, Head, Row, Table} from '../src/table';
+
+export default {
+	title: 'Design System/Components/Table',
+};
+
+const columns = [
+	{
+		id: '1',
+		name: 'Name',
+	},
+	{
+		id: '2',
+		name: 'Type',
+	},
+];
+
+const rows = [
+	{id: 1, name: 'Games', type: 'File folder'},
+	{id: 2, name: 'Program Files', type: 'File folder'},
+];
+
+export const Dynamic = () => {
+	return (
+		<Table>
+			<Head items={columns}>
+				{(column) => <Column key={column.id}>{column.name}</Column>}
+			</Head>
+
+			<Body items={rows}>
+				{(row) => (
+					<Row>
+						<Column>{row.name}</Column>
+						<Column>{row.type}</Column>
+					</Row>
+				)}
+			</Body>
+		</Table>
+	);
+};
+
+const columns2 = [
+	{
+		id: 'name',
+		name: 'Name',
+	},
+	{
+		id: 'type',
+		name: 'Type',
+	},
+];
+
+const rows2 = [
+	{id: 1, name: 'Games', type: 'File folder'},
+	{id: 2, name: 'Program Files', type: 'File folder'},
+];
+
+export const DynamicCells = () => {
+	return (
+		<Table>
+			<Head items={columns2}>
+				{(column) => <Column key={column.id}>{column.name}</Column>}
+			</Head>
+
+			<Body items={rows2}>
+				{(row) => (
+					<Row items={columns2}>
+						{(column) => <Column>{row[column.id]}</Column>}
+					</Row>
+				)}
+			</Body>
+		</Table>
+	);
+};