diff --git a/change/@fluentui-react-components-f479109e-f8fc-4752-ba1e-26017f905399.json b/change/@fluentui-react-components-f479109e-f8fc-4752-ba1e-26017f905399.json new file mode 100644 index 00000000000000..8c0225fe927cc8 --- /dev/null +++ b/change/@fluentui-react-components-f479109e-f8fc-4752-ba1e-26017f905399.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Release `Table` and `DataGrid` as stable", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-4b17ccf0-3f1f-4d2e-abab-3f0cb233ea22.json b/change/@fluentui-react-table-4b17ccf0-3f1f-4d2e-abab-3f0cb233ea22.json new file mode 100644 index 00000000000000..f68452413f69a3 --- /dev/null +++ b/change/@fluentui-react-table-4b17ccf0-3f1f-4d2e-abab-3f0cb233ea22.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: Release 9.0.0", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index fe452adeb4ae80..3651e9f0fa15ff 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -137,11 +137,50 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { CreateFocusOutlineStyleOptions } from '@fluentui/react-tabster'; import { createHighContrastTheme } from '@fluentui/react-theme'; import { createLightTheme } from '@fluentui/react-theme'; +import { createTableColumn } from '@fluentui/react-table'; +import { CreateTableColumnOptions } from '@fluentui/react-table'; import { createTeamsDarkTheme } from '@fluentui/react-theme'; import { CurveTokens } from '@fluentui/react-theme'; import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow'; import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow'; import { DATA_OVERFLOWING } from '@fluentui/react-overflow'; +import { DataGrid } from '@fluentui/react-table'; +import { DataGridBody } from '@fluentui/react-table'; +import { dataGridBodyClassNames } from '@fluentui/react-table'; +import { DataGridBodyProps } from '@fluentui/react-table'; +import { DataGridBodySlots } from '@fluentui/react-table'; +import { DataGridBodyState } from '@fluentui/react-table'; +import { DataGridCell } from '@fluentui/react-table'; +import { dataGridCellClassNames } from '@fluentui/react-table'; +import { DataGridCellProps } from '@fluentui/react-table'; +import { DataGridCellSlots } from '@fluentui/react-table'; +import { DataGridCellState } from '@fluentui/react-table'; +import { dataGridClassNames } from '@fluentui/react-table'; +import { DataGridContextValue } from '@fluentui/react-table'; +import { DataGridContextValues } from '@fluentui/react-table'; +import { DataGridHeader } from '@fluentui/react-table'; +import { DataGridHeaderCell } from '@fluentui/react-table'; +import { dataGridHeaderCellClassNames } from '@fluentui/react-table'; +import { DataGridHeaderCellProps } from '@fluentui/react-table'; +import { DataGridHeaderCellSlots } from '@fluentui/react-table'; +import { DataGridHeaderCellState } from '@fluentui/react-table'; +import { dataGridHeaderClassNames } from '@fluentui/react-table'; +import { DataGridHeaderProps } from '@fluentui/react-table'; +import { DataGridHeaderSlots } from '@fluentui/react-table'; +import { DataGridHeaderState } from '@fluentui/react-table'; +import { DataGridProps } from '@fluentui/react-table'; +import { DataGridRow } from '@fluentui/react-table'; +import { dataGridRowClassNames } from '@fluentui/react-table'; +import { DataGridRowProps } from '@fluentui/react-table'; +import { DataGridRowSlots } from '@fluentui/react-table'; +import { DataGridRowState } from '@fluentui/react-table'; +import { DataGridSelectionCell } from '@fluentui/react-table'; +import { dataGridSelectionCellClassNames } from '@fluentui/react-table'; +import { DataGridSelectionCellProps } from '@fluentui/react-table'; +import { DataGridSelectionCellSlots } from '@fluentui/react-table'; +import { DataGridSelectionCellState } from '@fluentui/react-table'; +import { DataGridSlots } from '@fluentui/react-table'; +import { DataGridState } from '@fluentui/react-table'; import { Dialog } from '@fluentui/react-dialog'; import { DialogActions } from '@fluentui/react-dialog'; import { dialogActionsClassNames } from '@fluentui/react-dialog'; @@ -404,6 +443,13 @@ import { renderButton_unstable } from '@fluentui/react-button'; import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; import { renderCombobox_unstable } from '@fluentui/react-combobox'; import { renderCompoundButton_unstable } from '@fluentui/react-button'; +import { renderDataGrid_unstable } from '@fluentui/react-table'; +import { renderDataGridBody_unstable } from '@fluentui/react-table'; +import { renderDataGridCell_unstable } from '@fluentui/react-table'; +import { renderDataGridHeader_unstable } from '@fluentui/react-table'; +import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table'; +import { renderDataGridRow_unstable } from '@fluentui/react-table'; +import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table'; import { renderDialog_unstable } from '@fluentui/react-dialog'; import { renderDialogActions_unstable } from '@fluentui/react-dialog'; import { renderDialogBody_unstable } from '@fluentui/react-dialog'; @@ -448,6 +494,16 @@ import { renderSpinner_unstable } from '@fluentui/react-spinner'; import { renderSplitButton_unstable } from '@fluentui/react-button'; import { renderSwitch_unstable } from '@fluentui/react-switch'; import { renderTab_unstable } from '@fluentui/react-tabs'; +import { renderTable_unstable } from '@fluentui/react-table'; +import { renderTableBody_unstable } from '@fluentui/react-table'; +import { renderTableCell_unstable } from '@fluentui/react-table'; +import { renderTableCellActions_unstable } from '@fluentui/react-table'; +import { renderTableCellLayout_unstable } from '@fluentui/react-table'; +import { renderTableHeader_unstable } from '@fluentui/react-table'; +import { renderTableHeaderCell_unstable } from '@fluentui/react-table'; +import { renderTableResizeHandle_unstable } from '@fluentui/react-table'; +import { renderTableRow_unstable } from '@fluentui/react-table'; +import { renderTableSelectionCell_unstable } from '@fluentui/react-table'; import { renderTabList_unstable } from '@fluentui/react-tabs'; import { renderText_unstable } from '@fluentui/react-text'; import { renderTextarea_unstable } from '@fluentui/react-textarea'; @@ -484,6 +540,7 @@ import { Slot } from '@fluentui/react-utilities'; import { SlotClassNames } from '@fluentui/react-utilities'; import { SlotPropsRecord } from '@fluentui/react-utilities'; import { SlotRenderFunction } from '@fluentui/react-utilities'; +import { SortDirection } from '@fluentui/react-table'; import { SpacingTokens } from '@fluentui/react-theme'; import { SpinButton } from '@fluentui/react-spinbutton'; import { SpinButtonBounds } from '@fluentui/react-spinbutton'; @@ -520,6 +577,72 @@ import { SwitchSlots } from '@fluentui/react-switch'; import { SwitchState } from '@fluentui/react-switch'; import { Tab } from '@fluentui/react-tabs'; import { tabClassNames } from '@fluentui/react-tabs'; +import { Table } from '@fluentui/react-table'; +import { TableBody } from '@fluentui/react-table'; +import { tableBodyClassName } from '@fluentui/react-table'; +import { tableBodyClassNames } from '@fluentui/react-table'; +import { TableBodyProps } from '@fluentui/react-table'; +import { TableBodySlots } from '@fluentui/react-table'; +import { TableBodyState } from '@fluentui/react-table'; +import { TableCell } from '@fluentui/react-table'; +import { TableCellActions } from '@fluentui/react-table'; +import { tableCellActionsClassNames } from '@fluentui/react-table'; +import { TableCellActionsProps } from '@fluentui/react-table'; +import { TableCellActionsSlots } from '@fluentui/react-table'; +import { TableCellActionsState } from '@fluentui/react-table'; +import { tableCellClassName } from '@fluentui/react-table'; +import { tableCellClassNames } from '@fluentui/react-table'; +import { TableCellLayout } from '@fluentui/react-table'; +import { tableCellLayoutClassNames } from '@fluentui/react-table'; +import { TableCellLayoutProps } from '@fluentui/react-table'; +import { TableCellLayoutSlots } from '@fluentui/react-table'; +import { TableCellLayoutState } from '@fluentui/react-table'; +import { TableCellProps } from '@fluentui/react-table'; +import { TableCellSlots } from '@fluentui/react-table'; +import { TableCellState } from '@fluentui/react-table'; +import { tableClassName } from '@fluentui/react-table'; +import { tableClassNames } from '@fluentui/react-table'; +import { TableColumnDefinition } from '@fluentui/react-table'; +import { TableColumnId } from '@fluentui/react-table'; +import { TableColumnSizingOptions } from '@fluentui/react-table'; +import { TableContextProvider } from '@fluentui/react-table'; +import { TableContextValue } from '@fluentui/react-table'; +import { TableContextValues } from '@fluentui/react-table'; +import { TableFeaturePlugin } from '@fluentui/react-table'; +import { TableFeaturesState } from '@fluentui/react-table'; +import { TableHeader } from '@fluentui/react-table'; +import { TableHeaderCell } from '@fluentui/react-table'; +import { tableHeaderCellClassName } from '@fluentui/react-table'; +import { tableHeaderCellClassNames } from '@fluentui/react-table'; +import { TableHeaderCellProps } from '@fluentui/react-table'; +import { TableHeaderCellSlots } from '@fluentui/react-table'; +import { TableHeaderCellState } from '@fluentui/react-table'; +import { tableHeaderClassName } from '@fluentui/react-table'; +import { tableHeaderClassNames } from '@fluentui/react-table'; +import { TableHeaderProps } from '@fluentui/react-table'; +import { TableHeaderSlots } from '@fluentui/react-table'; +import { TableHeaderState } from '@fluentui/react-table'; +import { TableProps } from '@fluentui/react-table'; +import { TableResizeHandle } from '@fluentui/react-table'; +import { tableResizeHandleClassNames } from '@fluentui/react-table'; +import { TableRow } from '@fluentui/react-table'; +import { tableRowClassName } from '@fluentui/react-table'; +import { tableRowClassNames } from '@fluentui/react-table'; +import { TableRowData } from '@fluentui/react-table'; +import { TableRowId } from '@fluentui/react-table'; +import { TableRowIdContextProvider } from '@fluentui/react-table'; +import { TableRowProps } from '@fluentui/react-table'; +import { TableRowSlots } from '@fluentui/react-table'; +import { TableRowState } from '@fluentui/react-table'; +import { TableSelectionCell } from '@fluentui/react-table'; +import { tableSelectionCellClassNames } from '@fluentui/react-table'; +import { TableSelectionCellProps } from '@fluentui/react-table'; +import { TableSelectionCellSlots } from '@fluentui/react-table'; +import { TableSelectionCellState } from '@fluentui/react-table'; +import { TableSelectionState } from '@fluentui/react-table'; +import { TableSlots } from '@fluentui/react-table'; +import { TableSortState } from '@fluentui/react-table'; +import { TableState } from '@fluentui/react-table'; import { TabList } from '@fluentui/react-tabs'; import { tabListClassNames } from '@fluentui/react-tabs'; import { TabListContextValue } from '@fluentui/react-tabs'; @@ -636,6 +759,21 @@ import { useCompoundButton_unstable } from '@fluentui/react-button'; import { useCompoundButtonStyles_unstable } from '@fluentui/react-button'; import { useCounterBadge_unstable } from '@fluentui/react-badge'; import { useCounterBadgeStyles_unstable } from '@fluentui/react-badge'; +import { useDataGrid_unstable } from '@fluentui/react-table'; +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'; +import { useDataGridHeaderStyles_unstable } from '@fluentui/react-table'; +import { useDataGridRow_unstable } from '@fluentui/react-table'; +import { useDataGridRowStyles_unstable } from '@fluentui/react-table'; +import { useDataGridSelectionCell_unstable } from '@fluentui/react-table'; +import { useDataGridSelectionCellStyles_unstable } from '@fluentui/react-table'; +import { useDataGridStyles_unstable } from '@fluentui/react-table'; import { useDialog_unstable } from '@fluentui/react-dialog'; import { useDialogActions_unstable } from '@fluentui/react-dialog'; import { useDialogActionsStyles_unstable } from '@fluentui/react-dialog'; @@ -745,6 +883,33 @@ import { useSplitButtonStyles_unstable } from '@fluentui/react-button'; import { useSwitch_unstable } from '@fluentui/react-switch'; import { useSwitchStyles_unstable } from '@fluentui/react-switch'; import { useTab_unstable } from '@fluentui/react-tabs'; +import { useTable_unstable } from '@fluentui/react-table'; +import { useTableBody_unstable } from '@fluentui/react-table'; +import { useTableBodyStyles_unstable } from '@fluentui/react-table'; +import { useTableCell_unstable } from '@fluentui/react-table'; +import { useTableCellActions_unstable } from '@fluentui/react-table'; +import { useTableCellActionsStyles_unstable } from '@fluentui/react-table'; +import { useTableCellLayout_unstable } from '@fluentui/react-table'; +import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table'; +import { useTableCellStyles_unstable } from '@fluentui/react-table'; +import { useTableColumnSizing_unstable } from '@fluentui/react-table'; +import { useTableContext } from '@fluentui/react-table'; +import { useTableFeatures } from '@fluentui/react-table'; +import { UseTableFeaturesOptions } from '@fluentui/react-table'; +import { useTableHeader_unstable } from '@fluentui/react-table'; +import { useTableHeaderCell_unstable } from '@fluentui/react-table'; +import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table'; +import { useTableHeaderStyles_unstable } from '@fluentui/react-table'; +import { useTableResizeHandle_unstable } from '@fluentui/react-table'; +import { useTableResizeHandleStyles_unstable } from '@fluentui/react-table'; +import { useTableRow_unstable } from '@fluentui/react-table'; +import { useTableRowIdContext } from '@fluentui/react-table'; +import { useTableRowStyles_unstable } from '@fluentui/react-table'; +import { useTableSelection } from '@fluentui/react-table'; +import { useTableSelectionCell_unstable } from '@fluentui/react-table'; +import { useTableSelectionCellStyles_unstable } from '@fluentui/react-table'; +import { useTableSort } from '@fluentui/react-table'; +import { useTableStyles_unstable } from '@fluentui/react-table'; import { useTabList_unstable } from '@fluentui/react-tabs'; import { useTabListContext_unstable } from '@fluentui/react-tabs'; import { useTabListContextValues_unstable } from '@fluentui/react-tabs'; @@ -1043,6 +1208,10 @@ export { createHighContrastTheme } export { createLightTheme } +export { createTableColumn } + +export { CreateTableColumnOptions } + export { createTeamsDarkTheme } export { CurveTokens } @@ -1053,6 +1222,80 @@ export { DATA_OVERFLOW_MENU } export { DATA_OVERFLOWING } +export { DataGrid } + +export { DataGridBody } + +export { dataGridBodyClassNames } + +export { DataGridBodyProps } + +export { DataGridBodySlots } + +export { DataGridBodyState } + +export { DataGridCell } + +export { dataGridCellClassNames } + +export { DataGridCellProps } + +export { DataGridCellSlots } + +export { DataGridCellState } + +export { dataGridClassNames } + +export { DataGridContextValue } + +export { DataGridContextValues } + +export { DataGridHeader } + +export { DataGridHeaderCell } + +export { dataGridHeaderCellClassNames } + +export { DataGridHeaderCellProps } + +export { DataGridHeaderCellSlots } + +export { DataGridHeaderCellState } + +export { dataGridHeaderClassNames } + +export { DataGridHeaderProps } + +export { DataGridHeaderSlots } + +export { DataGridHeaderState } + +export { DataGridProps } + +export { DataGridRow } + +export { dataGridRowClassNames } + +export { DataGridRowProps } + +export { DataGridRowSlots } + +export { DataGridRowState } + +export { DataGridSelectionCell } + +export { dataGridSelectionCellClassNames } + +export { DataGridSelectionCellProps } + +export { DataGridSelectionCellSlots } + +export { DataGridSelectionCellState } + +export { DataGridSlots } + +export { DataGridState } + export { Dialog } export { DialogActions } @@ -1577,6 +1820,20 @@ export { renderCombobox_unstable } export { renderCompoundButton_unstable } +export { renderDataGrid_unstable } + +export { renderDataGridBody_unstable } + +export { renderDataGridCell_unstable } + +export { renderDataGridHeader_unstable } + +export { renderDataGridHeaderCell_unstable } + +export { renderDataGridRow_unstable } + +export { renderDataGridSelectionCell_unstable } + export { renderDialog_unstable } export { renderDialogActions_unstable } @@ -1665,6 +1922,26 @@ export { renderSwitch_unstable } export { renderTab_unstable } +export { renderTable_unstable } + +export { renderTableBody_unstable } + +export { renderTableCell_unstable } + +export { renderTableCellActions_unstable } + +export { renderTableCellLayout_unstable } + +export { renderTableHeader_unstable } + +export { renderTableHeaderCell_unstable } + +export { renderTableResizeHandle_unstable } + +export { renderTableRow_unstable } + +export { renderTableSelectionCell_unstable } + export { renderTabList_unstable } export { renderText_unstable } @@ -1737,6 +2014,8 @@ export { SlotPropsRecord } export { SlotRenderFunction } +export { SortDirection } + export { SpacingTokens } export { SpinButton } @@ -1809,6 +2088,138 @@ export { Tab } export { tabClassNames } +export { Table } + +export { TableBody } + +export { tableBodyClassName } + +export { tableBodyClassNames } + +export { TableBodyProps } + +export { TableBodySlots } + +export { TableBodyState } + +export { TableCell } + +export { TableCellActions } + +export { tableCellActionsClassNames } + +export { TableCellActionsProps } + +export { TableCellActionsSlots } + +export { TableCellActionsState } + +export { tableCellClassName } + +export { tableCellClassNames } + +export { TableCellLayout } + +export { tableCellLayoutClassNames } + +export { TableCellLayoutProps } + +export { TableCellLayoutSlots } + +export { TableCellLayoutState } + +export { TableCellProps } + +export { TableCellSlots } + +export { TableCellState } + +export { tableClassName } + +export { tableClassNames } + +export { TableColumnDefinition } + +export { TableColumnId } + +export { TableColumnSizingOptions } + +export { TableContextProvider } + +export { TableContextValue } + +export { TableContextValues } + +export { TableFeaturePlugin } + +export { TableFeaturesState } + +export { TableHeader } + +export { TableHeaderCell } + +export { tableHeaderCellClassName } + +export { tableHeaderCellClassNames } + +export { TableHeaderCellProps } + +export { TableHeaderCellSlots } + +export { TableHeaderCellState } + +export { tableHeaderClassName } + +export { tableHeaderClassNames } + +export { TableHeaderProps } + +export { TableHeaderSlots } + +export { TableHeaderState } + +export { TableProps } + +export { TableResizeHandle } + +export { tableResizeHandleClassNames } + +export { TableRow } + +export { tableRowClassName } + +export { tableRowClassNames } + +export { TableRowData } + +export { TableRowId } + +export { TableRowIdContextProvider } + +export { TableRowProps } + +export { TableRowSlots } + +export { TableRowState } + +export { TableSelectionCell } + +export { tableSelectionCellClassNames } + +export { TableSelectionCellProps } + +export { TableSelectionCellSlots } + +export { TableSelectionCellState } + +export { TableSelectionState } + +export { TableSlots } + +export { TableSortState } + +export { TableState } + export { TabList } export { tabListClassNames } @@ -2041,6 +2452,36 @@ export { useCounterBadge_unstable } export { useCounterBadgeStyles_unstable } +export { useDataGrid_unstable } + +export { useDataGridBody_unstable } + +export { useDataGridBodyStyles_unstable } + +export { useDataGridCell_unstable } + +export { useDataGridCellStyles_unstable } + +export { useDataGridContextValues_unstable } + +export { useDataGridHeader_unstable } + +export { useDataGridHeaderCell_unstable } + +export { useDataGridHeaderCellStyles_unstable } + +export { useDataGridHeaderStyles_unstable } + +export { useDataGridRow_unstable } + +export { useDataGridRowStyles_unstable } + +export { useDataGridSelectionCell_unstable } + +export { useDataGridSelectionCellStyles_unstable } + +export { useDataGridStyles_unstable } + export { useDialog_unstable } export { useDialogActions_unstable } @@ -2259,6 +2700,60 @@ export { useSwitchStyles_unstable } export { useTab_unstable } +export { useTable_unstable } + +export { useTableBody_unstable } + +export { useTableBodyStyles_unstable } + +export { useTableCell_unstable } + +export { useTableCellActions_unstable } + +export { useTableCellActionsStyles_unstable } + +export { useTableCellLayout_unstable } + +export { useTableCellLayoutStyles_unstable } + +export { useTableCellStyles_unstable } + +export { useTableColumnSizing_unstable } + +export { useTableContext } + +export { useTableFeatures } + +export { UseTableFeaturesOptions } + +export { useTableHeader_unstable } + +export { useTableHeaderCell_unstable } + +export { useTableHeaderCellStyles_unstable } + +export { useTableHeaderStyles_unstable } + +export { useTableResizeHandle_unstable } + +export { useTableResizeHandleStyles_unstable } + +export { useTableRow_unstable } + +export { useTableRowIdContext } + +export { useTableRowStyles_unstable } + +export { useTableSelection } + +export { useTableSelectionCell_unstable } + +export { useTableSelectionCellStyles_unstable } + +export { useTableSort } + +export { useTableStyles_unstable } + export { useTabList_unstable } export { useTabListContext_unstable } 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 a9b4d3172608aa..f09a35ece978e7 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 @@ -37,45 +37,6 @@ import { CheckboxFieldProps_unstable as CheckboxFieldProps } from '@fluentui/rea import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; import { comboboxFieldClassNames } from '@fluentui/react-combobox'; import { ComboboxFieldProps_unstable as ComboboxFieldProps } from '@fluentui/react-combobox'; -import { createTableColumn } from '@fluentui/react-table'; -import { CreateTableColumnOptions } from '@fluentui/react-table'; -import { DataGrid } from '@fluentui/react-table'; -import { DataGridBody } from '@fluentui/react-table'; -import { dataGridBodyClassNames } from '@fluentui/react-table'; -import { DataGridBodyProps } from '@fluentui/react-table'; -import { DataGridBodySlots } from '@fluentui/react-table'; -import { DataGridBodyState } from '@fluentui/react-table'; -import { DataGridCell } from '@fluentui/react-table'; -import { dataGridCellClassNames } from '@fluentui/react-table'; -import { DataGridCellProps } from '@fluentui/react-table'; -import { DataGridCellSlots } from '@fluentui/react-table'; -import { DataGridCellState } from '@fluentui/react-table'; -import { dataGridClassNames } from '@fluentui/react-table'; -import { DataGridContextValue } from '@fluentui/react-table'; -import { DataGridContextValues } from '@fluentui/react-table'; -import { DataGridHeader } from '@fluentui/react-table'; -import { DataGridHeaderCell } from '@fluentui/react-table'; -import { dataGridHeaderCellClassNames } from '@fluentui/react-table'; -import { DataGridHeaderCellProps } from '@fluentui/react-table'; -import { DataGridHeaderCellSlots } from '@fluentui/react-table'; -import { DataGridHeaderCellState } from '@fluentui/react-table'; -import { dataGridHeaderClassNames } from '@fluentui/react-table'; -import { DataGridHeaderProps } from '@fluentui/react-table'; -import { DataGridHeaderSlots } from '@fluentui/react-table'; -import { DataGridHeaderState } from '@fluentui/react-table'; -import { DataGridProps } from '@fluentui/react-table'; -import { DataGridRow } from '@fluentui/react-table'; -import { dataGridRowClassNames } from '@fluentui/react-table'; -import { DataGridRowProps } from '@fluentui/react-table'; -import { DataGridRowSlots } from '@fluentui/react-table'; -import { DataGridRowState } from '@fluentui/react-table'; -import { DataGridSelectionCell } from '@fluentui/react-table'; -import { dataGridSelectionCellClassNames } from '@fluentui/react-table'; -import { DataGridSelectionCellProps } from '@fluentui/react-table'; -import { DataGridSelectionCellSlots } from '@fluentui/react-table'; -import { DataGridSelectionCellState } from '@fluentui/react-table'; -import { DataGridSlots } from '@fluentui/react-table'; -import { DataGridState } from '@fluentui/react-table'; import { Field } from '@fluentui/react-field'; import { fieldClassNames } from '@fluentui/react-field'; import { FieldProps } from '@fluentui/react-field'; @@ -105,26 +66,9 @@ import { renderCard_unstable } from '@fluentui/react-card'; import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; import { renderCardPreview_unstable } from '@fluentui/react-card'; -import { renderDataGrid_unstable } from '@fluentui/react-table'; -import { renderDataGridBody_unstable } from '@fluentui/react-table'; -import { renderDataGridCell_unstable } from '@fluentui/react-table'; -import { renderDataGridHeader_unstable } from '@fluentui/react-table'; -import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table'; -import { renderDataGridRow_unstable } from '@fluentui/react-table'; -import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table'; import { renderField_unstable } from '@fluentui/react-field'; import { renderInfoButton_unstable } from '@fluentui/react-infobutton'; import { renderProgressBar_unstable } from '@fluentui/react-progress'; -import { renderTable_unstable } from '@fluentui/react-table'; -import { renderTableBody_unstable } from '@fluentui/react-table'; -import { renderTableCell_unstable } from '@fluentui/react-table'; -import { renderTableCellActions_unstable } from '@fluentui/react-table'; -import { renderTableCellLayout_unstable } from '@fluentui/react-table'; -import { renderTableHeader_unstable } from '@fluentui/react-table'; -import { renderTableHeaderCell_unstable } from '@fluentui/react-table'; -import { renderTableResizeHandle_unstable } from '@fluentui/react-table'; -import { renderTableRow_unstable } from '@fluentui/react-table'; -import { renderTableSelectionCell_unstable } from '@fluentui/react-table'; import { renderVirtualizer_unstable } from '@fluentui/react-virtualizer'; import { SelectField_unstable as SelectField } from '@fluentui/react-select'; import { selectFieldClassNames } from '@fluentui/react-select'; @@ -132,79 +76,12 @@ import { SelectFieldProps_unstable as SelectFieldProps } from '@fluentui/react-s import { SliderField_unstable as SliderField } from '@fluentui/react-slider'; import { sliderFieldClassNames } from '@fluentui/react-slider'; import { SliderFieldProps_unstable as SliderFieldProps } from '@fluentui/react-slider'; -import { SortDirection } from '@fluentui/react-table'; import { SpinButtonField_unstable as SpinButtonField } from '@fluentui/react-spinbutton'; import { spinButtonFieldClassNames } from '@fluentui/react-spinbutton'; import { SpinButtonFieldProps_unstable as SpinButtonFieldProps } from '@fluentui/react-spinbutton'; import { SwitchField_unstable as SwitchField } from '@fluentui/react-switch'; import { switchFieldClassNames } from '@fluentui/react-switch'; import { SwitchFieldProps_unstable as SwitchFieldProps } from '@fluentui/react-switch'; -import { Table } from '@fluentui/react-table'; -import { TableBody } from '@fluentui/react-table'; -import { tableBodyClassName } from '@fluentui/react-table'; -import { tableBodyClassNames } from '@fluentui/react-table'; -import { TableBodyProps } from '@fluentui/react-table'; -import { TableBodySlots } from '@fluentui/react-table'; -import { TableBodyState } from '@fluentui/react-table'; -import { TableCell } from '@fluentui/react-table'; -import { TableCellActions } from '@fluentui/react-table'; -import { tableCellActionsClassNames } from '@fluentui/react-table'; -import { TableCellActionsProps } from '@fluentui/react-table'; -import { TableCellActionsSlots } from '@fluentui/react-table'; -import { TableCellActionsState } from '@fluentui/react-table'; -import { tableCellClassName } from '@fluentui/react-table'; -import { tableCellClassNames } from '@fluentui/react-table'; -import { TableCellLayout } from '@fluentui/react-table'; -import { tableCellLayoutClassNames } from '@fluentui/react-table'; -import { TableCellLayoutProps } from '@fluentui/react-table'; -import { TableCellLayoutSlots } from '@fluentui/react-table'; -import { TableCellLayoutState } from '@fluentui/react-table'; -import { TableCellProps } from '@fluentui/react-table'; -import { TableCellSlots } from '@fluentui/react-table'; -import { TableCellState } from '@fluentui/react-table'; -import { tableClassName } from '@fluentui/react-table'; -import { tableClassNames } from '@fluentui/react-table'; -import { TableColumnDefinition } from '@fluentui/react-table'; -import { TableColumnId } from '@fluentui/react-table'; -import { TableColumnSizingOptions } from '@fluentui/react-table'; -import { TableContextProvider } from '@fluentui/react-table'; -import { TableContextValue } from '@fluentui/react-table'; -import { TableContextValues } from '@fluentui/react-table'; -import { TableFeaturePlugin } from '@fluentui/react-table'; -import { TableFeaturesState } from '@fluentui/react-table'; -import { TableHeader } from '@fluentui/react-table'; -import { TableHeaderCell } from '@fluentui/react-table'; -import { tableHeaderCellClassName } from '@fluentui/react-table'; -import { tableHeaderCellClassNames } from '@fluentui/react-table'; -import { TableHeaderCellProps } from '@fluentui/react-table'; -import { TableHeaderCellSlots } from '@fluentui/react-table'; -import { TableHeaderCellState } from '@fluentui/react-table'; -import { tableHeaderClassName } from '@fluentui/react-table'; -import { tableHeaderClassNames } from '@fluentui/react-table'; -import { TableHeaderProps } from '@fluentui/react-table'; -import { TableHeaderSlots } from '@fluentui/react-table'; -import { TableHeaderState } from '@fluentui/react-table'; -import { TableProps } from '@fluentui/react-table'; -import { TableResizeHandle } from '@fluentui/react-table'; -import { tableResizeHandleClassNames } from '@fluentui/react-table'; -import { TableRow } from '@fluentui/react-table'; -import { tableRowClassName } from '@fluentui/react-table'; -import { tableRowClassNames } from '@fluentui/react-table'; -import { TableRowData } from '@fluentui/react-table'; -import { TableRowId } from '@fluentui/react-table'; -import { TableRowIdContextProvider } from '@fluentui/react-table'; -import { TableRowProps } from '@fluentui/react-table'; -import { TableRowSlots } from '@fluentui/react-table'; -import { TableRowState } from '@fluentui/react-table'; -import { TableSelectionCell } from '@fluentui/react-table'; -import { tableSelectionCellClassNames } from '@fluentui/react-table'; -import { TableSelectionCellProps } from '@fluentui/react-table'; -import { TableSelectionCellSlots } from '@fluentui/react-table'; -import { TableSelectionCellState } from '@fluentui/react-table'; -import { TableSelectionState } from '@fluentui/react-table'; -import { TableSlots } from '@fluentui/react-table'; -import { TableSortState } from '@fluentui/react-table'; -import { TableState } from '@fluentui/react-table'; import { TextareaField_unstable as TextareaField } from '@fluentui/react-textarea'; import { textareaFieldClassNames } from '@fluentui/react-textarea'; import { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentui/react-textarea'; @@ -218,21 +95,6 @@ import { useCardHeaderStyles_unstable } from '@fluentui/react-card'; import { useCardPreview_unstable } from '@fluentui/react-card'; import { useCardPreviewStyles_unstable } from '@fluentui/react-card'; import { useCardStyles_unstable } from '@fluentui/react-card'; -import { useDataGrid_unstable } from '@fluentui/react-table'; -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'; -import { useDataGridHeaderStyles_unstable } from '@fluentui/react-table'; -import { useDataGridRow_unstable } from '@fluentui/react-table'; -import { useDataGridRowStyles_unstable } from '@fluentui/react-table'; -import { useDataGridSelectionCell_unstable } from '@fluentui/react-table'; -import { useDataGridSelectionCellStyles_unstable } from '@fluentui/react-table'; -import { useDataGridStyles_unstable } from '@fluentui/react-table'; import { useField_unstable } from '@fluentui/react-field'; import { useFieldStyles_unstable } from '@fluentui/react-field'; import { useInfoButton_unstable } from '@fluentui/react-infobutton'; @@ -240,33 +102,6 @@ import { useInfoButtonStyles_unstable } from '@fluentui/react-infobutton'; import { useIntersectionObserver } from '@fluentui/react-virtualizer'; import { useProgressBar_unstable } from '@fluentui/react-progress'; import { useProgressBarStyles_unstable } from '@fluentui/react-progress'; -import { useTable_unstable } from '@fluentui/react-table'; -import { useTableBody_unstable } from '@fluentui/react-table'; -import { useTableBodyStyles_unstable } from '@fluentui/react-table'; -import { useTableCell_unstable } from '@fluentui/react-table'; -import { useTableCellActions_unstable } from '@fluentui/react-table'; -import { useTableCellActionsStyles_unstable } from '@fluentui/react-table'; -import { useTableCellLayout_unstable } from '@fluentui/react-table'; -import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table'; -import { useTableCellStyles_unstable } from '@fluentui/react-table'; -import { useTableColumnSizing_unstable } from '@fluentui/react-table'; -import { useTableContext } from '@fluentui/react-table'; -import { useTableFeatures } from '@fluentui/react-table'; -import { UseTableFeaturesOptions } from '@fluentui/react-table'; -import { useTableHeader_unstable } from '@fluentui/react-table'; -import { useTableHeaderCell_unstable } from '@fluentui/react-table'; -import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table'; -import { useTableHeaderStyles_unstable } from '@fluentui/react-table'; -import { useTableResizeHandle_unstable } from '@fluentui/react-table'; -import { useTableResizeHandleStyles_unstable } from '@fluentui/react-table'; -import { useTableRow_unstable } from '@fluentui/react-table'; -import { useTableRowIdContext } from '@fluentui/react-table'; -import { useTableRowStyles_unstable } from '@fluentui/react-table'; -import { useTableSelection } from '@fluentui/react-table'; -import { useTableSelectionCell_unstable } from '@fluentui/react-table'; -import { useTableSelectionCellStyles_unstable } from '@fluentui/react-table'; -import { useTableSort } from '@fluentui/react-table'; -import { useTableStyles_unstable } from '@fluentui/react-table'; import { useVirtualizer_unstable } from '@fluentui/react-virtualizer'; import { useVirtualizerStyles_unstable } from '@fluentui/react-virtualizer'; import { Virtualizer } from '@fluentui/react-virtualizer'; @@ -342,84 +177,6 @@ export { comboboxFieldClassNames } export { ComboboxFieldProps } -export { createTableColumn } - -export { CreateTableColumnOptions } - -export { DataGrid } - -export { DataGridBody } - -export { dataGridBodyClassNames } - -export { DataGridBodyProps } - -export { DataGridBodySlots } - -export { DataGridBodyState } - -export { DataGridCell } - -export { dataGridCellClassNames } - -export { DataGridCellProps } - -export { DataGridCellSlots } - -export { DataGridCellState } - -export { dataGridClassNames } - -export { DataGridContextValue } - -export { DataGridContextValues } - -export { DataGridHeader } - -export { DataGridHeaderCell } - -export { dataGridHeaderCellClassNames } - -export { DataGridHeaderCellProps } - -export { DataGridHeaderCellSlots } - -export { DataGridHeaderCellState } - -export { dataGridHeaderClassNames } - -export { DataGridHeaderProps } - -export { DataGridHeaderSlots } - -export { DataGridHeaderState } - -export { DataGridProps } - -export { DataGridRow } - -export { dataGridRowClassNames } - -export { DataGridRowProps } - -export { DataGridRowSlots } - -export { DataGridRowState } - -export { DataGridSelectionCell } - -export { dataGridSelectionCellClassNames } - -export { DataGridSelectionCellProps } - -export { DataGridSelectionCellSlots } - -export { DataGridSelectionCellState } - -export { DataGridSlots } - -export { DataGridState } - export { Field } export { fieldClassNames } @@ -478,46 +235,12 @@ export { renderCardHeader_unstable } export { renderCardPreview_unstable } -export { renderDataGrid_unstable } - -export { renderDataGridBody_unstable } - -export { renderDataGridCell_unstable } - -export { renderDataGridHeader_unstable } - -export { renderDataGridHeaderCell_unstable } - -export { renderDataGridRow_unstable } - -export { renderDataGridSelectionCell_unstable } - export { renderField_unstable } export { renderInfoButton_unstable } export { renderProgressBar_unstable } -export { renderTable_unstable } - -export { renderTableBody_unstable } - -export { renderTableCell_unstable } - -export { renderTableCellActions_unstable } - -export { renderTableCellLayout_unstable } - -export { renderTableHeader_unstable } - -export { renderTableHeaderCell_unstable } - -export { renderTableResizeHandle_unstable } - -export { renderTableRow_unstable } - -export { renderTableSelectionCell_unstable } - export { renderVirtualizer_unstable } export { SelectField } @@ -532,8 +255,6 @@ export { sliderFieldClassNames } export { SliderFieldProps } -export { SortDirection } - export { SpinButtonField } export { spinButtonFieldClassNames } @@ -546,138 +267,6 @@ export { switchFieldClassNames } export { SwitchFieldProps } -export { Table } - -export { TableBody } - -export { tableBodyClassName } - -export { tableBodyClassNames } - -export { TableBodyProps } - -export { TableBodySlots } - -export { TableBodyState } - -export { TableCell } - -export { TableCellActions } - -export { tableCellActionsClassNames } - -export { TableCellActionsProps } - -export { TableCellActionsSlots } - -export { TableCellActionsState } - -export { tableCellClassName } - -export { tableCellClassNames } - -export { TableCellLayout } - -export { tableCellLayoutClassNames } - -export { TableCellLayoutProps } - -export { TableCellLayoutSlots } - -export { TableCellLayoutState } - -export { TableCellProps } - -export { TableCellSlots } - -export { TableCellState } - -export { tableClassName } - -export { tableClassNames } - -export { TableColumnDefinition } - -export { TableColumnId } - -export { TableColumnSizingOptions } - -export { TableContextProvider } - -export { TableContextValue } - -export { TableContextValues } - -export { TableFeaturePlugin } - -export { TableFeaturesState } - -export { TableHeader } - -export { TableHeaderCell } - -export { tableHeaderCellClassName } - -export { tableHeaderCellClassNames } - -export { TableHeaderCellProps } - -export { TableHeaderCellSlots } - -export { TableHeaderCellState } - -export { tableHeaderClassName } - -export { tableHeaderClassNames } - -export { TableHeaderProps } - -export { TableHeaderSlots } - -export { TableHeaderState } - -export { TableProps } - -export { TableResizeHandle } - -export { tableResizeHandleClassNames } - -export { TableRow } - -export { tableRowClassName } - -export { tableRowClassNames } - -export { TableRowData } - -export { TableRowId } - -export { TableRowIdContextProvider } - -export { TableRowProps } - -export { TableRowSlots } - -export { TableRowState } - -export { TableSelectionCell } - -export { tableSelectionCellClassNames } - -export { TableSelectionCellProps } - -export { TableSelectionCellSlots } - -export { TableSelectionCellState } - -export { TableSelectionState } - -export { TableSlots } - -export { TableSortState } - -export { TableState } - export { TextareaField } export { textareaFieldClassNames } @@ -704,36 +293,6 @@ export { useCardPreviewStyles_unstable } export { useCardStyles_unstable } -export { useDataGrid_unstable } - -export { useDataGridBody_unstable } - -export { useDataGridBodyStyles_unstable } - -export { useDataGridCell_unstable } - -export { useDataGridCellStyles_unstable } - -export { useDataGridContextValues_unstable } - -export { useDataGridHeader_unstable } - -export { useDataGridHeaderCell_unstable } - -export { useDataGridHeaderCellStyles_unstable } - -export { useDataGridHeaderStyles_unstable } - -export { useDataGridRow_unstable } - -export { useDataGridRowStyles_unstable } - -export { useDataGridSelectionCell_unstable } - -export { useDataGridSelectionCellStyles_unstable } - -export { useDataGridStyles_unstable } - export { useField_unstable } export { useFieldStyles_unstable } @@ -748,60 +307,6 @@ export { useProgressBar_unstable } export { useProgressBarStyles_unstable } -export { useTable_unstable } - -export { useTableBody_unstable } - -export { useTableBodyStyles_unstable } - -export { useTableCell_unstable } - -export { useTableCellActions_unstable } - -export { useTableCellActionsStyles_unstable } - -export { useTableCellLayout_unstable } - -export { useTableCellLayoutStyles_unstable } - -export { useTableCellStyles_unstable } - -export { useTableColumnSizing_unstable } - -export { useTableContext } - -export { useTableFeatures } - -export { UseTableFeaturesOptions } - -export { useTableHeader_unstable } - -export { useTableHeaderCell_unstable } - -export { useTableHeaderCellStyles_unstable } - -export { useTableHeaderStyles_unstable } - -export { useTableResizeHandle_unstable } - -export { useTableResizeHandleStyles_unstable } - -export { useTableRow_unstable } - -export { useTableRowIdContext } - -export { useTableRowStyles_unstable } - -export { useTableSelection } - -export { useTableSelectionCell_unstable } - -export { useTableSelectionCellStyles_unstable } - -export { useTableSort } - -export { useTableStyles_unstable } - export { useVirtualizer_unstable } export { useVirtualizerStyles_unstable } diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 2ed149a2e4f4fb..2a89d0d2bf70a9 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -852,3 +852,174 @@ export type { ToolbarRadioGroupProps, ToolbarRadioGroupState, } from '@fluentui/react-toolbar'; + +export { + TableCell, + tableCellClassNames, + tableCellClassName, + useTableCellStyles_unstable, + useTableCell_unstable, + renderTableCell_unstable, + TableRow, + tableRowClassNames, + tableRowClassName, + useTableRowStyles_unstable, + useTableRow_unstable, + renderTableRow_unstable, + TableBody, + tableBodyClassName, + tableBodyClassNames, + useTableBodyStyles_unstable, + useTableBody_unstable, + renderTableBody_unstable, + Table, + tableClassName, + tableClassNames, + useTableStyles_unstable, + useTable_unstable, + renderTable_unstable, + TableHeader, + tableHeaderClassNames, + tableHeaderClassName, + useTableHeaderStyles_unstable, + useTableHeader_unstable, + renderTableHeader_unstable, + TableHeaderCell, + tableHeaderCellClassName, + tableHeaderCellClassNames, + useTableHeaderCellStyles_unstable, + useTableHeaderCell_unstable, + renderTableHeaderCell_unstable, + TableResizeHandle, + tableResizeHandleClassNames, + useTableResizeHandleStyles_unstable, + useTableResizeHandle_unstable, + renderTableResizeHandle_unstable, + TableContextProvider, + useTableContext, + TableSelectionCell, + useTableSelectionCellStyles_unstable, + useTableSelectionCell_unstable, + renderTableSelectionCell_unstable, + tableSelectionCellClassNames, + TableCellActions, + useTableCellActionsStyles_unstable, + useTableCellActions_unstable, + renderTableCellActions_unstable, + tableCellActionsClassNames, + TableCellLayout, + useTableCellLayout_unstable, + useTableCellLayoutStyles_unstable, + renderTableCellLayout_unstable, + tableCellLayoutClassNames, + useTableFeatures, + useTableSelection, + useTableSort, + createTableColumn, + DataGridCell, + dataGridCellClassNames, + useDataGridCellStyles_unstable, + useDataGridCell_unstable, + renderDataGridCell_unstable, + DataGridRow, + dataGridRowClassNames, + useDataGridRowStyles_unstable, + useDataGridRow_unstable, + renderDataGridRow_unstable, + DataGridBody, + dataGridBodyClassNames, + useDataGridBodyStyles_unstable, + useDataGridBody_unstable, + renderDataGridBody_unstable, + DataGrid, + dataGridClassNames, + useDataGridStyles_unstable, + useDataGrid_unstable, + renderDataGrid_unstable, + useDataGridContextValues_unstable, + DataGridHeader, + dataGridHeaderClassNames, + useDataGridHeaderStyles_unstable, + useDataGridHeader_unstable, + renderDataGridHeader_unstable, + DataGridHeaderCell, + dataGridHeaderCellClassNames, + useDataGridHeaderCellStyles_unstable, + useDataGridHeaderCell_unstable, + renderDataGridHeaderCell_unstable, + DataGridSelectionCell, + useDataGridSelectionCellStyles_unstable, + useDataGridSelectionCell_unstable, + renderDataGridSelectionCell_unstable, + dataGridSelectionCellClassNames, + TableRowIdContextProvider, + useTableRowIdContext, + useTableColumnSizing_unstable, +} from '@fluentui/react-table'; + +export type { + SortDirection, + TableHeaderCellProps, + TableHeaderCellSlots, + TableHeaderCellState, + TableHeaderProps, + TableHeaderSlots, + TableHeaderState, + TableProps, + TableSlots, + TableState, + TableContextValue, + TableContextValues, + TableBodyProps, + TableBodyState, + TableBodySlots, + TableRowProps, + TableRowState, + TableRowSlots, + TableCellProps, + TableCellState, + TableCellSlots, + TableSelectionCellProps, + TableSelectionCellState, + TableSelectionCellSlots, + TableCellActionsProps, + TableCellActionsState, + TableCellActionsSlots, + TableCellLayoutProps, + TableCellLayoutState, + TableCellLayoutSlots, + UseTableFeaturesOptions, + TableFeaturesState, + TableSelectionState, + TableSortState, + TableFeaturePlugin, + TableRowData, + TableRowId, + TableColumnDefinition, + TableColumnId, + TableColumnSizingOptions, + CreateTableColumnOptions, + DataGridHeaderCellProps, + DataGridHeaderCellSlots, + DataGridHeaderCellState, + DataGridHeaderProps, + DataGridHeaderSlots, + DataGridHeaderState, + DataGridProps, + DataGridSlots, + DataGridState, + DataGridContextValue, + DataGridContextValues, + DataGridBodyProps, + DataGridBodyState, + DataGridBodySlots, + DataGridRowProps, + DataGridRowState, + DataGridRowSlots, + DataGridCellProps, + DataGridCellState, + DataGridCellSlots, + DataGridSelectionCellProps, + DataGridSelectionCellState, + DataGridSelectionCellSlots, +} from '@fluentui/react-table'; diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 9c23a561df6d09..e93bf51db89932 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -56,177 +56,6 @@ export { } from '@fluentui/react-infobutton'; export type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from '@fluentui/react-infobutton'; -export { - TableCell, - tableCellClassNames, - tableCellClassName, - useTableCellStyles_unstable, - useTableCell_unstable, - renderTableCell_unstable, - TableRow, - tableRowClassNames, - tableRowClassName, - useTableRowStyles_unstable, - useTableRow_unstable, - renderTableRow_unstable, - TableBody, - tableBodyClassName, - tableBodyClassNames, - useTableBodyStyles_unstable, - useTableBody_unstable, - renderTableBody_unstable, - Table, - tableClassName, - tableClassNames, - useTableStyles_unstable, - useTable_unstable, - renderTable_unstable, - TableHeader, - tableHeaderClassNames, - tableHeaderClassName, - useTableHeaderStyles_unstable, - useTableHeader_unstable, - renderTableHeader_unstable, - TableHeaderCell, - tableHeaderCellClassName, - tableHeaderCellClassNames, - useTableHeaderCellStyles_unstable, - useTableHeaderCell_unstable, - renderTableHeaderCell_unstable, - TableResizeHandle, - tableResizeHandleClassNames, - useTableResizeHandleStyles_unstable, - useTableResizeHandle_unstable, - renderTableResizeHandle_unstable, - TableContextProvider, - useTableContext, - TableSelectionCell, - useTableSelectionCellStyles_unstable, - useTableSelectionCell_unstable, - renderTableSelectionCell_unstable, - tableSelectionCellClassNames, - TableCellActions, - useTableCellActionsStyles_unstable, - useTableCellActions_unstable, - renderTableCellActions_unstable, - tableCellActionsClassNames, - TableCellLayout, - useTableCellLayout_unstable, - useTableCellLayoutStyles_unstable, - renderTableCellLayout_unstable, - tableCellLayoutClassNames, - useTableFeatures, - useTableSelection, - useTableSort, - createTableColumn, - DataGridCell, - dataGridCellClassNames, - useDataGridCellStyles_unstable, - useDataGridCell_unstable, - renderDataGridCell_unstable, - DataGridRow, - dataGridRowClassNames, - useDataGridRowStyles_unstable, - useDataGridRow_unstable, - renderDataGridRow_unstable, - DataGridBody, - dataGridBodyClassNames, - useDataGridBodyStyles_unstable, - useDataGridBody_unstable, - renderDataGridBody_unstable, - DataGrid, - dataGridClassNames, - useDataGridStyles_unstable, - useDataGrid_unstable, - renderDataGrid_unstable, - useDataGridContextValues_unstable, - DataGridHeader, - dataGridHeaderClassNames, - useDataGridHeaderStyles_unstable, - useDataGridHeader_unstable, - renderDataGridHeader_unstable, - DataGridHeaderCell, - dataGridHeaderCellClassNames, - useDataGridHeaderCellStyles_unstable, - useDataGridHeaderCell_unstable, - renderDataGridHeaderCell_unstable, - DataGridSelectionCell, - useDataGridSelectionCellStyles_unstable, - useDataGridSelectionCell_unstable, - renderDataGridSelectionCell_unstable, - dataGridSelectionCellClassNames, - TableRowIdContextProvider, - useTableRowIdContext, - useTableColumnSizing_unstable, -} from '@fluentui/react-table'; - -export type { - SortDirection, - TableHeaderCellProps, - TableHeaderCellSlots, - TableHeaderCellState, - TableHeaderProps, - TableHeaderSlots, - TableHeaderState, - TableProps, - TableSlots, - TableState, - TableContextValue, - TableContextValues, - TableBodyProps, - TableBodyState, - TableBodySlots, - TableRowProps, - TableRowState, - TableRowSlots, - TableCellProps, - TableCellState, - TableCellSlots, - TableSelectionCellProps, - TableSelectionCellState, - TableSelectionCellSlots, - TableCellActionsProps, - TableCellActionsState, - TableCellActionsSlots, - TableCellLayoutProps, - TableCellLayoutState, - TableCellLayoutSlots, - UseTableFeaturesOptions, - TableFeaturesState, - TableSelectionState, - TableSortState, - TableFeaturePlugin, - TableRowData, - TableRowId, - TableColumnDefinition, - TableColumnId, - TableColumnSizingOptions, - CreateTableColumnOptions, - DataGridHeaderCellProps, - DataGridHeaderCellSlots, - DataGridHeaderCellState, - DataGridHeaderProps, - DataGridHeaderSlots, - DataGridHeaderState, - DataGridProps, - DataGridSlots, - DataGridState, - DataGridContextValue, - DataGridContextValues, - DataGridBodyProps, - DataGridBodyState, - DataGridBodySlots, - DataGridRowProps, - DataGridRowState, - DataGridRowSlots, - DataGridCellProps, - DataGridCellState, - DataGridCellSlots, - DataGridSelectionCellProps, - DataGridSelectionCellState, - DataGridSelectionCellSlots, -} from '@fluentui/react-table'; - // eslint-disable-next-line deprecation/deprecation export { CheckboxField_unstable as CheckboxField, checkboxFieldClassNames } from '@fluentui/react-checkbox'; // eslint-disable-next-line deprecation/deprecation diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json index d7f62ea4cf4de9..822f1c95c98f9b 100644 --- a/packages/react-components/react-table/package.json +++ b/packages/react-components/react-table/package.json @@ -54,9 +54,7 @@ }, "beachball": { "disallowedChangeTypes": [ - "major", - "minor", - "patch" + "major" ] }, "exports": { diff --git a/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx b/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx index 3c66bedf2c4698..a6c295044892fe 100644 --- a/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/CustomRowId.stories.tsx @@ -8,8 +8,10 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Checkbox } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + Checkbox, DataGridBody, DataGridRow, DataGrid, @@ -22,7 +24,7 @@ import { createTableColumn, TableRowId, DataGridProps, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md b/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md index cef0d30960664a..2168d54134bede 100644 --- a/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md +++ b/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md @@ -1,16 +1,3 @@ - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { DataGrid } from '@fluentui/react-components/unstable'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product - > 💡 This component is a higher level extension of the `Table` primitive components and the `useTableFeatures` hook. > `DataGrid` is a feature-rich component that uses `useTableFeatures` internally, > so there should always be full feature parity with what can be diff --git a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx index 5a724facedba06..3865ec8a81f4f5 100644 --- a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx index 77928fe81bfb27..4b95f252b8ce1b 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx index 5d4e93587ce928..3a7b6cf9804d3d 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -21,7 +22,7 @@ import { createTableColumn, TableRowId, DataGridProps, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx index b9f8ed53555065..6ca8544ec42ae1 100644 --- a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx index 9170cdca12e4c2..022c4ad27e9c59 100644 --- a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx index 2d285a469028b9..2a96b1d320aaef 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx index 24cdff64972350..a76b098875083a 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -21,7 +22,7 @@ import { createTableColumn, TableRowId, DataGridProps, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx index aa4ca44db08571..eded2308b06704 100644 --- a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -20,7 +21,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx index e0dce13035caec..46eb41a9791363 100644 --- a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -20,7 +21,7 @@ import { TableColumnDefinition, createTableColumn, DataGridProps, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx index b4a5d029615deb..1bef43217f5204 100644 --- a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, DataGridBody, DataGridRow, DataGrid, @@ -19,7 +20,7 @@ import { TableCellLayout, TableColumnDefinition, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; 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 117c799f8e8229..db3b5bcd4ce849 100644 --- a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx @@ -8,8 +8,15 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, useScrollbarWidth, useFluent } from '@fluentui/react-components'; -import { TableColumnDefinition, createTableColumn, TableCellLayout } from '@fluentui/react-components/unstable'; +import { + TableColumnDefinition, + createTableColumn, + TableCellLayout, + PresenceBadgeStatus, + Avatar, + useScrollbarWidth, + useFluent, +} from '@fluentui/react-components'; import { DataGridBody, DataGrid, diff --git a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx index 52291642cfe332..717f6689aad2fd 100644 --- a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx @@ -6,7 +6,7 @@ import { DataGridRow, DataGridCell, DataGridSelectionCell, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; import descriptionMd from './DataGridDescription.md'; export { Default } from './Default.stories'; @@ -23,7 +23,7 @@ export { Virtualization } from './Virtualization.stories'; export { CustomRowId } from './CustomRowId.stories'; export default { - title: 'Preview Components/DataGrid', + title: 'Components/DataGrid', component: DataGrid, subcomponents: { DataGridHeader, diff --git a/packages/react-components/react-table/stories/Table/CellActions.stories.tsx b/packages/react-components/react-table/stories/Table/CellActions.stories.tsx index d3b6cb41cf2c88..19007d5190f3c6 100644 --- a/packages/react-components/react-table/stories/Table/CellActions.stories.tsx +++ b/packages/react-components/react-table/stories/Table/CellActions.stories.tsx @@ -12,7 +12,6 @@ import { MoreHorizontalFilled, bundleIcon, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Button } from '@fluentui/react-components'; import { TableBody, TableCell, @@ -22,7 +21,10 @@ import { TableHeaderCell, TableCellActions, TableCellLayout, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, + Button, +} from '@fluentui/react-components'; const EditIcon = bundleIcon(EditFilled, EditRegular); const MoreHorizontalIcon = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular); diff --git a/packages/react-components/react-table/stories/Table/CellNavigation.stories.tsx b/packages/react-components/react-table/stories/Table/CellNavigation.stories.tsx index fe0f962006373f..c566d33007a799 100644 --- a/packages/react-components/react-table/stories/Table/CellNavigation.stories.tsx +++ b/packages/react-components/react-table/stories/Table/CellNavigation.stories.tsx @@ -8,7 +8,6 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Button, useArrowNavigationGroup } from '@fluentui/react-components'; import { TableBody, TableCell, @@ -17,7 +16,11 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, + Button, + useArrowNavigationGroup, +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx index 5dbfe96f3397c8..d92470b14fa15e 100644 --- a/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx +++ b/packages/react-components/react-table/stories/Table/DataGrid.stories.tsx @@ -8,7 +8,6 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, useArrowNavigationGroup } from '@fluentui/react-components'; import { TableBody, TableCell, @@ -24,7 +23,10 @@ import { useTableSort, createTableColumn, TableColumnId, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, + useArrowNavigationGroup, +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/Default.stories.tsx b/packages/react-components/react-table/stories/Table/Default.stories.tsx index 7899b90031f419..78daab0dd384b4 100644 --- a/packages/react-components/react-table/stories/Table/Default.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Default.stories.tsx @@ -8,7 +8,6 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { TableBody, TableCell, @@ -17,7 +16,9 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/Memoization.stories.tsx b/packages/react-components/react-table/stories/Table/Memoization.stories.tsx index c0cdb3f0d0952b..815c9404ee10f0 100644 --- a/packages/react-components/react-table/stories/Table/Memoization.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Memoization.stories.tsx @@ -8,8 +8,10 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, useArrowNavigationGroup } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + useArrowNavigationGroup, TableBody, TableCell, TableRow, @@ -27,7 +29,7 @@ import { TableRowId, TableRowProps, TableSelectionState, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx index 1572f37d364038..96419bb245eb30 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelect.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -22,7 +23,7 @@ import { TableColumnDefinition, useTableSelection, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx index 8363bf6efcafb8..518397d00bda2a 100644 --- a/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/MultipleSelectControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -23,7 +24,7 @@ import { TableRowId, useTableSelection, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/NonNativeElements.stories.tsx b/packages/react-components/react-table/stories/Table/NonNativeElements.stories.tsx index 5749d2dfb0b261..2d8d173e1c3cb0 100644 --- a/packages/react-components/react-table/stories/Table/NonNativeElements.stories.tsx +++ b/packages/react-components/react-table/stories/Table/NonNativeElements.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -17,7 +18,7 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/PrimaryCell.stories.tsx b/packages/react-components/react-table/stories/Table/PrimaryCell.stories.tsx index 7b9ed0c1990a21..94edecce333baa 100644 --- a/packages/react-components/react-table/stories/Table/PrimaryCell.stories.tsx +++ b/packages/react-components/react-table/stories/Table/PrimaryCell.stories.tsx @@ -12,8 +12,10 @@ import { MoreHorizontalFilled, bundleIcon, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Button } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + Button, TableBody, TableCell, TableRow, @@ -22,7 +24,7 @@ import { TableHeaderCell, TableCellActions, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const EditIcon = bundleIcon(EditFilled, EditRegular); const MoreHorizontalIcon = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular); diff --git a/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx b/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx index 6f282edbc2e2e8..0d19f8da0f55ce 100644 --- a/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx @@ -13,7 +13,12 @@ import { useTableFeatures, useTableSort, TableColumnSizingOptions, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, + Button, + Input, + Label, +} from '@fluentui/react-components'; import { DocumentRegular, EditRegular, @@ -25,8 +30,6 @@ import { } from '@fluentui/react-icons'; import * as React from 'react'; import { useState } from 'react'; -import { PresenceBadgeStatus } from '../../../react-badge/src'; -import { Avatar, Button, Input, Label } from '@fluentui/react-components'; const columnsDef: TableColumnDefinition[] = [ createTableColumn({ diff --git a/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx b/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx index 09b296a876d35d..c2849f8c5373ea 100644 --- a/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx @@ -1,4 +1,4 @@ -import { Avatar, Input } from '@fluentui/react-components'; +import * as React from 'react'; import { Table, TableBody, @@ -12,7 +12,10 @@ import { createTableColumn, useTableColumnSizing_unstable, useTableFeatures, -} from '@fluentui/react-components/unstable'; + PresenceBadgeStatus, + Avatar, + Input, +} from '@fluentui/react-components'; import { DocumentPdfRegular, DocumentRegular, @@ -22,9 +25,6 @@ import { PeopleRegular, VideoRegular, } from '@fluentui/react-icons'; -import * as React from 'react'; -import { useState } from 'react'; -import { PresenceBadgeStatus } from '../../../react-badge/src'; const columnsDef: TableColumnDefinition[] = [ createTableColumn({ @@ -112,8 +112,8 @@ const items: Item[] = [ ]; export const ResizableColumnsUncontrolled = () => { - const [columns] = useState[]>(columnsDef); - const [columnSizingOptions] = useState({ + const [columns] = React.useState[]>(columnsDef); + const [columnSizingOptions] = React.useState({ file: { idealWidth: 300, minWidth: 190, @@ -136,7 +136,7 @@ export const ResizableColumnsUncontrolled = () => { [useTableColumnSizing_unstable({ columnSizingOptions })], ); - const [inputValue, setInputValue] = useState('300'); + const [inputValue, setInputValue] = React.useState('300'); const onWidthChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); diff --git a/packages/react-components/react-table/stories/Table/RowNavigation.stories.tsx b/packages/react-components/react-table/stories/Table/RowNavigation.stories.tsx index d02a5c01bc41cd..27c6d652971c11 100644 --- a/packages/react-components/react-table/stories/Table/RowNavigation.stories.tsx +++ b/packages/react-components/react-table/stories/Table/RowNavigation.stories.tsx @@ -8,8 +8,11 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Button, useArrowNavigationGroup } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + Button, + useArrowNavigationGroup, TableBody, TableCell, TableRow, @@ -17,7 +20,7 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/SelectionWithCellActions.stories.tsx b/packages/react-components/react-table/stories/Table/SelectionWithCellActions.stories.tsx index ebda4384111d0c..d22fd7f3f4f249 100644 --- a/packages/react-components/react-table/stories/Table/SelectionWithCellActions.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SelectionWithCellActions.stories.tsx @@ -12,8 +12,10 @@ import { MoreHorizontalRegular, bundleIcon, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, Button } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + Button, TableBody, TableCell, TableRow, @@ -27,7 +29,7 @@ import { useTableSelection, createTableColumn, TableCellActions, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const EditIcon = bundleIcon(EditFilled, EditRegular); const MoreHorizontalIcon = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular); diff --git a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx index 9ac3aea9599fce..dbd5392eb95849 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelect.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -22,7 +23,7 @@ import { useTableSelection, TableCellLayout, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx index b5995c4debcbfa..0fa0ac74e67fdd 100644 --- a/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SingleSelectControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -23,7 +24,7 @@ import { useTableSelection, TableCellLayout, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/SizeExtraSmall.stories.tsx b/packages/react-components/react-table/stories/Table/SizeExtraSmall.stories.tsx index 2b5829b7ae50a0..25ec30521c9e3b 100644 --- a/packages/react-components/react-table/stories/Table/SizeExtraSmall.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SizeExtraSmall.stories.tsx @@ -8,8 +8,8 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { Avatar } from '@fluentui/react-components'; import { + Avatar, TableBody, TableCell, TableRow, @@ -17,7 +17,7 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/SizeSmall.stories.tsx b/packages/react-components/react-table/stories/Table/SizeSmall.stories.tsx index ad37a7b8a5a8f3..d12db822031d31 100644 --- a/packages/react-components/react-table/stories/Table/SizeSmall.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SizeSmall.stories.tsx @@ -8,8 +8,8 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { Avatar } from '@fluentui/react-components'; import { + Avatar, TableBody, TableCell, TableRow, @@ -17,7 +17,7 @@ import { TableHeader, TableHeaderCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; const items = [ { diff --git a/packages/react-components/react-table/stories/Table/Sort.stories.tsx b/packages/react-components/react-table/stories/Table/Sort.stories.tsx index a4cf7e1e12ac54..eb821cd7010f3b 100644 --- a/packages/react-components/react-table/stories/Table/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Sort.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -22,7 +23,7 @@ import { useTableSort, TableCellLayout, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx index e56be5f1169386..0735832cbd5bc7 100644 --- a/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SortControlled.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -22,7 +23,7 @@ import { useTableSort, TableCellLayout, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx index bfd27d3422ca44..bf3917f7094e64 100644 --- a/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/Table/SubtleSelection.stories.tsx @@ -8,8 +8,9 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, TableBody, TableCell, TableRow, @@ -22,7 +23,7 @@ import { TableColumnDefinition, useTableSelection, createTableColumn, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type FileCell = { label: string; diff --git a/packages/react-components/react-table/stories/Table/TableDescription.md b/packages/react-components/react-table/stories/Table/TableDescription.md index 158016a0351e8d..58f2f7e08a9dde 100644 --- a/packages/react-components/react-table/stories/Table/TableDescription.md +++ b/packages/react-components/react-table/stories/Table/TableDescription.md @@ -1,16 +1,3 @@ - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { Table } from '@fluentui/react-components/unstable'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product - > 💡 This component is considered **low-level** and should be used when there is a need for more **customization** and > support for **non-standard features**. Please check out the **DataGrid component** > if you don't need lots of customization and rely on common features. There is less work involved and you will benefit diff --git a/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx b/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx index d1bde9c1c7fa4a..7afa202f5af480 100644 --- a/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx +++ b/packages/react-components/react-table/stories/Table/Virtualization.stories.tsx @@ -9,8 +9,11 @@ import { DocumentPdfRegular, VideoRegular, } from '@fluentui/react-icons'; -import { PresenceBadgeStatus, Avatar, useScrollbarWidth, useFluent } from '@fluentui/react-components'; import { + PresenceBadgeStatus, + Avatar, + useScrollbarWidth, + useFluent, TableBody, TableCell, TableRow, @@ -23,7 +26,7 @@ import { useTableFeatures, useTableSelection, TableRowData as RowStateBase, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; type Item = { file: { diff --git a/packages/react-components/react-table/stories/Table/index.stories.tsx b/packages/react-components/react-table/stories/Table/index.stories.tsx index f6c4307ec11046..c7d66dccb6a291 100644 --- a/packages/react-components/react-table/stories/Table/index.stories.tsx +++ b/packages/react-components/react-table/stories/Table/index.stories.tsx @@ -7,7 +7,7 @@ import { TableCell, TableSelectionCell, TableCellLayout, -} from '@fluentui/react-components/unstable'; +} from '@fluentui/react-components'; import descriptionMd from './TableDescription.md'; export { Default } from './Default.stories'; @@ -35,7 +35,7 @@ export { DataGrid } from './DataGrid.stories'; export { Memoization } from './Memoization.stories'; export default { - title: 'Preview Components/Table', + title: 'Components/Table', component: Table, subcomponents: { TableHeader,