From acce21b88a9bbd59651661d87cc964ce2ff5ff28 Mon Sep 17 00:00:00 2001 From: ling1726 Date: Mon, 31 Oct 2022 16:07:57 +0100 Subject: [PATCH] feat: Initialize DataGrid components (#25442) * feat: Initialize DataGrid components Initializes `DataGrid` components as simple recomposition of existing `Table` primitives * changefile --- ...-ac2472bc-2d1f-4c4d-8800-0224ac8968ca.json | 7 + .../react-table/etc/react-table.api.md | 171 ++++++++++++++++++ .../react-table/src/DataGrid.ts | 1 + .../react-table/src/DataGridBody.ts | 1 + .../react-table/src/DataGridCell.ts | 1 + .../react-table/src/DataGridHeader.ts | 1 + .../react-table/src/DataGridHeaderCell.ts | 1 + .../react-table/src/DataGridRow.ts | 1 + .../react-table/src/DataGridSelectionCell.ts | 1 + .../src/components/DataGrid/DataGrid.test.tsx | 19 ++ .../src/components/DataGrid/DataGrid.tsx | 19 ++ .../src/components/DataGrid/DataGrid.types.ts | 15 ++ .../__snapshots__/DataGrid.test.tsx.snap | 12 ++ .../src/components/DataGrid/index.ts | 5 + .../components/DataGrid/renderDataGrid.tsx | 9 + .../src/components/DataGrid/useDataGrid.ts | 16 ++ .../DataGrid/useDataGridContextValues.ts | 6 + .../components/DataGrid/useDataGridStyles.ts | 18 ++ .../DataGridBody/DataGridBody.test.tsx | 19 ++ .../components/DataGridBody/DataGridBody.tsx | 18 ++ .../DataGridBody/DataGridBody.types.ts | 13 ++ .../__snapshots__/DataGridBody.test.tsx.snap | 12 ++ .../src/components/DataGridBody/index.ts | 5 + .../DataGridBody/renderDataGridBody.tsx | 9 + .../DataGridBody/useDataGridBody.ts | 16 ++ .../DataGridBody/useDataGridBodyStyles.ts | 18 ++ .../DataGridCell/DataGridCell.test.tsx | 19 ++ .../components/DataGridCell/DataGridCell.tsx | 18 ++ .../DataGridCell/DataGridCell.types.ts | 13 ++ .../__snapshots__/DataGridCell.test.tsx.snap | 12 ++ .../src/components/DataGridCell/index.ts | 5 + .../DataGridCell/renderDataGridCell.tsx | 9 + .../DataGridCell/useDataGridCell.ts | 16 ++ .../DataGridCell/useDataGridCellStyles.ts | 18 ++ .../DataGridHeader/DataGridHeader.test.tsx | 19 ++ .../DataGridHeader/DataGridHeader.tsx | 18 ++ .../DataGridHeader/DataGridHeader.types.ts | 13 ++ .../DataGridHeader.test.tsx.snap | 12 ++ .../src/components/DataGridHeader/index.ts | 5 + .../DataGridHeader/renderDataGridHeader.tsx | 9 + .../DataGridHeader/useDataGridHeader.ts | 19 ++ .../DataGridHeader/useDataGridHeaderStyles.ts | 18 ++ .../DataGridHeaderCell.test.tsx | 28 +++ .../DataGridHeaderCell/DataGridHeaderCell.tsx | 18 ++ .../DataGridHeaderCell.types.ts | 17 ++ .../DataGridHeaderCell.test.tsx.snap | 19 ++ .../components/DataGridHeaderCell/index.ts | 5 + .../renderDataGridHeaderCell.tsx | 9 + .../useDataGridHeaderCell.ts | 19 ++ .../useDataGridHeaderCellStyles.ts | 28 +++ .../DataGridRow/DataGridRow.test.tsx | 19 ++ .../components/DataGridRow/DataGridRow.tsx | 18 ++ .../DataGridRow/DataGridRow.types.ts | 13 ++ .../__snapshots__/DataGridRow.test.tsx.snap | 12 ++ .../src/components/DataGridRow/index.ts | 5 + .../DataGridRow/renderDataGridRow.tsx | 9 + .../components/DataGridRow/useDataGridRow.ts | 16 ++ .../DataGridRow/useDataGridRowStyles.ts | 18 ++ .../DataGridSelectionCell.test.tsx | 42 +++++ .../DataGridSelectionCell.tsx | 18 ++ .../DataGridSelectionCell.types.ts | 17 ++ .../DataGridSelectionCell.test.tsx.snap | 39 ++++ .../components/DataGridSelectionCell/index.ts | 5 + .../renderDataGridSelectionCell.tsx | 9 + .../useDataGridSelectionCell.ts | 19 ++ .../useDataGridSelectionCellStyles.ts | 36 ++++ .../react-components/react-table/src/index.ts | 68 +++++++ 67 files changed, 1143 insertions(+) create mode 100644 change/@fluentui-react-table-ac2472bc-2d1f-4c4d-8800-0224ac8968ca.json create mode 100644 packages/react-components/react-table/src/DataGrid.ts create mode 100644 packages/react-components/react-table/src/DataGridBody.ts create mode 100644 packages/react-components/react-table/src/DataGridCell.ts create mode 100644 packages/react-components/react-table/src/DataGridHeader.ts create mode 100644 packages/react-components/react-table/src/DataGridHeaderCell.ts create mode 100644 packages/react-components/react-table/src/DataGridRow.ts create mode 100644 packages/react-components/react-table/src/DataGridSelectionCell.ts create mode 100644 packages/react-components/react-table/src/components/DataGrid/DataGrid.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx create mode 100644 packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGrid/__snapshots__/DataGrid.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGrid/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx create mode 100644 packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts create mode 100644 packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts create mode 100644 packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridBody/DataGridBody.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridBody/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts create mode 100644 packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridCell/DataGridCell.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridCell/DataGridCell.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridCell/__snapshots__/DataGridCell.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridCell/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts create mode 100644 packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/__snapshots__/DataGridHeader.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeader.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/__snapshots__/DataGridHeaderCell.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts create mode 100644 packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridRow/__snapshots__/DataGridRow.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridRow/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts create mode 100644 packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/__snapshots__/DataGridSelectionCell.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts create mode 100644 packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts diff --git a/change/@fluentui-react-table-ac2472bc-2d1f-4c4d-8800-0224ac8968ca.json b/change/@fluentui-react-table-ac2472bc-2d1f-4c4d-8800-0224ac8968ca.json new file mode 100644 index 0000000000000..9851b3d7a7b0f --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 8e4d321296ae5..04ecce72040d8 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -29,6 +29,114 @@ export interface ColumnDefinition { // @public (undocumented) export type ColumnId = string | number; +// @public +export const DataGrid: ForwardRefComponent; + +// @public +export const DataGridBody: ForwardRefComponent; + +// @public (undocumented) +export const dataGridBodyClassNames: SlotClassNames; + +// @public +export type DataGridBodyProps = TableBodyProps; + +// @public (undocumented) +export type DataGridBodySlots = TableBodySlots; + +// @public +export type DataGridBodyState = TableBodyState; + +// @public +export const DataGridCell: ForwardRefComponent; + +// @public (undocumented) +export const dataGridCellClassNames: SlotClassNames; + +// @public +export type DataGridCellProps = TableCellProps; + +// @public (undocumented) +export type DataGridCellSlots = TableCellSlots; + +// @public +export type DataGridCellState = TableCellState; + +// @public (undocumented) +export const dataGridClassNames: SlotClassNames; + +// @public (undocumented) +export type DataGridContextValues = TableContextValues; + +// @public +export const DataGridHeader: ForwardRefComponent; + +// @public +export const DataGridHeaderCell: ForwardRefComponent; + +// @public (undocumented) +export const dataGridHeaderCellClassNames: SlotClassNames; + +// @public +export type DataGridHeaderCellProps = TableHeaderCellProps; + +// @public (undocumented) +export type DataGridHeaderCellSlots = TableHeaderCellSlots; + +// @public +export type DataGridHeaderCellState = TableHeaderCellState; + +// @public (undocumented) +export const dataGridHeaderClassNames: SlotClassNames; + +// @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; + +// @public (undocumented) +export const dataGridRowClassNames: SlotClassNames; + +// @public +export type DataGridRowProps = TableRowProps; + +// @public (undocumented) +export type DataGridRowSlots = TableRowSlots; + +// @public +export type DataGridRowState = TableRowState; + +// @public +export const DataGridSelectionCell: ForwardRefComponent; + +// @public (undocumented) +export const dataGridSelectionCellClassNames: SlotClassNames; + +// @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 extends Pick, 'items' | 'getRowId'> { columns: ColumnDefinition[]; @@ -37,6 +145,27 @@ export interface HeadlessTableState extends Pick, sort: TableSortState; } +// @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 & Pick, // @public (undocumented) export type TableStatePlugin = (tableState: HeadlessTableState) => HeadlessTableState; +// @public +export const useDataGrid_unstable: (props: DataGridProps, ref: React_2.Ref) => DataGridState; + +// @public +export const useDataGridBody_unstable: (props: DataGridBodyProps, ref: React_2.Ref) => DataGridBodyState; + +// @public +export const useDataGridBodyStyles_unstable: (state: DataGridBodyState) => DataGridBodyState; + +// @public +export const useDataGridCell_unstable: (props: DataGridCellProps, ref: React_2.Ref) => DataGridCellState; + +// @public +export const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState; + +// @public +export const useDataGridHeader_unstable: (props: DataGridHeaderProps, ref: React_2.Ref) => DataGridHeaderState; + +// @public +export const useDataGridHeaderCell_unstable: (props: DataGridHeaderCellProps, ref: React_2.Ref) => 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) => DataGridRowState; + +// @public +export const useDataGridRowStyles_unstable: (state: DataGridRowState) => DataGridRowState; + +// @public +export const useDataGridSelectionCell_unstable: (props: DataGridSelectionCellProps, ref: React_2.Ref) => DataGridSelectionCellState; + +// @public +export const useDataGridSelectionCellStyles_unstable: (state: DataGridSelectionCellState) => DataGridSelectionCellState; + +// @public +export const useDataGridStyles_unstable: (state: DataGridState) => DataGridState; + // @public (undocumented) export function useSelection(options: UseSelectionOptions): (tableState: HeadlessTableState) => HeadlessTableState; diff --git a/packages/react-components/react-table/src/DataGrid.ts b/packages/react-components/react-table/src/DataGrid.ts new file mode 100644 index 0000000000000..f0274f9b91596 --- /dev/null +++ b/packages/react-components/react-table/src/DataGrid.ts @@ -0,0 +1 @@ +export * from './components/DataGrid/index'; diff --git a/packages/react-components/react-table/src/DataGridBody.ts b/packages/react-components/react-table/src/DataGridBody.ts new file mode 100644 index 0000000000000..67d8574eceebc --- /dev/null +++ b/packages/react-components/react-table/src/DataGridBody.ts @@ -0,0 +1 @@ +export * from './components/DataGridBody/index'; diff --git a/packages/react-components/react-table/src/DataGridCell.ts b/packages/react-components/react-table/src/DataGridCell.ts new file mode 100644 index 0000000000000..ced7ddb688624 --- /dev/null +++ b/packages/react-components/react-table/src/DataGridCell.ts @@ -0,0 +1 @@ +export * from './components/DataGridCell/index'; diff --git a/packages/react-components/react-table/src/DataGridHeader.ts b/packages/react-components/react-table/src/DataGridHeader.ts new file mode 100644 index 0000000000000..310b44dbb1d9a --- /dev/null +++ b/packages/react-components/react-table/src/DataGridHeader.ts @@ -0,0 +1 @@ +export * from './components/DataGridHeader/index'; diff --git a/packages/react-components/react-table/src/DataGridHeaderCell.ts b/packages/react-components/react-table/src/DataGridHeaderCell.ts new file mode 100644 index 0000000000000..c605dbea6a0dd --- /dev/null +++ b/packages/react-components/react-table/src/DataGridHeaderCell.ts @@ -0,0 +1 @@ +export * from './components/DataGridHeaderCell/index'; diff --git a/packages/react-components/react-table/src/DataGridRow.ts b/packages/react-components/react-table/src/DataGridRow.ts new file mode 100644 index 0000000000000..bddb376c7425b --- /dev/null +++ b/packages/react-components/react-table/src/DataGridRow.ts @@ -0,0 +1 @@ +export * from './components/DataGridRow/index'; diff --git a/packages/react-components/react-table/src/DataGridSelectionCell.ts b/packages/react-components/react-table/src/DataGridSelectionCell.ts new file mode 100644 index 0000000000000..04869398f52ee --- /dev/null +++ b/packages/react-components/react-table/src/DataGridSelectionCell.ts @@ -0,0 +1 @@ +export * from './components/DataGridSelectionCell/index'; diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.test.tsx b/packages/react-components/react-table/src/components/DataGrid/DataGrid.test.tsx new file mode 100644 index 0000000000000..bfa11e0876028 --- /dev/null +++ b/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({ + 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(Default DataGrid); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx new file mode 100644 index 0000000000000..45b5e4a4dfead --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + const state = useDataGrid_unstable(props, ref); + + useDataGridStyles_unstable(state); + return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state)); +}); + +DataGrid.displayName = 'DataGrid'; diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts new file mode 100644 index 0000000000000..0932ad03209b8 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-table/src/components/DataGrid/__snapshots__/DataGrid.test.tsx.snap b/packages/react-components/react-table/src/components/DataGrid/__snapshots__/DataGrid.test.tsx.snap new file mode 100644 index 0000000000000..e176a36318f37 --- /dev/null +++ b/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`] = ` +
+
+ Default DataGrid +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGrid/index.ts b/packages/react-components/react-table/src/components/DataGrid/index.ts new file mode 100644 index 0000000000000..6906263be7ae7 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx b/packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx new file mode 100644 index 0000000000000..50e0065e5e0a8 --- /dev/null +++ b/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); +}; diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts new file mode 100644 index 0000000000000..a2060dc4d9125 --- /dev/null +++ b/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): DataGridState => { + return useTable_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts new file mode 100644 index 0000000000000..7e42a057b7ef8 --- /dev/null +++ b/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); +} diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts new file mode 100644 index 0000000000000..a9ec5e97cb67b --- /dev/null +++ b/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 = { + 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; +}; diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.test.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.test.tsx new file mode 100644 index 0000000000000..f27400a2b9b7d --- /dev/null +++ b/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({ + 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(Default DataGridBody); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx new file mode 100644 index 0000000000000..b21ff3d98ff2e --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + const state = useDataGridBody_unstable(props, ref); + + useDataGridBodyStyles_unstable(state); + return renderDataGridBody_unstable(state); +}); + +DataGridBody.displayName = 'DataGridBody'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts new file mode 100644 index 0000000000000..251410f269efc --- /dev/null +++ b/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; diff --git a/packages/react-components/react-table/src/components/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap new file mode 100644 index 0000000000000..0177f6974d5c8 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridBody renders a default state 1`] = ` +
+
+ Default DataGridBody +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridBody/index.ts b/packages/react-components/react-table/src/components/DataGridBody/index.ts new file mode 100644 index 0000000000000..2cd323b85ed44 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridBody/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridBody'; +export * from './DataGridBody.types'; +export * from './renderDataGridBody'; +export * from './useDataGridBody'; +export * from './useDataGridBodyStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx new file mode 100644 index 0000000000000..4e7f36f60f08b --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridBody/renderDataGridBody.tsx @@ -0,0 +1,9 @@ +import type { DataGridBodyState } from './DataGridBody.types'; +import { renderTableBody_unstable } from '../TableBody/renderTableBody'; + +/** + * Render the final JSX of DataGridBody + */ +export const renderDataGridBody_unstable = (state: DataGridBodyState) => { + return renderTableBody_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts new file mode 100644 index 0000000000000..32fb876ae80d0 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBody.ts @@ -0,0 +1,16 @@ +import * as React from 'react'; +import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types'; +import { useTableBody_unstable } from '../TableBody/useTableBody'; + +/** + * Create the state required to render DataGridBody. + * + * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable, + * before being passed to renderDataGridBody_unstable. + * + * @param props - props from this instance of DataGridBody + * @param ref - reference to root HTMLElement of DataGridBody + */ +export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref): DataGridBodyState => { + return useTableBody_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts new file mode 100644 index 0000000000000..b46f062ae745d --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts @@ -0,0 +1,18 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles'; + +export const dataGridBodyClassNames: SlotClassNames = { + root: 'fui-DataGridBody', +}; + +/** + * Apply styling to the DataGridBody slots based on the state + */ +export const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => { + useTableBodyStyles_unstable(state); + state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.test.tsx b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.test.tsx new file mode 100644 index 0000000000000..fcb1b4e7b8a94 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DataGridCell } from './DataGridCell'; +import { isConformant } from '../../testing/isConformant'; +import { DataGridCellProps } from './DataGridCell.types'; + +describe('DataGridCell', () => { + isConformant({ + Component: DataGridCell, + displayName: 'DataGridCell', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default DataGridCell); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx new file mode 100644 index 0000000000000..6a97ccc5efb8e --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridCell_unstable } from './useDataGridCell'; +import { renderDataGridCell_unstable } from './renderDataGridCell'; +import { useDataGridCellStyles_unstable } from './useDataGridCellStyles'; +import type { DataGridCellProps } from './DataGridCell.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridCell component - TODO: add more docs + */ +export const DataGridCell: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGridCell_unstable(props, ref); + + useDataGridCellStyles_unstable(state); + return renderDataGridCell_unstable(state); +}); + +DataGridCell.displayName = 'DataGridCell'; diff --git a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.types.ts b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.types.ts new file mode 100644 index 0000000000000..2af3a64e3cc10 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.types.ts @@ -0,0 +1,13 @@ +import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types'; + +export type DataGridCellSlots = TableCellSlots; + +/** + * DataGridCell Props + */ +export type DataGridCellProps = TableCellProps; + +/** + * State used in rendering DataGridCell + */ +export type DataGridCellState = TableCellState; diff --git a/packages/react-components/react-table/src/components/DataGridCell/__snapshots__/DataGridCell.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridCell/__snapshots__/DataGridCell.test.tsx.snap new file mode 100644 index 0000000000000..7ed4393b206f1 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/__snapshots__/DataGridCell.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridCell renders a default state 1`] = ` +
+
+ Default DataGridCell +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridCell/index.ts b/packages/react-components/react-table/src/components/DataGridCell/index.ts new file mode 100644 index 0000000000000..bb9c252d5b0f2 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridCell'; +export * from './DataGridCell.types'; +export * from './renderDataGridCell'; +export * from './useDataGridCell'; +export * from './useDataGridCellStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx b/packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx new file mode 100644 index 0000000000000..9510b75f2eb6a --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/renderDataGridCell.tsx @@ -0,0 +1,9 @@ +import type { DataGridCellState } from './DataGridCell.types'; +import { renderTableCell_unstable } from '../TableCell/renderTableCell'; + +/** + * Render the final JSX of DataGridCell + */ +export const renderDataGridCell_unstable = (state: DataGridCellState) => { + return renderTableCell_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts new file mode 100644 index 0000000000000..f4f9670026258 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts @@ -0,0 +1,16 @@ +import * as React from 'react'; +import type { DataGridCellProps, DataGridCellState } from './DataGridCell.types'; +import { useTableCell_unstable } from '../TableCell/useTableCell'; + +/** + * Create the state required to render DataGridCell. + * + * The returned state can be modified with hooks such as useDataGridCellStyles_unstable, + * before being passed to renderDataGridCell_unstable. + * + * @param props - props from this instance of DataGridCell + * @param ref - reference to root HTMLElement of DataGridCell + */ +export const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref): DataGridCellState => { + return useTableCell_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts new file mode 100644 index 0000000000000..fcb43be655866 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts @@ -0,0 +1,18 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles'; + +export const dataGridCellClassNames: SlotClassNames = { + root: 'fui-DataGridCell', +}; + +/** + * Apply styling to the DataGridCell slots based on the state + */ +export const useDataGridCellStyles_unstable = (state: DataGridCellState): DataGridCellState => { + useTableCellStyles_unstable(state); + state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.test.tsx b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.test.tsx new file mode 100644 index 0000000000000..093aae96fa7f8 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DataGridHeader } from './DataGridHeader'; +import { isConformant } from '../../testing/isConformant'; +import { DataGridHeaderProps } from './DataGridHeader.types'; + +describe('DataGridHeader', () => { + isConformant({ + Component: DataGridHeader, + displayName: 'DataGridHeader', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default DataGridHeader); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx new file mode 100644 index 0000000000000..1c81cd84f8226 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridHeader_unstable } from './useDataGridHeader'; +import { renderDataGridHeader_unstable } from './renderDataGridHeader'; +import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles'; +import type { DataGridHeaderProps } from './DataGridHeader.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridHeader component - TODO: add more docs + */ +export const DataGridHeader: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGridHeader_unstable(props, ref); + + useDataGridHeaderStyles_unstable(state); + return renderDataGridHeader_unstable(state); +}); + +DataGridHeader.displayName = 'DataGridHeader'; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.types.ts b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.types.ts new file mode 100644 index 0000000000000..cca9fd6ea9444 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.types.ts @@ -0,0 +1,13 @@ +import { TableHeaderProps, TableHeaderSlots, TableHeaderState } from '../TableHeader/TableHeader.types'; + +export type DataGridHeaderSlots = TableHeaderSlots; + +/** + * DataGridHeader Props + */ +export type DataGridHeaderProps = TableHeaderProps; + +/** + * State used in rendering DataGridHeader + */ +export type DataGridHeaderState = TableHeaderState; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/__snapshots__/DataGridHeader.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridHeader/__snapshots__/DataGridHeader.test.tsx.snap new file mode 100644 index 0000000000000..c88e538533833 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/__snapshots__/DataGridHeader.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridHeader renders a default state 1`] = ` +
+
+ Default DataGridHeader +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/index.ts b/packages/react-components/react-table/src/components/DataGridHeader/index.ts new file mode 100644 index 0000000000000..477a72f22fc16 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridHeader'; +export * from './DataGridHeader.types'; +export * from './renderDataGridHeader'; +export * from './useDataGridHeader'; +export * from './useDataGridHeaderStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx b/packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx new file mode 100644 index 0000000000000..e2a69555d234d --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/renderDataGridHeader.tsx @@ -0,0 +1,9 @@ +import { renderTableHeader_unstable } from '../TableHeader/renderTableHeader'; +import type { DataGridHeaderState } from './DataGridHeader.types'; + +/** + * Render the final JSX of DataGridHeader + */ +export const renderDataGridHeader_unstable = (state: DataGridHeaderState) => { + return renderTableHeader_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeader.ts b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeader.ts new file mode 100644 index 0000000000000..def6dbd90cc78 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeader.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +import type { DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader.types'; +import { useTableHeader_unstable } from '../TableHeader/useTableHeader'; + +/** + * Create the state required to render DataGridHeader. + * + * The returned state can be modified with hooks such as useDataGridHeaderStyles_unstable, + * before being passed to renderDataGridHeader_unstable. + * + * @param props - props from this instance of DataGridHeader + * @param ref - reference to root HTMLElement of DataGridHeader + */ +export const useDataGridHeader_unstable = ( + props: DataGridHeaderProps, + ref: React.Ref, +): DataGridHeaderState => { + return useTableHeader_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts new file mode 100644 index 0000000000000..230b15e8dfee2 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts @@ -0,0 +1,18 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles'; + +export const dataGridHeaderClassNames: SlotClassNames = { + root: 'fui-DataGridHeader', +}; + +/** + * Apply styling to the DataGridHeader slots based on the state + */ +export const useDataGridHeaderStyles_unstable = (state: DataGridHeaderState): DataGridHeaderState => { + useTableHeaderStyles_unstable(state); + state.root.className = mergeClasses(dataGridHeaderClassNames.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx new file mode 100644 index 0000000000000..771d85c5fa1dc --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DataGridHeaderCell } from './DataGridHeaderCell'; +import { isConformant } from '../../testing/isConformant'; +import { DataGridHeaderCellProps } from './DataGridHeaderCell.types'; + +describe('DataGridHeaderCell', () => { + isConformant({ + Component: DataGridHeaderCell, + displayName: 'DataGridHeaderCell', + testOptions: { + 'has-static-classnames': [ + { + props: { + sortIcon: 'Test Icon', + }, + }, + ], + }, + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default DataGridHeaderCell); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx new file mode 100644 index 0000000000000..573c7418a54ab --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridHeaderCell_unstable } from './useDataGridHeaderCell'; +import { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell'; +import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles'; +import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridHeaderCell component - TODO: add more docs + */ +export const DataGridHeaderCell: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGridHeaderCell_unstable(props, ref); + + useDataGridHeaderCellStyles_unstable(state); + return renderDataGridHeaderCell_unstable(state); +}); + +DataGridHeaderCell.displayName = 'DataGridHeaderCell'; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts new file mode 100644 index 0000000000000..bfb630c8da86e --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts @@ -0,0 +1,17 @@ +import { + TableHeaderCellProps, + TableHeaderCellSlots, + TableHeaderCellState, +} from '../TableHeaderCell/TableHeaderCell.types'; + +export type DataGridHeaderCellSlots = TableHeaderCellSlots; + +/** + * DataGridHeaderCell Props + */ +export type DataGridHeaderCellProps = TableHeaderCellProps; + +/** + * State used in rendering DataGridHeaderCell + */ +export type DataGridHeaderCellState = TableHeaderCellState; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/__snapshots__/DataGridHeaderCell.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridHeaderCell/__snapshots__/DataGridHeaderCell.test.tsx.snap new file mode 100644 index 0000000000000..5158a041299e6 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/__snapshots__/DataGridHeaderCell.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridHeaderCell renders a default state 1`] = ` +
+
+ +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts new file mode 100644 index 0000000000000..db9da53f26b38 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridHeaderCell'; +export * from './DataGridHeaderCell.types'; +export * from './renderDataGridHeaderCell'; +export * from './useDataGridHeaderCell'; +export * from './useDataGridHeaderCellStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx b/packages/react-components/react-table/src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx new file mode 100644 index 0000000000000..b8fc4c2c661bf --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx @@ -0,0 +1,9 @@ +import type { DataGridHeaderCellState } from './DataGridHeaderCell.types'; +import { renderTableHeaderCell_unstable } from '../TableHeaderCell/renderTableHeaderCell'; + +/** + * Render the final JSX of DataGridHeaderCell + */ +export const renderDataGridHeaderCell_unstable = (state: DataGridHeaderCellState) => { + return renderTableHeaderCell_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts new file mode 100644 index 0000000000000..76dceb80ccb77 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +import type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types'; +import { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell'; + +/** + * Create the state required to render DataGridHeaderCell. + * + * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable, + * before being passed to renderDataGridHeaderCell_unstable. + * + * @param props - props from this instance of DataGridHeaderCell + * @param ref - reference to root HTMLElement of DataGridHeaderCell + */ +export const useDataGridHeaderCell_unstable = ( + props: DataGridHeaderCellProps, + ref: React.Ref, +): DataGridHeaderCellState => { + return useTableHeaderCell_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts new file mode 100644 index 0000000000000..779c1fbec18d4 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts @@ -0,0 +1,28 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles'; + +export const dataGridHeaderCellClassNames: SlotClassNames = { + root: 'fui-DataGridHeaderCell', + button: 'fui-DataGridHeaderCell__button', + sortIcon: 'fui-DataGridHeaderCell__sortIcon', +}; + +/** + * Apply styling to the DataGridHeaderCell slots based on the state + */ +export const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => { + useTableHeaderCellStyles_unstable(state); + state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className); + + if (state.button) { + state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className); + } + + if (state.sortIcon) { + state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className); + } + + return state; +}; diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx new file mode 100644 index 0000000000000..33f5d98a04681 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DataGridRow } from './DataGridRow'; +import { isConformant } from '../../testing/isConformant'; +import { DataGridRowProps } from './DataGridRow.types'; + +describe('DataGridRow', () => { + isConformant({ + Component: DataGridRow, + displayName: 'DataGridRow', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default DataGridRow); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx new file mode 100644 index 0000000000000..51a060c4b7266 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridRow_unstable } from './useDataGridRow'; +import { renderDataGridRow_unstable } from './renderDataGridRow'; +import { useDataGridRowStyles_unstable } from './useDataGridRowStyles'; +import type { DataGridRowProps } from './DataGridRow.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridRow component - TODO: add more docs + */ +export const DataGridRow: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGridRow_unstable(props, ref); + + useDataGridRowStyles_unstable(state); + return renderDataGridRow_unstable(state); +}); + +DataGridRow.displayName = 'DataGridRow'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts new file mode 100644 index 0000000000000..69da08d91e548 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts @@ -0,0 +1,13 @@ +import { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types'; + +export type DataGridRowSlots = TableRowSlots; + +/** + * DataGridRow Props + */ +export type DataGridRowProps = TableRowProps; + +/** + * State used in rendering DataGridRow + */ +export type DataGridRowState = TableRowState; diff --git a/packages/react-components/react-table/src/components/DataGridRow/__snapshots__/DataGridRow.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridRow/__snapshots__/DataGridRow.test.tsx.snap new file mode 100644 index 0000000000000..c39423e2ae14b --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/__snapshots__/DataGridRow.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridRow renders a default state 1`] = ` +
+
+ Default DataGridRow +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridRow/index.ts b/packages/react-components/react-table/src/components/DataGridRow/index.ts new file mode 100644 index 0000000000000..7f77535e67fcb --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridRow'; +export * from './DataGridRow.types'; +export * from './renderDataGridRow'; +export * from './useDataGridRow'; +export * from './useDataGridRowStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx new file mode 100644 index 0000000000000..fb8bbe07a3999 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/renderDataGridRow.tsx @@ -0,0 +1,9 @@ +import type { DataGridRowState } from './DataGridRow.types'; +import { renderTableRow_unstable } from '../TableRow/renderTableRow'; + +/** + * Render the final JSX of DataGridRow + */ +export const renderDataGridRow_unstable = (state: DataGridRowState) => { + return renderTableRow_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts new file mode 100644 index 0000000000000..e9172efcafc24 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.ts @@ -0,0 +1,16 @@ +import * as React from 'react'; +import type { DataGridRowProps, DataGridRowState } from './DataGridRow.types'; +import { useTableRow_unstable } from '../TableRow/useTableRow'; + +/** + * Create the state required to render DataGridRow. + * + * The returned state can be modified with hooks such as useDataGridRowStyles_unstable, + * before being passed to renderDataGridRow_unstable. + * + * @param props - props from this instance of DataGridRow + * @param ref - reference to root HTMLElement of DataGridRow + */ +export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref): DataGridRowState => { + return useTableRow_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts new file mode 100644 index 0000000000000..6592fec55d6bc --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts @@ -0,0 +1,18 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles'; + +export const dataGridRowClassNames: SlotClassNames = { + root: 'fui-DataGridRow', +}; + +/** + * Apply styling to the DataGridRow slots based on the state + */ +export const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => { + useTableRowStyles_unstable(state); + state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx new file mode 100644 index 0000000000000..9c26e3b83267d --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DataGridSelectionCell } from './DataGridSelectionCell'; +import { isConformant } from '../../testing/isConformant'; +import { DataGridSelectionCellProps } from '../../../dist/index'; +import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles'; + +describe('DataGridSelectionCell', () => { + isConformant({ + Component: DataGridSelectionCell, + displayName: 'DataGridSelectionCell', + testOptions: { + 'has-static-classnames': [ + { + props: { + type: 'checkbox', + }, + expectedClassNames: { + root: dataGridSelectionCellClassNames.root, + checkboxIndicator: dataGridSelectionCellClassNames.checkboxIndicator, + }, + }, + { + props: { + type: 'radio', + }, + expectedClassNames: { + root: dataGridSelectionCellClassNames.root, + radioIndicator: dataGridSelectionCellClassNames.radioIndicator, + }, + }, + ], + }, + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default DataGridSelectionCell); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx new file mode 100644 index 0000000000000..0af80f438a7d0 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell'; +import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell'; +import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles'; +import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridSelectionCell component - TODO: add more docs + */ +export const DataGridSelectionCell: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGridSelectionCell_unstable(props, ref); + + useDataGridSelectionCellStyles_unstable(state); + return renderDataGridSelectionCell_unstable(state); +}); + +DataGridSelectionCell.displayName = 'DataGridSelectionCell'; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts new file mode 100644 index 0000000000000..95f9fa2703c9e --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts @@ -0,0 +1,17 @@ +import { + TableSelectionCellProps, + TableSelectionCellSlots, + TableSelectionCellState, +} from '../TableSelectionCell/TableSelectionCell.types'; + +export type DataGridSelectionCellSlots = TableSelectionCellSlots; + +/** + * DataGridSelectionCell Props + */ +export type DataGridSelectionCellProps = TableSelectionCellProps; + +/** + * State used in rendering DataGridSelectionCell + */ +export type DataGridSelectionCellState = TableSelectionCellState; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/__snapshots__/DataGridSelectionCell.test.tsx.snap b/packages/react-components/react-table/src/components/DataGridSelectionCell/__snapshots__/DataGridSelectionCell.test.tsx.snap new file mode 100644 index 0000000000000..ea3274911a89b --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/__snapshots__/DataGridSelectionCell.test.tsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DataGridSelectionCell renders a default state 1`] = ` +
+
+ + + + +
+
+`; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts new file mode 100644 index 0000000000000..d06337ec6a34a --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts @@ -0,0 +1,5 @@ +export * from './DataGridSelectionCell'; +export * from './DataGridSelectionCell.types'; +export * from './renderDataGridSelectionCell'; +export * from './useDataGridSelectionCell'; +export * from './useDataGridSelectionCellStyles'; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx new file mode 100644 index 0000000000000..639e7b2c0f43e --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx @@ -0,0 +1,9 @@ +import type { DataGridSelectionCellState } from './DataGridSelectionCell.types'; +import { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderTableSelectionCell'; + +/** + * Render the final JSX of DataGridSelectionCell + */ +export const renderDataGridSelectionCell_unstable = (state: DataGridSelectionCellState) => { + return renderTableSelectionCell_unstable(state); +}; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts new file mode 100644 index 0000000000000..c7f84952d98bd --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell'; +import type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types'; + +/** + * Create the state required to render DataGridSelectionCell. + * + * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable, + * before being passed to renderDataGridSelectionCell_unstable. + * + * @param props - props from this instance of DataGridSelectionCell + * @param ref - reference to root HTMLElement of DataGridSelectionCell + */ +export const useDataGridSelectionCell_unstable = ( + props: DataGridSelectionCellProps, + ref: React.Ref, +): DataGridSelectionCellState => { + return useTableSelectionCell_unstable({ ...props, as: 'div' }, ref); +}; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts new file mode 100644 index 0000000000000..8fc1f07aa6e59 --- /dev/null +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts @@ -0,0 +1,36 @@ +import { mergeClasses } from '@griffel/react'; +import type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles'; + +export const dataGridSelectionCellClassNames: SlotClassNames = { + root: 'fui-DataGridSelectionCell', + checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator', + radioIndicator: 'fui-DataGridSelectionCell__radioIndicator', +}; + +/** + * Apply styling to the DataGridSelectionCell slots based on the state + */ +export const useDataGridSelectionCellStyles_unstable = ( + state: DataGridSelectionCellState, +): DataGridSelectionCellState => { + useTableSelectionCellStyles_unstable(state); + state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className); + + if (state.checkboxIndicator) { + state.checkboxIndicator.className = mergeClasses( + dataGridSelectionCellClassNames.checkboxIndicator, + state.checkboxIndicator.className, + ); + } + + if (state.radioIndicator) { + state.radioIndicator.className = mergeClasses( + dataGridSelectionCellClassNames.radioIndicator, + state.radioIndicator.className, + ); + } + + return state; +}; diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts index b3f228ead8e69..37273ec1cf90b 100644 --- a/packages/react-components/react-table/src/index.ts +++ b/packages/react-components/react-table/src/index.ts @@ -98,3 +98,71 @@ export { renderTableCellLayout_unstable, } from './TableCellLayout'; export type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout'; + +export { + DataGridCell, + dataGridCellClassNames, + useDataGridCellStyles_unstable, + useDataGridCell_unstable, + renderDataGridCell_unstable, +} from './DataGridCell'; +export type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell'; + +export { + DataGridRow, + dataGridRowClassNames, + useDataGridRowStyles_unstable, + useDataGridRow_unstable, + renderDataGridRow_unstable, +} from './DataGridRow'; +export type { DataGridRowProps, DataGridRowState, DataGridRowSlots } from './DataGridRow'; + +export { + DataGridBody, + dataGridBodyClassNames, + useDataGridBodyStyles_unstable, + useDataGridBody_unstable, + renderDataGridBody_unstable, +} from './DataGridBody'; +export type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots } from './DataGridBody'; + +export { + DataGrid, + dataGridClassNames, + useDataGridStyles_unstable, + useDataGrid_unstable, + renderDataGrid_unstable, +} from './DataGrid'; +export type { DataGridProps, DataGridSlots, DataGridState, DataGridContextValues } from './DataGrid'; + +export { + DataGridHeader, + dataGridHeaderClassNames, + useDataGridHeaderStyles_unstable, + useDataGridHeader_unstable, + renderDataGridHeader_unstable, +} from './DataGridHeader'; +export type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader'; + +export { + DataGridHeaderCell, + dataGridHeaderCellClassNames, + useDataGridHeaderCellStyles_unstable, + useDataGridHeaderCell_unstable, + renderDataGridHeaderCell_unstable, +} from './DataGridHeaderCell'; +export type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell'; + +export { + DataGridSelectionCell, + useDataGridSelectionCellStyles_unstable, + useDataGridSelectionCell_unstable, + renderDataGridSelectionCell_unstable, + dataGridSelectionCellClassNames, +} from './DataGridSelectionCell'; + +export type { + DataGridSelectionCellProps, + DataGridSelectionCellState, + DataGridSelectionCellSlots, +} from './DataGridSelectionCell';