feat: Initialize DataGrid components (#25442)

* feat: Initialize DataGrid components

Initializes `DataGrid` components as simple recomposition of existing
`Table` primitives

* changefile

change/@fluentui-react-table-ac2472bc-2d1f-4c4d-8800-0224ac8968ca.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat: Initialize DataGrid components",
+ "packageName": "@fluentui/react-table",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}

packages/react-components/react-table/etc/react-table.api.md

@@ -29,6 +29,114 @@ export interface ColumnDefinition<TItem> {
 // @public (undocumented)
 export type ColumnId = string | number;
 
+// @public
+export const DataGrid: ForwardRefComponent<DataGridProps>;
+
+// @public
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+
+// @public (undocumented)
+export const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
+
+// @public
+export type DataGridBodyProps = TableBodyProps;
+
+// @public (undocumented)
+export type DataGridBodySlots = TableBodySlots;
+
+// @public
+export type DataGridBodyState = TableBodyState;
+
+// @public
+export const DataGridCell: ForwardRefComponent<DataGridCellProps>;
+
+// @public (undocumented)
+export const dataGridCellClassNames: SlotClassNames<DataGridCellSlots>;
+
+// @public
+export type DataGridCellProps = TableCellProps;
+
+// @public (undocumented)
+export type DataGridCellSlots = TableCellSlots;
+
+// @public
+export type DataGridCellState = TableCellState;
+
+// @public (undocumented)
+export const dataGridClassNames: SlotClassNames<DataGridSlots>;
+
+// @public (undocumented)
+export type DataGridContextValues = TableContextValues;
+
+// @public
+export const DataGridHeader: ForwardRefComponent<DataGridHeaderProps>;
+
+// @public
+export const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps>;
+
+// @public (undocumented)
+export const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots>;
+
+// @public
+export type DataGridHeaderCellProps = TableHeaderCellProps;
+
+// @public (undocumented)
+export type DataGridHeaderCellSlots = TableHeaderCellSlots;
+
+// @public
+export type DataGridHeaderCellState = TableHeaderCellState;
+
+// @public (undocumented)
+export const dataGridHeaderClassNames: SlotClassNames<DataGridHeaderSlots>;
+
+// @public
+export type DataGridHeaderProps = TableHeaderProps;
+
+// @public (undocumented)
+export type DataGridHeaderSlots = TableHeaderSlots;
+
+// @public
+export type DataGridHeaderState = TableHeaderState;
+
+// @public
+export type DataGridProps = TableProps;
+
+// @public
+export const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+
+// @public (undocumented)
+export const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
+
+// @public
+export type DataGridRowProps = TableRowProps;
+
+// @public (undocumented)
+export type DataGridRowSlots = TableRowSlots;
+
+// @public
+export type DataGridRowState = TableRowState;
+
+// @public
+export const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps>;
+
+// @public (undocumented)
+export const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots>;
+
+// @public
+export type DataGridSelectionCellProps = TableSelectionCellProps;
+
+// @public (undocumented)
+export type DataGridSelectionCellSlots = TableSelectionCellSlots;
+
+// @public
+export type DataGridSelectionCellState = TableSelectionCellState;
+
+// @public (undocumented)
+export type DataGridSlots = TableSlots;
+
+// @public
+export type DataGridState = TableState;
+
 // @public (undocumented)
 export interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
  columns: ColumnDefinition<TItem>[];
@@ -37,6 +145,27 @@ export interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>,
  sort: TableSortState<TItem>;
 }
 
+// @public
+export const renderDataGrid_unstable: (state: DataGridState, contextValues: DataGridContextValues) => JSX.Element;
+
+// @public
+export const renderDataGridBody_unstable: (state: DataGridBodyState) => JSX.Element;
+
+// @public
+export const renderDataGridCell_unstable: (state: DataGridCellState) => JSX.Element;
+
+// @public
+export const renderDataGridHeader_unstable: (state: DataGridHeaderState) => JSX.Element;
+
+// @public
+export const renderDataGridHeaderCell_unstable: (state: DataGridHeaderCellState) => JSX.Element;
+
+// @public
+export const renderDataGridRow_unstable: (state: DataGridRowState) => JSX.Element;
+
+// @public
+export const renderDataGridSelectionCell_unstable: (state: DataGridSelectionCellState) => JSX.Element;
+
 // @public
 export const renderTable_unstable: (state: TableState, contextValues: TableContextValues) => JSX.Element;
 
