From 68a928a800272fda837ca3db91c4a3c234ab89ca Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 3 Feb 2023 11:19:04 +0100 Subject: [PATCH 01/10] feat: react-data-grid-react-window should be complete extension package Implements `aria-rowcount` and `aria-rowindex` support for the virtualized DataGrid. This PR also turns the package into a 'complete' extension package so that all DataGrid components are re-exported from it whether it is recomposed or not. This package should never be exported from react-components suite. --- .../etc/react-data-grid-react-window.api.md | 45 ++++++++++++++----- .../src/DataGrid.ts | 1 + .../src/DataGridRow.ts | 1 + .../src/components/DataGrid/DataGrid.tsx | 21 +++++++++ .../src/components/DataGrid/index.ts | 2 + .../src/components/DataGrid/useDataGrid.ts | 16 +++++++ .../DataGridBody/DataGridBody.types.ts | 9 +++- .../DataGridBody/renderDataGridBody.tsx | 7 ++- .../DataGridBody/useDataGridBody.ts | 3 +- .../components/DataGridRow/DataGridRow.tsx | 18 ++++++++ .../src/components/DataGridRow/index.ts | 2 + .../components/DataGridRow/useDataGridRow.ts | 18 ++++++++ .../src/contexts/rowIndexContext.ts | 9 ++++ .../react-data-grid-react-window/src/index.ts | 18 +++++++- .../react-table/etc/react-table.api.md | 3 ++ .../src/components/DataGrid/index.ts | 1 + .../DataGrid/useDataGridContextValues.ts | 3 ++ .../react-components/react-table/src/index.ts | 1 + .../DataGrid/Virtualization.stories.tsx | 27 ++++++++--- scripts/storybook/src/utils.js | 5 ++- 20 files changed, 187 insertions(+), 23 deletions(-) create mode 100644 packages/react-components/react-data-grid-react-window/src/DataGrid.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/DataGridRow.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts create mode 100644 packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md index 00b194abd2edc..8b5342379d96a 100644 --- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md +++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md @@ -7,12 +7,24 @@ /// import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-table'; -import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-table'; -import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-table'; +import { DataGridCell } from '@fluentui/react-table'; +import { DataGridCellProps } from '@fluentui/react-table'; +import { DataGridHeader } from '@fluentui/react-table'; +import { DataGridHeaderCell } from '@fluentui/react-table'; +import { DataGridHeaderCellProps } from '@fluentui/react-table'; +import { DataGridHeaderProps } from '@fluentui/react-table'; +import { DataGridProps } from '@fluentui/react-table'; +import { DataGridRowProps } from '@fluentui/react-table'; +import { DataGridSelectionCell } from '@fluentui/react-table'; +import { DataGridSelectionCellProps } from '@fluentui/react-table'; +import type { DataGridState } from '@fluentui/react-table'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { TableRowData } from '@fluentui/react-table'; +// @public +export const DataGrid: ForwardRefComponent; + // @public export const DataGridBody: ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); @@ -22,21 +34,34 @@ export type DataGridBodyProps = Omit; + ariaRowIndexStart?: number; }; -// @public (undocumented) -export type DataGridBodySlots = DataGridBodySlots_2; +export { DataGridCell } -// @public -export type DataGridBodyState = Omit & Pick & Pick, 'width'> & { - renderRow: RowRenderFunction; -}; +export { DataGridCellProps } + +export { DataGridHeader } + +export { DataGridHeaderCell } + +export { DataGridHeaderCellProps } + +export { DataGridHeaderProps } + +export { DataGridProps } // @public -export const renderDataGridBody_unstable: (state: DataGridBodyState) => JSX.Element; +export const DataGridRow: ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); + +export { DataGridRowProps } + +export { DataGridSelectionCell } + +export { DataGridSelectionCellProps } // @public -export const useDataGridBody_unstable: (props: DataGridBodyProps, ref: React_2.Ref) => DataGridBodyState; +export const useDataGrid_unstable: (props: DataGridProps, ref: React_2.Ref) => DataGridState; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-data-grid-react-window/src/DataGrid.ts b/packages/react-components/react-data-grid-react-window/src/DataGrid.ts new file mode 100644 index 0000000000000..f0274f9b91596 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/DataGrid.ts @@ -0,0 +1 @@ +export * from './components/DataGrid/index'; diff --git a/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts b/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts new file mode 100644 index 0000000000000..dff1abb3f73e2 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/DataGridRow.ts @@ -0,0 +1 @@ +export * from './components/DataGridRow'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx new file mode 100644 index 0000000000000..2963f1b7e8e06 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { useDataGrid_unstable } from './useDataGrid'; +import { + renderDataGrid_unstable, + useDataGridStyles_unstable, + useDataGridContextValues_unstable, +} from '@fluentui/react-table'; +import type { DataGridProps } from '@fluentui/react-table'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGrid component - TODO: add more docs + */ +export const DataGrid: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDataGrid_unstable(props, ref); + + useDataGridStyles_unstable(state); + return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state)); +}); + +DataGrid.displayName = 'DataGrid'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts new file mode 100644 index 0000000000000..0b3589e2b3bc1 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts @@ -0,0 +1,2 @@ +export * from './DataGrid'; +export * from './useDataGrid'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts new file mode 100644 index 0000000000000..c50790787ddad --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts @@ -0,0 +1,16 @@ +import * as React from 'react'; +import type { DataGridProps, DataGridState } from '@fluentui/react-table'; +import { useDataGrid_unstable as useBaseState } from '@fluentui/react-table'; + +/** + * Create the state required to render DataGrid. + * + * The returned state can be modified with hooks such as useDataGridStyles_unstable, + * before being passed to renderDataGrid_unstable. + * + * @param props - props from this instance of DataGrid + * @param ref - reference to root HTMLElement of DataGrid + */ +export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref): DataGridState => { + return useBaseState({ ...props, 'aria-rowcount': props.items.length }, ref); +}; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts index 227cdb7c96488..44d0baf65fe88 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts @@ -34,6 +34,13 @@ export type DataGridBodyProps = Omit; + /** + * All virtualized rows must have the [aria-rowindex](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) + * attribute for correct screen reader navigation. The default start index is 2 since we assume that there is only + * one row in the header. If this is not the case, the start index can be reconfigured through this prop. + * @default 2 + */ + ariaRowIndexStart?: number; }; /** @@ -41,6 +48,6 @@ export type DataGridBodyProps = Omit & Pick & - Pick, 'width'> & { + Pick, 'width' | 'ariaRowIndexStart'> & { renderRow: RowRenderFunction; }; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx index bb0b233768b6c..5d4edd062a76a 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx @@ -3,6 +3,7 @@ import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types' import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; import { getSlots } from '@fluentui/react-utilities'; import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-table'; +import { TableRowIndexContextProvider } from '../../contexts/rowIndexContext'; /** * Render the final JSX of DataGridVirtualizedBody @@ -21,7 +22,11 @@ export const renderDataGridBody_unstable = (state: DataGridBodyState) => { > {({ data, index, style }: ListChildComponentProps) => { const row: TableRowData = data[index]; - return {state.renderRow(row, style)}; + return ( + + {state.renderRow(row, style)} + + ); }} diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts index 5f945f12f5b79..04274aa32bb71 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts @@ -12,7 +12,7 @@ import { useDataGridBody_unstable as useDataGridBodyBase_unstable, RowRenderFunc * @param ref - reference to root HTMLElement of DataGridBody */ export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref): DataGridBodyState => { - const { height, itemSize, width = '100%', children } = props; + const { height, itemSize, width = '100%', ariaRowIndexStart = 2, children } = props; // cast the row render function to work with unknown args const renderRowWithUnknown = children as RowRenderFunction; @@ -24,5 +24,6 @@ export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Re height, renderRow: children, width, + ariaRowIndexStart, }; }; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx new file mode 100644 index 0000000000000..11c6f85063d87 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDataGridRowStyles_unstable, renderDataGridRow_unstable } from '@fluentui/react-table'; +import { useDataGridRow_unstable } from './useDataGridRow'; +import type { DataGridRowProps } from '@fluentui/react-table'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DataGridRow component + */ +export const DataGridRow: ForwardRefComponent & + ((props: DataGridRowProps) => JSX.Element) = React.forwardRef((props, ref) => { + const state = useDataGridRow_unstable(props, ref); + + useDataGridRowStyles_unstable(state); + return renderDataGridRow_unstable(state); +}) as ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); + +DataGridRow.displayName = 'DataGridRow'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts new file mode 100644 index 0000000000000..15727b3664100 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts @@ -0,0 +1,2 @@ +export * from './DataGridRow'; +export * from './useDataGridRow'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts new file mode 100644 index 0000000000000..b7e73da01d1b7 --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts @@ -0,0 +1,18 @@ +import * as React from 'react'; +import type { DataGridRowProps, DataGridRowState } from '@fluentui/react-table'; +import { useDataGridRow_unstable as useBaseState } from '@fluentui/react-table'; +import { useTableRowIndexContext } from '../../contexts/rowIndexContext'; + +/** + * Create the state required to render DataGridRow. + * + * The returned state can be modified with hooks such as useDataGridRowStyles_unstable, + * before being passed to renderDataGridRow_unstable. + * + * @param props - props from this instance of DataGridRow + * @param ref - reference to root HTMLElement of DataGridRow + */ +export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref): DataGridRowState => { + const rowIndex = useTableRowIndexContext(); + return useBaseState({ ...props, 'aria-rowindex': rowIndex }, ref); +}; diff --git a/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts b/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts new file mode 100644 index 0000000000000..6ff39e8372cba --- /dev/null +++ b/packages/react-components/react-data-grid-react-window/src/contexts/rowIndexContext.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; + +const rowIndexContext = React.createContext(undefined); + +export const tableRowIndexContextDefaultValue = undefined; + +export const useTableRowIndexContext = () => React.useContext(rowIndexContext) ?? tableRowIndexContextDefaultValue; + +export const TableRowIndexContextProvider = rowIndexContext.Provider; diff --git a/packages/react-components/react-data-grid-react-window/src/index.ts b/packages/react-components/react-data-grid-react-window/src/index.ts index c3328a9b2c49b..98bd5b1c3c97d 100644 --- a/packages/react-components/react-data-grid-react-window/src/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/index.ts @@ -1,3 +1,17 @@ -export { DataGridBody, useDataGridBody_unstable, renderDataGridBody_unstable } from './DataGridBody'; +export { DataGridBody } from './DataGridBody'; +export { DataGrid } from './DataGrid'; +export { DataGridRow } from './DataGridRow'; -export type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots } from './DataGridBody'; +export { DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell } from '@fluentui/react-table'; + +export type { + DataGridCellProps, + DataGridHeaderCellProps, + DataGridHeaderProps, + DataGridSelectionCellProps, + DataGridRowProps, + DataGridProps, +} from '@fluentui/react-table'; + +export type { DataGridBodyProps } from './DataGridBody'; +export { DataGrid, useDataGrid_unstable } from './DataGrid'; diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 5b491d75e0f72..0c1dbd0b86887 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -517,6 +517,9 @@ export const useDataGridCell_unstable: (props: DataGridCellProps, ref: React_2.R // @public export const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState; +// @internal (undocumented) +export function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues; + // @public export const useDataGridHeader_unstable: (props: DataGridHeaderProps, ref: React_2.Ref) => DataGridHeaderState; diff --git a/packages/react-components/react-table/src/components/DataGrid/index.ts b/packages/react-components/react-table/src/components/DataGrid/index.ts index 6906263be7ae7..f421b8aa7c553 100644 --- a/packages/react-components/react-table/src/components/DataGrid/index.ts +++ b/packages/react-components/react-table/src/components/DataGrid/index.ts @@ -3,3 +3,4 @@ export * from './DataGrid.types'; export * from './renderDataGrid'; export * from './useDataGrid'; export * from './useDataGridStyles'; +export * from './useDataGridContextValues'; diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts index 577f487a64482..36e4904921892 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts +++ b/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts @@ -1,6 +1,9 @@ import { useTableContextValues_unstable } from '../Table/useTableContextValues'; import { DataGridContextValues, DataGridState } from './DataGrid.types'; +/** + * @internal + */ export function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues { const tableContextValues = useTableContextValues_unstable(state); return { diff --git a/packages/react-components/react-table/src/index.ts b/packages/react-components/react-table/src/index.ts index 079aa8407949b..d01fe9cf12a6c 100644 --- a/packages/react-components/react-table/src/index.ts +++ b/packages/react-components/react-table/src/index.ts @@ -134,6 +134,7 @@ export { useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, + useDataGridContextValues_unstable, } from './DataGrid'; export type { DataGridProps, diff --git a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx index 8f19b8a2785a2..117c799f8e822 100644 --- a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx @@ -9,17 +9,15 @@ import { VideoRegular, } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar, useScrollbarWidth, useFluent } from '@fluentui/react-components'; +import { TableColumnDefinition, createTableColumn, TableCellLayout } from '@fluentui/react-components/unstable'; import { - DataGridRow, + DataGridBody, DataGrid, + DataGridRow, DataGridHeader, - DataGridHeaderCell, DataGridCell, - TableColumnDefinition, - createTableColumn, - TableCellLayout, -} from '@fluentui/react-components/unstable'; -import { DataGridBody } from '@fluentui/react-data-grid-react-window'; + DataGridHeaderCell, +} from '@fluentui/react-data-grid-react-window'; type FileCell = { label: string; @@ -170,3 +168,18 @@ export const Virtualization = () => { ); }; + +Virtualization.parameters = { + docs: { + description: { + story: [ + 'Virtualizating the DataGrid component involves recomposing components to use a virtualized container.', + 'This is already done in the extension package `@fluentui/react-data-grid-react-window` which provides', + 'extended DataGrid components that are powered', + 'by [react-window](https://react-window.vercel.app/#/examples/list/fixed-size).', + '', + 'The example below shows how to use this extension package to virtualize the DataGrid component.', + ].join('\n'), + }, + }, +}; diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index c1c10f89b71d6..9dcebfe62aa53 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -159,7 +159,7 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) { * @returns {import('storybook-addon-export-to-codesandbox').BabelPluginOptions} */ function getCodesandboxBabelOptions() { - return Object.values(allPackageInfo).reduce((acc, cur) => { + const importMappings = Object.values(allPackageInfo).reduce((acc, cur) => { if (isConvergedPackage({ packagePathOrJson: cur.packageJson, projectType: 'library' })) { const isPrerelease = semver.prerelease(cur.packageJson.version) !== null; @@ -170,6 +170,9 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) { return acc; }, /** @type import('storybook-addon-export-to-codesandbox').BabelPluginOptions*/ ({})); + + delete importMappings['@fluentui/react-data-grid-react-window']; + return importMappings; } } From 67fbf0bd940b46caf04c8c3cb74b744a3b98b806 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 3 Feb 2023 11:24:01 +0100 Subject: [PATCH 02/10] export useDataGridContextValues_unstable --- ...i-react-table-4d29794e-c7a5-4723-8a85-3e5668c2c102.json | 7 +++++++ .../react-components/etc/react-components.unstable.api.md | 3 +++ .../react-components/src/unstable/index.ts | 1 + 3 files changed, 11 insertions(+) create mode 100644 change/@fluentui-react-table-4d29794e-c7a5-4723-8a85-3e5668c2c102.json diff --git a/change/@fluentui-react-table-4d29794e-c7a5-4723-8a85-3e5668c2c102.json b/change/@fluentui-react-table-4d29794e-c7a5-4723-8a85-3e5668c2c102.json new file mode 100644 index 0000000000000..acfc2b079995b --- /dev/null +++ b/change/@fluentui-react-table-4d29794e-c7a5-4723-8a85-3e5668c2c102.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: exports `useDataGridContextValues_unstable`", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index f6bff1347ce45..1b09eb5c5deec 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -219,6 +219,7 @@ import { useDataGridBody_unstable } from '@fluentui/react-table'; import { useDataGridBodyStyles_unstable } from '@fluentui/react-table'; import { useDataGridCell_unstable } from '@fluentui/react-table'; import { useDataGridCellStyles_unstable } from '@fluentui/react-table'; +import { useDataGridContextValues_unstable } from '@fluentui/react-table'; import { useDataGridHeader_unstable } from '@fluentui/react-table'; import { useDataGridHeaderCell_unstable } from '@fluentui/react-table'; import { useDataGridHeaderCellStyles_unstable } from '@fluentui/react-table'; @@ -698,6 +699,8 @@ export { useDataGridCell_unstable } export { useDataGridCellStyles_unstable } +export { useDataGridContextValues_unstable } + export { useDataGridHeader_unstable } export { useDataGridHeaderCell_unstable } diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index a8371621123f2..37e2a857b87ea 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -134,6 +134,7 @@ export { useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, + useDataGridContextValues_unstable, DataGridHeader, dataGridHeaderClassNames, useDataGridHeaderStyles_unstable, From 82fc5c6d35b4d47479fe57787292ddf811e7fd38 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 3 Feb 2023 11:24:21 +0100 Subject: [PATCH 03/10] changefile --- ...ct-components-7a8583a3-a0c8-4391-9083-d36fa2598973.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-components-7a8583a3-a0c8-4391-9083-d36fa2598973.json diff --git a/change/@fluentui-react-components-7a8583a3-a0c8-4391-9083-d36fa2598973.json b/change/@fluentui-react-components-7a8583a3-a0c8-4391-9083-d36fa2598973.json new file mode 100644 index 0000000000000..5f83e892f1512 --- /dev/null +++ b/change/@fluentui-react-components-7a8583a3-a0c8-4391-9083-d36fa2598973.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: exports `useDataGridContextValues_unstable`", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From ea2350968ab1764d6966d79871b21cd54a9653b3 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 3 Feb 2023 14:02:23 +0100 Subject: [PATCH 04/10] remove duplicate export --- .../etc/react-data-grid-react-window.api.md | 4 ---- .../react-data-grid-react-window/src/index.ts | 1 - 2 files changed, 5 deletions(-) diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md index 8b5342379d96a..95c38e011dc3f 100644 --- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md +++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md @@ -17,7 +17,6 @@ import { DataGridProps } from '@fluentui/react-table'; import { DataGridRowProps } from '@fluentui/react-table'; import { DataGridSelectionCell } from '@fluentui/react-table'; import { DataGridSelectionCellProps } from '@fluentui/react-table'; -import type { DataGridState } from '@fluentui/react-table'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { TableRowData } from '@fluentui/react-table'; @@ -60,9 +59,6 @@ export { DataGridSelectionCell } export { DataGridSelectionCellProps } -// @public -export const useDataGrid_unstable: (props: DataGridProps, ref: React_2.Ref) => DataGridState; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-data-grid-react-window/src/index.ts b/packages/react-components/react-data-grid-react-window/src/index.ts index 98bd5b1c3c97d..de176daf4b344 100644 --- a/packages/react-components/react-data-grid-react-window/src/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/index.ts @@ -14,4 +14,3 @@ export type { } from '@fluentui/react-table'; export type { DataGridBodyProps } from './DataGridBody'; -export { DataGrid, useDataGrid_unstable } from './DataGrid'; From d6c5781e198787d6a1b9be202ed2e63b3195be80 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 3 Feb 2023 14:23:30 +0100 Subject: [PATCH 05/10] remove DataGridBody tests, not a core component here --- .../components/DataGridBody/DataGridBody.test.tsx | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.test.tsx diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.test.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.test.tsx deleted file mode 100644 index 4bc16e449b3b0..0000000000000 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { DataGridBody } from './DataGridBody'; -import { DataGridBodyProps } from './DataGridBody.types'; -import { isConformant } from '../../testing/isConformant'; - -describe('DataGridBody', () => { - isConformant({ - Component: DataGridBody, - displayName: 'DataGridBody', - disabledTests: ['component-has-static-classnames-object'], - requiredProps: { - height: 50, - itemSize: 1000, - }, - }); -}); From f596cad89b114c0e62788c8a3dbad5618c9a77e2 Mon Sep 17 00:00:00 2001 From: ling1726 Date: Fri, 3 Feb 2023 15:01:47 +0100 Subject: [PATCH 06/10] Update packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts --- .../src/components/DataGrid/useDataGridContextValues.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts index 36e4904921892..577f487a64482 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts +++ b/packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts @@ -1,9 +1,6 @@ import { useTableContextValues_unstable } from '../Table/useTableContextValues'; import { DataGridContextValues, DataGridState } from './DataGrid.types'; -/** - * @internal - */ export function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues { const tableContextValues = useTableContextValues_unstable(state); return { From 0c372f62d24c225ad1ad95119bf4555e85ebb5aa Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 6 Feb 2023 11:50:39 +0100 Subject: [PATCH 07/10] make hack nicer --- scripts/storybook/src/utils.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index 9dcebfe62aa53..be565404addf0 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -171,8 +171,12 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) { return acc; }, /** @type import('storybook-addon-export-to-codesandbox').BabelPluginOptions*/ ({})); - delete importMappings['@fluentui/react-data-grid-react-window']; - return importMappings; + return { + ...importMappings, + '@fluentui/react-data-grid-react-window': { + replace: '@fluentui/react-data-grid-react-window', + }, + }; } } From 3fd5a569d6c347d50d036599b4fd233ef7f46d34 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 6 Feb 2023 13:54:18 +0100 Subject: [PATCH 08/10] update m --- packages/react-components/react-table/etc/react-table.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index 848b93865a28d..234f8f11403f7 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -545,7 +545,7 @@ export const useDataGridCell_unstable: (props: DataGridCellProps, ref: React_2.R // @public export const useDataGridCellStyles_unstable: (state: DataGridCellState) => DataGridCellState; -// @internal (undocumented) +// @public (undocumented) export function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues; // @public From 61fec7dcd09f734903e3ce3f715ffe0a9d1c7c0b Mon Sep 17 00:00:00 2001 From: ling1726 Date: Mon, 6 Feb 2023 14:43:30 +0100 Subject: [PATCH 09/10] Update packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx Co-authored-by: Oleksandr Fediashov --- .../src/components/DataGrid/DataGrid.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx index 2963f1b7e8e06..b2daaa21a7941 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx @@ -8,9 +8,6 @@ import { import type { DataGridProps } from '@fluentui/react-table'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -/** - * DataGrid component - TODO: add more docs - */ export const DataGrid: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useDataGrid_unstable(props, ref); From a0e63ab27e566d9ed0f1414fc24e24bfddbf40ce Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 6 Feb 2023 15:31:29 +0100 Subject: [PATCH 10/10] update md --- .../etc/react-data-grid-react-window.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md index 95c38e011dc3f..91df62b77636f 100644 --- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md +++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md @@ -21,7 +21,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { TableRowData } from '@fluentui/react-table'; -// @public +// @public (undocumented) export const DataGrid: ForwardRefComponent; // @public