feat(react-headless-components-preview): add headless Table and DataGrid component families

change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: export useTableContextValues_unstable and useTableCellLayoutContextValues_unstable",
+  "packageName": "@fluentui/react-table",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/package.json

@@ -47,6 +47,7 @@
     "@fluentui/react-spinbutton": "^9.6.0",
     "@fluentui/react-spinner": "^9.8.0",
     "@fluentui/react-switch": "^9.7.0",
+    "@fluentui/react-table": "^9.19.14",
     "@fluentui/react-tabs": "^9.11.2",
     "@fluentui/react-tags": "^9.7.19",
     "@fluentui/react-textarea": "^9.7.0",

packages/react-components/react-headless-components-preview/library/src/DataGrid.ts

@@ -0,0 +1,35 @@
+export { DataGrid, renderDataGrid, useDataGrid, useDataGridContextValues } from './components/DataGrid';
+export type {
+  DataGridSlots,
+  DataGridProps,
+  DataGridState,
+  DataGridContextValues,
+  DataGridFocusMode,
+} from './components/DataGrid';
+
+export { DataGridBody, renderDataGridBody, useDataGridBody } from './components/DataGrid';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './components/DataGrid';
+
+export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './components/DataGrid';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './components/DataGrid';
+
+export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './components/DataGrid';
+export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './components/DataGrid';
+
+export { DataGridRow, renderDataGridRow, useDataGridRow } from './components/DataGrid';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './components/DataGrid';
+
+export { DataGridCell, renderDataGridCell, useDataGridCell } from './components/DataGrid';
+export type {
+  DataGridCellSlots,
+  DataGridCellProps,
+  DataGridCellState,
+  DataGridCellFocusMode,
+} from './components/DataGrid';
+
+export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './components/DataGrid';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './components/DataGrid';

packages/react-components/react-headless-components-preview/library/src/Table.ts

@@ -0,0 +1,39 @@
+export { Table, renderTable, useTable, useTableContextValues } from './components/Table';
+export type { TableSlots, TableProps, TableState, TableContextValues, SortDirection } from './components/Table';
+
+export { TableBody, renderTableBody, useTableBody } from './components/Table';
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './components/Table';
+
+export { TableHeader, renderTableHeader, useTableHeader } from './components/Table';
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './components/Table';
+
+export { TableHeaderCell, renderTableHeaderCell, useTableHeaderCell } from './components/Table';
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './components/Table';
+
+export { TableRow, renderTableRow, useTableRow } from './components/Table';
+export type { TableRowSlots, TableRowProps, TableRowState } from './components/Table';
+
+export { TableCell, renderTableCell, useTableCell } from './components/Table';
+export type { TableCellSlots, TableCellProps, TableCellState } from './components/Table';
+
+export { TableSelectionCell, renderTableSelectionCell, useTableSelectionCell } from './components/Table';
+export type { TableSelectionCellSlots, TableSelectionCellProps, TableSelectionCellState } from './components/Table';
+
+export { TableCellActions, renderTableCellActions, useTableCellActions } from './components/Table';
+export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './components/Table';
+
+export {
+  TableCellLayout,
+  renderTableCellLayout,
+  useTableCellLayout,
+  useTableCellLayoutContextValues,
+} from './components/Table';
+export type {
+  TableCellLayoutSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+} from './components/Table';
+
+export { TableResizeHandle, renderTableResizeHandle, useTableResizeHandle } from './components/Table';
+export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './components/Table';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { DataGrid } from './DataGrid';
+import { createTableColumn } from '@fluentui/react-table';
+
+const columns = [createTableColumn({ columnId: 'name' })];
+const items = [{ name: 'Alice' }];
+
+describe('DataGrid', () => {
+  isConformant({
+    Component: DataGrid,
+    displayName: 'DataGrid',
+    requiredProps: { columns, items },
+  });
+
+  it('renders with role="grid" by default', () => {
+    const { getByRole } = render(<DataGrid columns={columns} items={items} />);
+    expect(getByRole('grid')).toBeInTheDocument();
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridProps } from './DataGrid.types';
+import { useDataGrid, useDataGridContextValues } from './useDataGrid';
+import { renderDataGrid } from './renderDataGrid';
+
+export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {
+  const state = useDataGrid(props, ref);
+  const contextValues = useDataGridContextValues(state);
+  return renderDataGrid(state, contextValues);
+});
+DataGrid.displayName = 'DataGrid';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts

@@ -0,0 +1,13 @@
+import type {
+  DataGridSlots as DataGridBaseSlots,
+  DataGridProps as DataGridBaseProps,
+  DataGridState as DataGridBaseState,
+  DataGridContextValues as DataGridBaseContextValues,
+  DataGridFocusMode,
+} from '@fluentui/react-table';
+
+export type DataGridSlots = DataGridBaseSlots;
+export type DataGridProps = DataGridBaseProps;
+export type DataGridState = DataGridBaseState;
+export type DataGridContextValues = DataGridBaseContextValues;
+export type { DataGridFocusMode };

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridBodyProps } from './DataGridBody.types';
+import { useDataGridBody } from './useDataGridBody';
+import { renderDataGridBody } from './renderDataGridBody';
+
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+  return renderDataGridBody(useDataGridBody(props, ref));
+});
+DataGridBody.displayName = 'DataGridBody';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts

