diff --git a/change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json b/change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json new file mode 100644 index 00000000000000..f2c5488469e2cd --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json index 9775edbcb1159f..8cef6459c58afc 100644 --- a/packages/react-components/react-headless-components-preview/library/package.json +++ b/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", diff --git a/packages/react-components/react-headless-components-preview/library/src/DataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/DataGrid.ts new file mode 100644 index 00000000000000..363299e4d50b0f --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/Table.ts b/packages/react-components/react-headless-components-preview/library/src/Table.ts new file mode 100644 index 00000000000000..c1628a3762985d --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx new file mode 100644 index 00000000000000..65ebb4e51837a1 --- /dev/null +++ b/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(); + expect(getByRole('grid')).toBeInTheDocument(); + }); +}); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx new file mode 100644 index 00000000000000..ee9bc1088f4974 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + const state = useDataGrid(props, ref); + const contextValues = useDataGridContextValues(state); + return renderDataGrid(state, contextValues); +}); +DataGrid.displayName = 'DataGrid'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts new file mode 100644 index 00000000000000..7dcc4cf316cdbb --- /dev/null +++ b/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 }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx new file mode 100644 index 00000000000000..bb2f153c2a3802 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridBody(useDataGridBody(props, ref)); +}); +DataGridBody.displayName = 'DataGridBody'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts new file mode 100644 index 00000000000000..714e990125e712 --- /dev/null +++ b/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 }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts new file mode 100644 index 00000000000000..0e9f37635c4427 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts new file mode 100644 index 00000000000000..e2ab5f87989061 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts new file mode 100644 index 00000000000000..4cbe76ee5cf62f --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx new file mode 100644 index 00000000000000..1ccf49627deccc --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridCell(useDataGridCell(props, ref)); +}); +DataGridCell.displayName = 'DataGridCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts new file mode 100644 index 00000000000000..7874ea1c0ab02a --- /dev/null +++ b/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 }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts new file mode 100644 index 00000000000000..0952bf70566651 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts new file mode 100644 index 00000000000000..0a0abc60a6c864 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts new file mode 100644 index 00000000000000..b5a9411a074b0b --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx new file mode 100644 index 00000000000000..1ae4f34b5c7dd0 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridHeader(useDataGridHeader(props, ref)); +}); +DataGridHeader.displayName = 'DataGridHeader'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts new file mode 100644 index 00000000000000..a7e9604d3297d9 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts new file mode 100644 index 00000000000000..71f43738df2311 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts new file mode 100644 index 00000000000000..4adf6c31f94e7d --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts new file mode 100644 index 00000000000000..edfbfaa7624405 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx new file mode 100644 index 00000000000000..c7db5e9cdf7287 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridHeaderCell(useDataGridHeaderCell(props, ref)); +}); +DataGridHeaderCell.displayName = 'DataGridHeaderCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts new file mode 100644 index 00000000000000..7c46d1c9769c28 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts new file mode 100644 index 00000000000000..fbb867b45635f0 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts new file mode 100644 index 00000000000000..b5b83ebb72e04d --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts new file mode 100644 index 00000000000000..fe94a8c00df176 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx new file mode 100644 index 00000000000000..c6c496a8b2a959 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridRow(useDataGridRow(props, ref)); +}); +DataGridRow.displayName = 'DataGridRow'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts new file mode 100644 index 00000000000000..1cba12d5f16afa --- /dev/null +++ b/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 }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts new file mode 100644 index 00000000000000..b23efc48219921 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts new file mode 100644 index 00000000000000..29d171efdcd93e --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts new file mode 100644 index 00000000000000..ad25910cd1177d --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx new file mode 100644 index 00000000000000..beb86dd04a82a1 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + return renderDataGridSelectionCell(useDataGridSelectionCell(props, ref)); +}); +DataGridSelectionCell.displayName = 'DataGridSelectionCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts new file mode 100644 index 00000000000000..3ddcfb4179f1bd --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts new file mode 100644 index 00000000000000..b6d5a8524b1643 --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts new file mode 100644 index 00000000000000..97d0014b224be6 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts new file mode 100644 index 00000000000000..5584effac0a907 --- /dev/null +++ b/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; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts new file mode 100644 index 00000000000000..6dd92863fc91db --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts new file mode 100644 index 00000000000000..f963e1b26eea03 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts @@ -0,0 +1,2 @@ +import { renderDataGrid_unstable } from '@fluentui/react-table'; +export const renderDataGrid = renderDataGrid_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts new file mode 100644 index 00000000000000..38658c3a5b0acf --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts @@ -0,0 +1,7 @@ +'use client'; +import { useDataGrid_unstable, useDataGridContextValues_unstable } from '@fluentui/react-table'; +import type { DataGridState, DataGridContextValues } from './DataGrid.types'; +export const useDataGrid = useDataGrid_unstable; +export const useDataGridContextValues = useDataGridContextValues_unstable as ( + state: DataGridState, +) => DataGridContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx new file mode 100644 index 00000000000000..0c8e3938b7e465 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { isConformant } from '../../testing/isConformant'; +import { Table } from './Table'; + +describe('Table', () => { + isConformant({ Component: Table, displayName: 'Table' }); + + it('renders a semantic table element by default', () => { + const { getByRole } = render( + + + + + + +
cell
, + ); + expect(getByRole('table')).toBeInTheDocument(); + }); + + it('renders as div with role="table" when noNativeElements', () => { + const { getByRole } = render( + + +
, + ); + // noNativeElements renders div with explicit role + const { container } = render(); + expect(container.querySelector('[role="table"]')).toBeInTheDocument(); + }); +}); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx new file mode 100644 index 00000000000000..7cf5ab99876ffa --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx @@ -0,0 +1,13 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableProps } from './Table.types'; +import { useTable, useTableContextValues } from './useTable'; +import { renderTable } from './renderTable'; + +export const Table: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTable(props, ref); + const contextValues = useTableContextValues(state); + return renderTable(state, contextValues); +}); +Table.displayName = 'Table'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts new file mode 100644 index 00000000000000..8a8a13dee76c67 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts @@ -0,0 +1,13 @@ +import type { + TableSlots as TableBaseSlots, + TableProps as TableBaseProps, + TableState as TableBaseState, + TableContextValues as TableBaseContextValues, + SortDirection, +} from '@fluentui/react-table'; + +export type TableSlots = TableBaseSlots; +export type TableProps = TableBaseProps; +export type TableState = TableBaseState; +export type TableContextValues = TableBaseContextValues; +export type { SortDirection }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx new file mode 100644 index 00000000000000..8847bbef669fbd --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableBodyProps } from './TableBody.types'; +import { useTableBody } from './useTableBody'; +import { renderTableBody } from './renderTableBody'; + +export const TableBody: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableBody(useTableBody(props, ref)); +}); +TableBody.displayName = 'TableBody'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts new file mode 100644 index 00000000000000..541d8d22f8e402 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts @@ -0,0 +1,4 @@ +import type { TableBodySlots as B, TableBodyProps as BP, TableBodyState as BS } from '@fluentui/react-table'; +export type TableBodySlots = B; +export type TableBodyProps = BP; +export type TableBodyState = BS; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts new file mode 100644 index 00000000000000..cf0cdaadec45c6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts @@ -0,0 +1,4 @@ +export { TableBody } from './TableBody'; +export { useTableBody } from './useTableBody'; +export { renderTableBody } from './renderTableBody'; +export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts new file mode 100644 index 00000000000000..545d7d7d15f617 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts @@ -0,0 +1,2 @@ +import { renderTableBody_unstable } from '@fluentui/react-table'; +export const renderTableBody = renderTableBody_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts new file mode 100644 index 00000000000000..ff0cb9ddad3f1a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableBody_unstable } from '@fluentui/react-table'; +export const useTableBody = useTableBody_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx new file mode 100644 index 00000000000000..c29a0da6633ef5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableCellProps } from './TableCell.types'; +import { useTableCell } from './useTableCell'; +import { renderTableCell } from './renderTableCell'; + +export const TableCell: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableCell(useTableCell(props, ref)); +}); +TableCell.displayName = 'TableCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts new file mode 100644 index 00000000000000..3a8f0af64b31bb --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts @@ -0,0 +1,4 @@ +import type { TableCellSlots as S, TableCellProps as P, TableCellState as ST } from '@fluentui/react-table'; +export type TableCellSlots = S; +export type TableCellProps = P; +export type TableCellState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts new file mode 100644 index 00000000000000..2e3d5e510d025d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts @@ -0,0 +1,4 @@ +export { TableCell } from './TableCell'; +export { useTableCell } from './useTableCell'; +export { renderTableCell } from './renderTableCell'; +export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts new file mode 100644 index 00000000000000..eaeb8d13c68c53 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts @@ -0,0 +1,2 @@ +import { renderTableCell_unstable } from '@fluentui/react-table'; +export const renderTableCell = renderTableCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts new file mode 100644 index 00000000000000..1a30979a4a0b50 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableCell_unstable } from '@fluentui/react-table'; +export const useTableCell = useTableCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx new file mode 100644 index 00000000000000..838f9d80c074c2 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableCellActionsProps } from './TableCellActions.types'; +import { useTableCellActions } from './useTableCellActions'; +import { renderTableCellActions } from './renderTableCellActions'; + +export const TableCellActions: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableCellActions(useTableCellActions(props, ref)); +}); +TableCellActions.displayName = 'TableCellActions'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts new file mode 100644 index 00000000000000..9568df711859ab --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts @@ -0,0 +1,8 @@ +import type { + TableCellActionsSlots as S, + TableCellActionsProps as P, + TableCellActionsState as ST, +} from '@fluentui/react-table'; +export type TableCellActionsSlots = S; +export type TableCellActionsProps = P; +export type TableCellActionsState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts new file mode 100644 index 00000000000000..945257b125ed49 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts @@ -0,0 +1,4 @@ +export { TableCellActions } from './TableCellActions'; +export { useTableCellActions } from './useTableCellActions'; +export { renderTableCellActions } from './renderTableCellActions'; +export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './TableCellActions.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts new file mode 100644 index 00000000000000..634c2efb8f01bf --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts @@ -0,0 +1,2 @@ +import { renderTableCellActions_unstable } from '@fluentui/react-table'; +export const renderTableCellActions = renderTableCellActions_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts new file mode 100644 index 00000000000000..aeab277901ee4a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableCellActions_unstable } from '@fluentui/react-table'; +export const useTableCellActions = useTableCellActions_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx new file mode 100644 index 00000000000000..d093d1ecef2989 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx @@ -0,0 +1,13 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableCellLayoutProps } from './TableCellLayout.types'; +import { useTableCellLayout, useTableCellLayoutContextValues } from './useTableCellLayout'; +import { renderTableCellLayout } from './renderTableCellLayout'; + +export const TableCellLayout: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTableCellLayout(props, ref); + const ctx = useTableCellLayoutContextValues(state); + return renderTableCellLayout(state, ctx); +}); +TableCellLayout.displayName = 'TableCellLayout'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts new file mode 100644 index 00000000000000..7956a5760f12bb --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts @@ -0,0 +1,10 @@ +import type { + TableCellLayoutSlots as S, + TableCellLayoutProps as P, + TableCellLayoutState as ST, + TableCellLayoutContextValues as CV, +} from '@fluentui/react-table'; +export type TableCellLayoutSlots = S; +export type TableCellLayoutProps = P; +export type TableCellLayoutState = ST; +export type TableCellLayoutContextValues = CV; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts new file mode 100644 index 00000000000000..bbd995ad47fe82 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts @@ -0,0 +1,9 @@ +export { TableCellLayout } from './TableCellLayout'; +export { useTableCellLayout, useTableCellLayoutContextValues } from './useTableCellLayout'; +export { renderTableCellLayout } from './renderTableCellLayout'; +export type { + TableCellLayoutSlots, + TableCellLayoutProps, + TableCellLayoutState, + TableCellLayoutContextValues, +} from './TableCellLayout.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts new file mode 100644 index 00000000000000..8e5f235de98ee1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts @@ -0,0 +1,2 @@ +import { renderTableCellLayout_unstable } from '@fluentui/react-table'; +export const renderTableCellLayout = renderTableCellLayout_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts new file mode 100644 index 00000000000000..013326e1c10adf --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts @@ -0,0 +1,7 @@ +'use client'; +import { useTableCellLayout_unstable, useTableCellLayoutContextValues_unstable } from '@fluentui/react-table'; +import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types'; +export const useTableCellLayout = useTableCellLayout_unstable; +export const useTableCellLayoutContextValues = useTableCellLayoutContextValues_unstable as ( + state: TableCellLayoutState, +) => TableCellLayoutContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx new file mode 100644 index 00000000000000..699861c3194d4b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableHeaderProps } from './TableHeader.types'; +import { useTableHeader } from './useTableHeader'; +import { renderTableHeader } from './renderTableHeader'; + +export const TableHeader: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableHeader(useTableHeader(props, ref)); +}); +TableHeader.displayName = 'TableHeader'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts new file mode 100644 index 00000000000000..66a02791a5af49 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts @@ -0,0 +1,4 @@ +import type { TableHeaderSlots as S, TableHeaderProps as P, TableHeaderState as ST } from '@fluentui/react-table'; +export type TableHeaderSlots = S; +export type TableHeaderProps = P; +export type TableHeaderState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts new file mode 100644 index 00000000000000..e29908029b3837 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts @@ -0,0 +1,4 @@ +export { TableHeader } from './TableHeader'; +export { useTableHeader } from './useTableHeader'; +export { renderTableHeader } from './renderTableHeader'; +export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts new file mode 100644 index 00000000000000..6c8bdf5a310e8d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts @@ -0,0 +1,2 @@ +import { renderTableHeader_unstable } from '@fluentui/react-table'; +export const renderTableHeader = renderTableHeader_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts new file mode 100644 index 00000000000000..32314de4ac9864 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableHeader_unstable } from '@fluentui/react-table'; +export const useTableHeader = useTableHeader_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx new file mode 100644 index 00000000000000..297b8070c0cee2 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableHeaderCellProps } from './TableHeaderCell.types'; +import { useTableHeaderCell } from './useTableHeaderCell'; +import { renderTableHeaderCell } from './renderTableHeaderCell'; + +export const TableHeaderCell: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableHeaderCell(useTableHeaderCell(props, ref)); +}); +TableHeaderCell.displayName = 'TableHeaderCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts new file mode 100644 index 00000000000000..11fd2a2a29beab --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts @@ -0,0 +1,8 @@ +import type { + TableHeaderCellSlots as S, + TableHeaderCellProps as P, + TableHeaderCellState as ST, +} from '@fluentui/react-table'; +export type TableHeaderCellSlots = S; +export type TableHeaderCellProps = P; +export type TableHeaderCellState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts new file mode 100644 index 00000000000000..204e1ccac76d7d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts @@ -0,0 +1,4 @@ +export { TableHeaderCell } from './TableHeaderCell'; +export { useTableHeaderCell } from './useTableHeaderCell'; +export { renderTableHeaderCell } from './renderTableHeaderCell'; +export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts new file mode 100644 index 00000000000000..bd45b03b4c7da2 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts @@ -0,0 +1,2 @@ +import { renderTableHeaderCell_unstable } from '@fluentui/react-table'; +export const renderTableHeaderCell = renderTableHeaderCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts new file mode 100644 index 00000000000000..89840c37d8c540 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableHeaderCell_unstable } from '@fluentui/react-table'; +export const useTableHeaderCell = useTableHeaderCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx new file mode 100644 index 00000000000000..42f89f30aa97e6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableResizeHandleProps } from './TableResizeHandle.types'; +import { useTableResizeHandle } from './useTableResizeHandle'; +import { renderTableResizeHandle } from './renderTableResizeHandle'; + +export const TableResizeHandle: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableResizeHandle(useTableResizeHandle(props, ref)); +}); +TableResizeHandle.displayName = 'TableResizeHandle'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts new file mode 100644 index 00000000000000..c3fc186848faf9 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts @@ -0,0 +1,8 @@ +import type { + TableResizeHandleSlots as S, + TableResizeHandleProps as P, + TableResizeHandleState as ST, +} from '@fluentui/react-table'; +export type TableResizeHandleSlots = S; +export type TableResizeHandleProps = P; +export type TableResizeHandleState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts new file mode 100644 index 00000000000000..ff27b1211af7aa --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts @@ -0,0 +1,4 @@ +export { TableResizeHandle } from './TableResizeHandle'; +export { useTableResizeHandle } from './useTableResizeHandle'; +export { renderTableResizeHandle } from './renderTableResizeHandle'; +export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts new file mode 100644 index 00000000000000..3a19a0948bcf94 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts @@ -0,0 +1,2 @@ +import { renderTableResizeHandle_unstable } from '@fluentui/react-table'; +export const renderTableResizeHandle = renderTableResizeHandle_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts new file mode 100644 index 00000000000000..285d68f8ed354d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableResizeHandle_unstable } from '@fluentui/react-table'; +export const useTableResizeHandle = useTableResizeHandle_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx new file mode 100644 index 00000000000000..92d9d5e53009aa --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableRowProps } from './TableRow.types'; +import { useTableRow } from './useTableRow'; +import { renderTableRow } from './renderTableRow'; + +export const TableRow: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableRow(useTableRow(props, ref)); +}); +TableRow.displayName = 'TableRow'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts new file mode 100644 index 00000000000000..a6bf6fdf86d2a5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts @@ -0,0 +1,4 @@ +import type { TableRowSlots as S, TableRowProps as P, TableRowState as ST } from '@fluentui/react-table'; +export type TableRowSlots = S; +export type TableRowProps = P; +export type TableRowState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts new file mode 100644 index 00000000000000..4dacdb58d7aecd --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts @@ -0,0 +1,4 @@ +export { TableRow } from './TableRow'; +export { useTableRow } from './useTableRow'; +export { renderTableRow } from './renderTableRow'; +export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts new file mode 100644 index 00000000000000..5a0c084c5f60c5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts @@ -0,0 +1,2 @@ +import { renderTableRow_unstable } from '@fluentui/react-table'; +export const renderTableRow = renderTableRow_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts new file mode 100644 index 00000000000000..351657cc5c632b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableRow_unstable } from '@fluentui/react-table'; +export const useTableRow = useTableRow_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx new file mode 100644 index 00000000000000..caeb61a8d732fb --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx @@ -0,0 +1,11 @@ +'use client'; +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TableSelectionCellProps } from './TableSelectionCell.types'; +import { useTableSelectionCell } from './useTableSelectionCell'; +import { renderTableSelectionCell } from './renderTableSelectionCell'; + +export const TableSelectionCell: ForwardRefComponent = React.forwardRef((props, ref) => { + return renderTableSelectionCell(useTableSelectionCell(props, ref)); +}); +TableSelectionCell.displayName = 'TableSelectionCell'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts new file mode 100644 index 00000000000000..75b57a0bd6a6f1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts @@ -0,0 +1,8 @@ +import type { + TableSelectionCellSlots as S, + TableSelectionCellProps as P, + TableSelectionCellState as ST, +} from '@fluentui/react-table'; +export type TableSelectionCellSlots = S; +export type TableSelectionCellProps = P; +export type TableSelectionCellState = ST; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts new file mode 100644 index 00000000000000..389feadf7a6a15 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts @@ -0,0 +1,8 @@ +export { TableSelectionCell } from './TableSelectionCell'; +export { useTableSelectionCell } from './useTableSelectionCell'; +export { renderTableSelectionCell } from './renderTableSelectionCell'; +export type { + TableSelectionCellSlots, + TableSelectionCellProps, + TableSelectionCellState, +} from './TableSelectionCell.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts new file mode 100644 index 00000000000000..ad8a5b3f226104 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts @@ -0,0 +1,2 @@ +import { renderTableSelectionCell_unstable } from '@fluentui/react-table'; +export const renderTableSelectionCell = renderTableSelectionCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts new file mode 100644 index 00000000000000..bfa22238b85452 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts @@ -0,0 +1,3 @@ +'use client'; +import { useTableSelectionCell_unstable } from '@fluentui/react-table'; +export const useTableSelectionCell = useTableSelectionCell_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts new file mode 100644 index 00000000000000..268057a9a0cd3f --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts @@ -0,0 +1,41 @@ +export { Table } from './Table'; +export { renderTable } from './renderTable'; +export { useTable, useTableContextValues } from './useTable'; +export type { TableSlots, TableProps, TableState, TableContextValues, SortDirection } from './Table.types'; + +export { TableBody, renderTableBody, useTableBody } from './TableBody'; +export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody'; + +export { TableHeader, renderTableHeader, useTableHeader } from './TableHeader'; +export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader'; + +export { TableHeaderCell, renderTableHeaderCell, useTableHeaderCell } from './TableHeaderCell'; +export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell'; + +export { TableRow, renderTableRow, useTableRow } from './TableRow'; +export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow'; + +export { TableCell, renderTableCell, useTableCell } from './TableCell'; +export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell'; + +export { TableSelectionCell, renderTableSelectionCell, useTableSelectionCell } from './TableSelectionCell'; +export type { TableSelectionCellSlots, TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell'; + +export { TableCellActions, renderTableCellActions, useTableCellActions } from './TableCellActions'; +export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './TableCellActions'; + +export { + TableCellLayout, + renderTableCellLayout, + useTableCellLayout, + useTableCellLayoutContextValues, +} from './TableCellLayout'; +export type { + TableCellLayoutSlots, + TableCellLayoutProps, + TableCellLayoutState, + TableCellLayoutContextValues, +} from './TableCellLayout'; + +export { TableResizeHandle, renderTableResizeHandle, useTableResizeHandle } from './TableResizeHandle'; +export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts new file mode 100644 index 00000000000000..3c5391c464442e --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts @@ -0,0 +1,2 @@ +import { renderTable_unstable } from '@fluentui/react-table'; +export const renderTable = renderTable_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts new file mode 100644 index 00000000000000..ef5a6f64eeec6a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts @@ -0,0 +1,5 @@ +'use client'; +import { useTable_unstable, useTableContextValues_unstable } from '@fluentui/react-table'; +import type { TableState, TableContextValues } from './Table.types'; +export const useTable = useTable_unstable; +export const useTableContextValues = useTableContextValues_unstable as (state: TableState) => TableContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/index.ts b/packages/react-components/react-headless-components-preview/library/src/index.ts index 0e55d90452127d..08e681bf19224c 100644 --- a/packages/react-components/react-headless-components-preview/library/src/index.ts +++ b/packages/react-components/react-headless-components-preview/library/src/index.ts @@ -282,3 +282,94 @@ export type { ToolbarToggleButtonProps, ToolbarToggleButtonState, } from './Toolbar'; + +export { + Table, + renderTable, + useTable, + useTableContextValues, + TableBody, + renderTableBody, + useTableBody, + TableHeader, + renderTableHeader, + useTableHeader, + TableHeaderCell, + renderTableHeaderCell, + useTableHeaderCell, + TableRow, + renderTableRow, + useTableRow, + TableCell, + renderTableCell, + useTableCell, + TableSelectionCell, + renderTableSelectionCell, + useTableSelectionCell, + TableCellActions, + renderTableCellActions, + useTableCellActions, + TableCellLayout, + renderTableCellLayout, + useTableCellLayout, + useTableCellLayoutContextValues, + TableResizeHandle, + renderTableResizeHandle, + useTableResizeHandle, +} from './Table'; +export type { + TableSlots, + TableProps, + TableState, + TableContextValues, + SortDirection, + TableBodySlots, + TableBodyProps, + TableBodyState, + TableHeaderSlots, + TableHeaderProps, + TableHeaderState, + TableHeaderCellSlots, + TableHeaderCellProps, + TableHeaderCellState, + TableRowSlots, + TableRowProps, + TableRowState, + TableCellSlots, + TableCellProps, + TableCellState, + TableSelectionCellSlots, + TableSelectionCellProps, + TableSelectionCellState, + TableCellActionsSlots, + TableCellActionsProps, + TableCellActionsState, + TableCellLayoutSlots, + TableCellLayoutProps, + TableCellLayoutState, + TableCellLayoutContextValues, + TableResizeHandleSlots, + TableResizeHandleProps, + TableResizeHandleState, +} from './Table'; + +export { DataGrid, renderDataGrid, useDataGrid, useDataGridContextValues } from './DataGrid'; +export type { DataGridSlots, DataGridProps, DataGridState, DataGridContextValues, DataGridFocusMode } from './DataGrid'; + +export { DataGridBody, renderDataGridBody, useDataGridBody } from './DataGrid'; +export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGrid'; + +export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './DataGrid'; +export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGrid'; + +export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './DataGrid'; +export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGrid'; + +export { DataGridRow, renderDataGridRow, useDataGridRow } from './DataGrid'; +export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGrid'; + +export { DataGridCell, renderDataGridCell, useDataGridCell } from './DataGrid'; +export type { DataGridCellSlots, DataGridCellProps, DataGridCellState, DataGridCellFocusMode } from './DataGrid'; + +export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './DataGrid'; +export type { DataGridSelectionCellSlots, DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGrid'; diff --git a/packages/react-components/react-table/library/etc/react-table.api.md b/packages/react-components/react-table/library/etc/react-table.api.md index c17af07451e9a2..ceed38f16ab406 100644 --- a/packages/react-components/react-table/library/etc/react-table.api.md +++ b/packages/react-components/react-table/library/etc/react-table.api.md @@ -627,6 +627,9 @@ export const useIsInTableHeader: () => boolean; // @public export const useTable_unstable: (props: TableProps, ref: React_2.Ref) => TableState; +// @public +export function useTableContextValues_unstable(state: TableState): TableContextValues; + // @public export const useTableBody_unstable: (props: TableBodyProps, ref: React_2.Ref) => TableBodyState; @@ -645,6 +648,9 @@ export const useTableCellActionsStyles_unstable: (state: TableCellActionsState) // @public export const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref) => TableCellLayoutState; +// @public +export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues; + // @public export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState; diff --git a/packages/react-components/react-table/library/src/Table.ts b/packages/react-components/react-table/library/src/Table.ts index 2d9ef84cb3e7c2..3ee33fe26a4e31 100644 --- a/packages/react-components/react-table/library/src/Table.ts +++ b/packages/react-components/react-table/library/src/Table.ts @@ -13,4 +13,5 @@ export { tableClassNames, useTableStyles_unstable, useTable_unstable, + useTableContextValues_unstable, } from './components/Table/index'; diff --git a/packages/react-components/react-table/library/src/TableCellLayout.ts b/packages/react-components/react-table/library/src/TableCellLayout.ts index ec11b3ba538608..868177258ba461 100644 --- a/packages/react-components/react-table/library/src/TableCellLayout.ts +++ b/packages/react-components/react-table/library/src/TableCellLayout.ts @@ -10,4 +10,5 @@ export { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable, useTableCellLayout_unstable, + useTableCellLayoutContextValues_unstable, } from './components/TableCellLayout/index'; diff --git a/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts b/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts new file mode 100644 index 00000000000000..3e08bc85f8709b --- /dev/null +++ b/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import { useDataGrid_unstable } from './useDataGrid'; +import { useDataGridContextValues_unstable } from './useDataGridContextValues'; +import { createTableColumn } from '../../hooks'; + +const columns = [createTableColumn({ columnId: 'name' }), createTableColumn({ columnId: 'age' })]; +const items = [ + { name: 'Alice', age: 30 }, + { name: 'Bob', age: 25 }, +]; + +describe('useDataGrid_unstable', () => { + let ref: React.RefObject; + + beforeEach(() => { + ref = React.createRef(); + }); + + it('returns default state with table element and medium size', () => { + const { result } = renderHook(() => useDataGrid_unstable({ columns, items }, ref)); + + expect(result.current).toMatchObject({ + components: { root: 'table' }, + size: 'medium', + noNativeElements: false, + focusMode: 'cell', + selectableRows: false, + }); + }); + + it('reflects selectionMode in selectableRows', () => { + const { result } = renderHook(() => useDataGrid_unstable({ columns, items, selectionMode: 'multiselect' }, ref)); + + expect(result.current.selectableRows).toBe(true); + }); + + it('exposes sorted rows via tableState', () => { + const { result } = renderHook(() => useDataGrid_unstable({ columns, items }, ref)); + + expect(result.current.tableState.getRows()).toHaveLength(items.length); + }); + + it('reflects resizableColumns prop', () => { + const { result } = renderHook(() => useDataGrid_unstable({ columns, items, resizableColumns: true }, ref)); + + expect(result.current.resizableColumns).toBe(true); + }); +}); + +describe('useDataGridContextValues_unstable', () => { + let ref: React.RefObject; + + beforeEach(() => { + ref = React.createRef(); + }); + + it('includes table and dataGrid context', () => { + const { result } = renderHook(() => { + const state = useDataGrid_unstable({ columns, items }, ref); + return useDataGridContextValues_unstable(state); + }); + + expect(result.current).toMatchObject({ + table: { + size: 'medium', + noNativeElements: false, + sortable: false, + }, + dataGrid: expect.objectContaining({ + focusMode: 'cell', + selectableRows: false, + }), + }); + }); + + it('reflects selectionMode in dataGrid context', () => { + const { result } = renderHook(() => { + const state = useDataGrid_unstable({ columns, items, selectionMode: 'single' }, ref); + return useDataGridContextValues_unstable(state); + }); + + expect(result.current.dataGrid.selectableRows).toBe(true); + }); +}); diff --git a/packages/react-components/react-table/library/src/components/Table/index.ts b/packages/react-components/react-table/library/src/components/Table/index.ts index 017dd1d3bb8a40..9331e5b78e1c5d 100644 --- a/packages/react-components/react-table/library/src/components/Table/index.ts +++ b/packages/react-components/react-table/library/src/components/Table/index.ts @@ -9,4 +9,5 @@ export type { } from './Table.types'; export { renderTable_unstable } from './renderTable'; export { useTable_unstable } from './useTable'; +export { useTableContextValues_unstable } from './useTableContextValues'; export { tableClassName, tableClassNames, useTableStyles_unstable } from './useTableStyles.styles'; diff --git a/packages/react-components/react-table/library/src/components/Table/useTable.test.ts b/packages/react-components/react-table/library/src/components/Table/useTable.test.ts new file mode 100644 index 00000000000000..2193f039515673 --- /dev/null +++ b/packages/react-components/react-table/library/src/components/Table/useTable.test.ts @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import { useTable_unstable } from './useTable'; + +describe('useTable_unstable', () => { + let ref: React.RefObject; + + beforeEach(() => { + ref = React.createRef(); + }); + + it('returns default state with table element and medium size', () => { + const { result } = renderHook(() => useTable_unstable({}, ref)); + + expect(result.current).toMatchObject({ + components: { root: 'table' }, + root: expect.objectContaining({ ref }), + size: 'medium', + noNativeElements: false, + sortable: false, + }); + }); + + it('renders as div with role="table" when noNativeElements is true', () => { + const { result } = renderHook(() => useTable_unstable({ noNativeElements: true }, ref)); + + expect(result.current.components.root).toBe('div'); + expect(result.current.root).toMatchObject({ role: 'table' }); + expect(result.current.noNativeElements).toBe(true); + }); + + it('respects explicit as prop', () => { + const { result } = renderHook(() => useTable_unstable({ as: 'div' }, ref)); + + // eslint-disable-next-line @typescript-eslint/no-deprecated + expect(result.current.components.root).toBe('div'); + }); + + it('passes size prop through to state', () => { + const { result } = renderHook(() => useTable_unstable({ size: 'small' }, ref)); + + expect(result.current.size).toBe('small'); + }); + + it('reflects sortable prop in state', () => { + const { result } = renderHook(() => useTable_unstable({ sortable: true }, ref)); + + expect(result.current.sortable).toBe(true); + }); +}); diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts index e675a17a881d91..adf46e1ffad5ab 100644 --- a/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts +++ b/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts @@ -7,4 +7,5 @@ export type { } from './TableCellLayout.types'; export { renderTableCellLayout_unstable } from './renderTableCellLayout'; export { useTableCellLayout_unstable } from './useTableCellLayout'; +export { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues'; export { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles'; diff --git a/packages/react-components/react-table/library/src/index.ts b/packages/react-components/react-table/library/src/index.ts index fe4d0922c71398..2ee4beaa2f4058 100644 --- a/packages/react-components/react-table/library/src/index.ts +++ b/packages/react-components/react-table/library/src/index.ts @@ -57,6 +57,7 @@ export { tableClassNames, useTableStyles_unstable, useTable_unstable, + useTableContextValues_unstable, renderTable_unstable, } from './Table'; export type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table'; @@ -118,9 +119,15 @@ export { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable, useTableCellLayout_unstable, + useTableCellLayoutContextValues_unstable, renderTableCellLayout_unstable, } from './TableCellLayout'; -export type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout'; +export type { + TableCellLayoutProps, + TableCellLayoutSlots, + TableCellLayoutState, + TableCellLayoutContextValues, +} from './TableCellLayout'; export { DataGridCell,