@@ -310,6 +439,48 @@ export type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>,
 // @public (undocumented)
 export type TableStatePlugin = <TItem>(tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
 
+// @public
+export const useDataGrid_unstable: (props: DataGridProps, ref: React_2.Ref<HTMLElement>) => DataGridState;
+
+// @public
+export const useDataGridBody_unstable: (props: DataGridBodyProps, ref: React_2.Ref<HTMLElement>) => DataGridBodyState;
+
+// @public
+export const useDataGridBodyStyles_unstable: (state: DataGridBodyState) => DataGridBodyState;
+
+// @public
+export const useDataGridCell_unstable: (props: DataGridCellProps, ref: React_2.Ref<HTMLElement>) => DataGridCellState;
+
+// @public
+export const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState;
+
+// @public
+export const useDataGridHeader_unstable: (props: DataGridHeaderProps, ref: React_2.Ref<HTMLElement>) => DataGridHeaderState;
+
+// @public
+export const useDataGridHeaderCell_unstable: (props: DataGridHeaderCellProps, ref: React_2.Ref<HTMLElement>) => DataGridHeaderCellState;
+
+// @public
+export const useDataGridHeaderCellStyles_unstable: (state: DataGridHeaderCellState) => DataGridHeaderCellState;
+
+// @public
+export const useDataGridHeaderStyles_unstable: (state: DataGridHeaderState) => DataGridHeaderState;
+
+// @public
+export const useDataGridRow_unstable: (props: DataGridRowProps, ref: React_2.Ref<HTMLElement>) => DataGridRowState;
+
+// @public
+export const useDataGridRowStyles_unstable: (state: DataGridRowState) => DataGridRowState;
+
+// @public
+export const useDataGridSelectionCell_unstable: (props: DataGridSelectionCellProps, ref: React_2.Ref<HTMLElement>) => DataGridSelectionCellState;
+
+// @public
+export const useDataGridSelectionCellStyles_unstable: (state: DataGridSelectionCellState) => DataGridSelectionCellState;
+
+// @public
+export const useDataGridStyles_unstable: (state: DataGridState) => DataGridState;
+
 // @public (undocumented)
 export function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
 

packages/react-components/react-table/src/DataGrid.ts

@@ -0,0 +1 @@
+export * from './components/DataGrid/index';

packages/react-components/react-table/src/DataGridBody.ts

@@ -0,0 +1 @@
+export * from './components/DataGridBody/index';

packages/react-components/react-table/src/DataGridCell.ts

@@ -0,0 +1 @@
+export * from './components/DataGridCell/index';

packages/react-components/react-table/src/DataGridHeader.ts

@@ -0,0 +1 @@
+export * from './components/DataGridHeader/index';

packages/react-components/react-table/src/DataGridHeaderCell.ts

@@ -0,0 +1 @@
+export * from './components/DataGridHeaderCell/index';

packages/react-components/react-table/src/DataGridRow.ts

@@ -0,0 +1 @@
+export * from './components/DataGridRow/index';

packages/react-components/react-table/src/DataGridSelectionCell.ts

@@ -0,0 +1 @@
+export * from './components/DataGridSelectionCell/index';

packages/react-components/react-table/src/components/DataGrid/DataGrid.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DataGrid } from './DataGrid';
+import { isConformant } from '../../testing/isConformant';
+import { DataGridProps } from './DataGrid.types';
+
+describe('DataGrid', () => {
+ isConformant<DataGridProps>({
+ Component: DataGrid,
+ displayName: 'DataGrid',
+ });
+
+ // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+ it('renders a default state', () => {
+ const result = render(<DataGrid>Default DataGrid</DataGrid>);
+ expect(result.container).toMatchSnapshot();
+ });
+});

packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useDataGrid_unstable } from './useDataGrid';
+import { renderDataGrid_unstable } from './renderDataGrid';
+import { useDataGridStyles_unstable } from './useDataGridStyles';
+import type { DataGridProps } from './DataGrid.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useDataGridContextValues_unstable } from './useDataGridContextValues';
+
+/**
+ * DataGrid component - TODO: add more docs
+ */
+export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {
+ const state = useDataGrid_unstable(props, ref);
+
+ useDataGridStyles_unstable(state);
+ return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state));
+});
+
+DataGrid.displayName = 'DataGrid';

packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts

@@ -0,0 +1,15 @@
+import { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';
+
+export type DataGridSlots = TableSlots;
+
+export type DataGridContextValues = TableContextValues;
+
+/**
+ * DataGrid Props
+ */
+export type DataGridProps = TableProps;
+
+/**
+ * State used in rendering DataGrid
+ */
+export type DataGridState = TableState;

packages/react-components/react-table/src/components/DataGrid/__snapshots__/DataGrid.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGrid renders a default state 1`] = `
+<div>
+ <div
+ class="fui-DataGrid fui-Table"
+ role="table"
+ >
+ Default DataGrid
+ </div>
+</div>
+`;

packages/react-components/react-table/src/components/DataGrid/index.ts

@@ -0,0 +1,5 @@
+export * from './DataGrid';
+export * from './DataGrid.types';
+export * from './renderDataGrid';
+export * from './useDataGrid';
+export * from './useDataGridStyles';

packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx

@@ -0,0 +1,9 @@
+import type { DataGridContextValues, DataGridState } from './DataGrid.types';
+import { renderTable_unstable } from '../Table/renderTable';
+
+/**
+ * Render the final JSX of DataGrid
+ */
+export const renderDataGrid_unstable = (state: DataGridState, contextValues: DataGridContextValues) => {
+ return renderTable_unstable(state, contextValues);
+};

packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { DataGridProps, DataGridState } from './DataGrid.types';
+import { useTable_unstable } from '../Table/useTable';
+
+/**
+ * Create the state required to render DataGrid.
+ *
+ * The returned state can be modified with hooks such as useDataGridStyles_unstable,
+ * before being passed to renderDataGrid_unstable.
+ *
+ * @param props - props from this instance of DataGrid
+ * @param ref - reference to root HTMLElement of DataGrid
+ */
+export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {
+ return useTable_unstable({ ...props, as: 'div' }, ref);
+};

packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts

@@ -0,0 +1,6 @@
+import { useTableContextValues_unstable } from '../Table/useTableContextValues';
+import { DataGridState } from './DataGrid.types';
+
+export function useDataGridContextValues_unstable(state: DataGridState) {
+ return useTableContextValues_unstable(state);
+}

packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts

@@ -0,0 +1,18 @@
+import { mergeClasses } from '@griffel/react';
+import type { DataGridSlots, DataGridState } from './DataGrid.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { useTableStyles_unstable } from '../Table/useTableStyles';
+
+export const dataGridClassNames: SlotClassNames<DataGridSlots> = {
+ root: 'fui-DataGrid',
+};
+
+/**
+ * Apply styling to the DataGrid slots based on the state
+ */
+export const useDataGridStyles_unstable = (state: DataGridState): DataGridState => {
+ useTableStyles_unstable(state);
+ state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);
+
+ return state;
+};

packages/react-components/react-table/src/components/DataGridBody/DataGridBody.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DataGridBody } from './DataGridBody';
+import { isConformant } from '../../testing/isConformant';
+import { DataGridBodyProps } from './DataGridBody.types';
+
+describe('DataGridBody', () => {
+ isConformant<DataGridBodyProps>({
+ Component: DataGridBody,
+ displayName: 'DataGridBody',
+ });
+
+ // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+ it('renders a default state', () => {
+ const result = render(<DataGridBody>Default DataGridBody</DataGridBody>);
+ expect(result.container).toMatchSnapshot();
+ });
+});

packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useDataGridBody_unstable } from './useDataGridBody';
+import { renderDataGridBody_unstable } from './renderDataGridBody';
+import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';
+import type { DataGridBodyProps } from './DataGridBody.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * DataGridBody component - TODO: add more docs
+ */
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+ const state = useDataGridBody_unstable(props, ref);
+
+ useDataGridBodyStyles_unstable(state);
+ return renderDataGridBody_unstable(state);
+});
+
+DataGridBody.displayName = 'DataGridBody';

packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts

@@ -0,0 +1,13 @@
+import { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';
+
+export type DataGridBodySlots = TableBodySlots;
+
+/**
+ * DataGridBody Props
+ */
+export type DataGridBodyProps = TableBodyProps;
+
+/**
+ * State used in rendering DataGridBody
+ */
+export type DataGridBodyState = TableBodyState;