@@ -0,0 +1,11 @@
+import type {
+  DataGridBodySlots as DataGridBodyBaseSlots,
+  DataGridBodyProps as DataGridBodyBaseProps,
+  DataGridBodyState as DataGridBodyBaseState,
+  RowRenderFunction,
+} from '@fluentui/react-table';
+
+export type DataGridBodySlots = DataGridBodyBaseSlots;
+export type DataGridBodyProps = DataGridBodyBaseProps;
+export type DataGridBodyState = DataGridBodyBaseState;
+export type { RowRenderFunction };

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts

@@ -0,0 +1,4 @@
+export { DataGridBody } from './DataGridBody';
+export { useDataGridBody } from './useDataGridBody';
+export { renderDataGridBody } from './renderDataGridBody';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGridBody.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts

@@ -0,0 +1,2 @@
+import { renderDataGridBody_unstable } from '@fluentui/react-table';
+export const renderDataGridBody = renderDataGridBody_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridBody_unstable } from '@fluentui/react-table';
+export const useDataGridBody = useDataGridBody_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridCellProps } from './DataGridCell.types';
+import { useDataGridCell } from './useDataGridCell';
+import { renderDataGridCell } from './renderDataGridCell';
+
+export const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridCell(useDataGridCell(props, ref));
+});
+DataGridCell.displayName = 'DataGridCell';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts

@@ -0,0 +1,11 @@
+import type {
+  DataGridCellSlots as DataGridCellBaseSlots,
+  DataGridCellProps as DataGridCellBaseProps,
+  DataGridCellState as DataGridCellBaseState,
+  DataGridCellFocusMode,
+} from '@fluentui/react-table';
+
+export type DataGridCellSlots = DataGridCellBaseSlots;
+export type DataGridCellProps = DataGridCellBaseProps;
+export type DataGridCellState = DataGridCellBaseState;
+export type { DataGridCellFocusMode };

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts

@@ -0,0 +1,9 @@
+export { DataGridCell } from './DataGridCell';
+export { useDataGridCell } from './useDataGridCell';
+export { renderDataGridCell } from './renderDataGridCell';
+export type {
+  DataGridCellSlots,
+  DataGridCellProps,
+  DataGridCellState,
+  DataGridCellFocusMode,
+} from './DataGridCell.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts

@@ -0,0 +1,2 @@
+import { renderDataGridCell_unstable } from '@fluentui/react-table';
+export const renderDataGridCell = renderDataGridCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridCell_unstable } from '@fluentui/react-table';
+export const useDataGridCell = useDataGridCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridHeaderProps } from './DataGridHeader.types';
+import { useDataGridHeader } from './useDataGridHeader';
+import { renderDataGridHeader } from './renderDataGridHeader';
+
+export const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> = React.forwardRef((props, ref) => {
+  return renderDataGridHeader(useDataGridHeader(props, ref));
+});
+DataGridHeader.displayName = 'DataGridHeader';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts

@@ -0,0 +1,9 @@
+import type {
+  DataGridHeaderSlots as DataGridHeaderBaseSlots,
+  DataGridHeaderProps as DataGridHeaderBaseProps,
+  DataGridHeaderState as DataGridHeaderBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridHeaderSlots = DataGridHeaderBaseSlots;
+export type DataGridHeaderProps = DataGridHeaderBaseProps;
+export type DataGridHeaderState = DataGridHeaderBaseState;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts

@@ -0,0 +1,4 @@
+export { DataGridHeader } from './DataGridHeader';
+export { useDataGridHeader } from './useDataGridHeader';
+export { renderDataGridHeader } from './renderDataGridHeader';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts

@@ -0,0 +1,2 @@
+import { renderDataGridHeader_unstable } from '@fluentui/react-table';
+export const renderDataGridHeader = renderDataGridHeader_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridHeader_unstable } from '@fluentui/react-table';
+export const useDataGridHeader = useDataGridHeader_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
+import { useDataGridHeaderCell } from './useDataGridHeaderCell';
+import { renderDataGridHeaderCell } from './renderDataGridHeaderCell';
+
+export const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridHeaderCell(useDataGridHeaderCell(props, ref));
+});
+DataGridHeaderCell.displayName = 'DataGridHeaderCell';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts

@@ -0,0 +1,9 @@
+import type {
+  DataGridHeaderCellSlots as DataGridHeaderCellBaseSlots,
+  DataGridHeaderCellProps as DataGridHeaderCellBaseProps,
+  DataGridHeaderCellState as DataGridHeaderCellBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridHeaderCellSlots = DataGridHeaderCellBaseSlots;
+export type DataGridHeaderCellProps = DataGridHeaderCellBaseProps;
+export type DataGridHeaderCellState = DataGridHeaderCellBaseState;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts

@@ -0,0 +1,8 @@
+export { DataGridHeaderCell } from './DataGridHeaderCell';
+export { useDataGridHeaderCell } from './useDataGridHeaderCell';
+export { renderDataGridHeaderCell } from './renderDataGridHeaderCell';
+export type {
+  DataGridHeaderCellSlots,
+  DataGridHeaderCellProps,
+  DataGridHeaderCellState,
+} from './DataGridHeaderCell.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts

@@ -0,0 +1,2 @@
+import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table';
+export const renderDataGridHeaderCell = renderDataGridHeaderCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridHeaderCell_unstable } from '@fluentui/react-table';
+export const useDataGridHeaderCell = useDataGridHeaderCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridRowProps } from './DataGridRow.types';
+import { useDataGridRow } from './useDataGridRow';
+import { renderDataGridRow } from './renderDataGridRow';
+
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {
+  return renderDataGridRow(useDataGridRow(props, ref));
+});
+DataGridRow.displayName = 'DataGridRow';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts

@@ -0,0 +1,11 @@
+import type {
+  DataGridRowSlots as DataGridRowBaseSlots,
+  DataGridRowProps as DataGridRowBaseProps,
+  DataGridRowState as DataGridRowBaseState,
+  CellRenderFunction,
+} from '@fluentui/react-table';
+
+export type DataGridRowSlots = DataGridRowBaseSlots;
+export type DataGridRowProps = DataGridRowBaseProps;
+export type DataGridRowState = DataGridRowBaseState;
+export type { CellRenderFunction };

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts

@@ -0,0 +1,4 @@
+export { DataGridRow } from './DataGridRow';
+export { useDataGridRow } from './useDataGridRow';
+export { renderDataGridRow } from './renderDataGridRow';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGridRow.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts

@@ -0,0 +1,2 @@
+import { renderDataGridRow_unstable } from '@fluentui/react-table';
+export const renderDataGridRow = renderDataGridRow_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridRow_unstable } from '@fluentui/react-table';
+export const useDataGridRow = useDataGridRow_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';
+import { useDataGridSelectionCell } from './useDataGridSelectionCell';
+import { renderDataGridSelectionCell } from './renderDataGridSelectionCell';
+
+export const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridSelectionCell(useDataGridSelectionCell(props, ref));
+});
+DataGridSelectionCell.displayName = 'DataGridSelectionCell';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts

@@ -0,0 +1,9 @@
+import type {
+  DataGridSelectionCellSlots as DataGridSelectionCellBaseSlots,
+  DataGridSelectionCellProps as DataGridSelectionCellBaseProps,
+  DataGridSelectionCellState as DataGridSelectionCellBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridSelectionCellSlots = DataGridSelectionCellBaseSlots;
+export type DataGridSelectionCellProps = DataGridSelectionCellBaseProps;
+export type DataGridSelectionCellState = DataGridSelectionCellBaseState;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts

@@ -0,0 +1,8 @@
+export { DataGridSelectionCell } from './DataGridSelectionCell';
+export { useDataGridSelectionCell } from './useDataGridSelectionCell';
+export { renderDataGridSelectionCell } from './renderDataGridSelectionCell';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './DataGridSelectionCell.types';

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts

@@ -0,0 +1,2 @@
+import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table';
+export const renderDataGridSelectionCell = renderDataGridSelectionCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts

@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridSelectionCell_unstable } from '@fluentui/react-table';
+export const useDataGridSelectionCell = useDataGridSelectionCell_unstable;

packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts

@@ -0,0 +1,32 @@
+export { DataGrid } from './DataGrid';
+export { renderDataGrid } from './renderDataGrid';
+export { useDataGrid, useDataGridContextValues } from './useDataGrid';
+export type {
+  DataGridSlots,
+  DataGridProps,
+  DataGridState,
+  DataGridContextValues,
+  DataGridFocusMode,
+} from './DataGrid.types';
+
+export { DataGridBody, renderDataGridBody, useDataGridBody } from './DataGridBody';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGridBody';
+
+export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './DataGridHeader';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader';
+
+export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './DataGridHeaderCell';
+export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell';
+
+export { DataGridRow, renderDataGridRow, useDataGridRow } from './DataGridRow';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGridRow';
+
+export { DataGridCell, renderDataGridCell, useDataGridCell } from './DataGridCell';
+export type { DataGridCellSlots, DataGridCellProps, DataGridCellState, DataGridCellFocusMode } from './DataGridCell';
+
+export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './DataGridSelectionCell';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './DataGridSelectionCell';