feat(react-table): export useTableContextValues_unstable and useTableCellLayoutContextValues_unstable

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

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

packages/react-components/react-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<HTMLElement>) => TableState;
 
+// @public
+export function useTableContextValues_unstable(state: TableState): TableContextValues;
+
 // @public
 export const useTableBody_unstable: (props: TableBodyProps, ref: React_2.Ref<HTMLElement>) => TableBodyState;
 
@@ -645,6 +648,9 @@ export const useTableCellActionsStyles_unstable: (state: TableCellActionsState)
 // @public
 export const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
 
+// @public
+export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues;
+
 // @public
 export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
 

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';

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';

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<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  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<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  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);
+  });
+});

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';

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<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  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);
+  });
+});

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';

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,