microsoft · ling1726 · Jan 9, 2023 · Jan 6, 2023 · Jan 6, 2023
diff --git a/change/@fluentui-react-table-44e1732b-738d-495e-ac5b-8af6d9ab148b.json b/change/@fluentui-react-table-44e1732b-738d-495e-ac5b-8af6d9ab148b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: Cleanup unused code",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -436,7 +436,9 @@ export type TableRowSlots = {
 };
 
 // @public
-export type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'> & Pick<Required<TableRowProps>, 'appearance'>;
+export type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'> & Pick<Required<TableRowProps>, 'appearance'> & {
+    isHeaderRow: boolean;
+};
 
 // @public
 export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
@@ -445,7 +447,7 @@ export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
 export const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots>;
 
 // @public
-export type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
+export type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {
     type?: 'checkbox' | 'radio';
     checked?: CheckboxProps['checked'];
     subtle?: boolean;

@@ -7,7 +7,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useDataGridContextValues_unstable } from './useDataGridContextValues';
 
 /**
- * DataGrid component - TODO: add more docs
+ * DataGrid component
  */
 export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {
   const state = useDataGrid_unstable(props, ref);

@@ -6,7 +6,7 @@ import type { DataGridBodyProps } from './DataGridBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridBody component - TODO: add more docs
+ * DataGridBody component
  */
 export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
   const state = useDataGridBody_unstable(props, ref);

@@ -6,7 +6,7 @@ import type { DataGridCellProps } from './DataGridCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridCell component - TODO: add more docs
+ * DataGridCell component
  */
 export const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {
   const state = useDataGridCell_unstable(props, ref);

@@ -10,8 +10,6 @@ describe('DataGridHeader', () => {
     displayName: 'DataGridHeader',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<DataGridHeader>Default DataGridHeader</DataGridHeader>);
     expect(result.container).toMatchSnapshot();

@@ -6,7 +6,7 @@ import type { DataGridHeaderProps } from './DataGridHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridHeader component - TODO: add more docs
+ * DataGridHeader component
  */
 export const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> = React.forwardRef((props, ref) => {
   const state = useDataGridHeader_unstable(props, ref);

@@ -22,8 +22,6 @@ describe('DataGridHeaderCell', () => {
     },
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<DataGridHeaderCell>Default DataGridHeaderCell</DataGridHeaderCell>);
     expect(result.container).toMatchSnapshot();

@@ -6,7 +6,7 @@ import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridHeaderCell component - TODO: add more docs
+ * DataGridHeaderCell component
  */
 export const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps> = React.forwardRef((props, ref) => {
   const state = useDataGridHeaderCell_unstable(props, ref);

@@ -6,7 +6,7 @@ import type { DataGridRowProps } from './DataGridRow.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridRow component - TODO: add more docs
+ * DataGridRow component
  */
 export const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {
   const state = useDataGridRow_unstable(props, ref);

@@ -6,7 +6,7 @@ import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * DataGridSelectionCell component - TODO: add more docs
+ * DataGridSelectionCell component
  */
 export const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {
   const state = useDataGridSelectionCell_unstable(props, ref);

@@ -13,8 +13,6 @@ describe('Table', () => {
     displayName: 'Table',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(
       <Table>

@@ -7,7 +7,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useTableContextValues_unstable } from './useTableContextValues';
 
 /**
- * Table component - TODO: add more docs
+ * Table component
  */
 export const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {
   const state = useTable_unstable(props, ref);

@@ -18,8 +18,6 @@ describe('TableBody', () => {
     },
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(
       <TableBody>

@@ -6,7 +6,7 @@ import type { TableBodyProps } from './TableBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableBody component - TODO: add more docs
+ * TableBody component
  */
 export const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {
   const state = useTableBody_unstable(props, ref);

@@ -8,6 +8,5 @@ import type { TableBodyState, TableBodySlots } from './TableBody.types';
 export const renderTableBody_unstable = (state: TableBodyState) => {
   const { slots, slotProps } = getSlots<TableBodySlots>(state);
 
-  // TODO Add additional slots in the appropriate place
   return <slots.root {...slotProps.root} />;
 };
@@ -19,8 +19,6 @@ describe('TableCell', () => {
     displayName: 'TableCell',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<TableCell>Default TableCell</TableCell>, { container: tr });
     expect(result.container).toMatchSnapshot();

@@ -6,7 +6,7 @@ import type { TableCellProps } from './TableCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableCell component - TODO: add more docs
+ * TableCell component
  */
 export const TableCell: ForwardRefComponent<TableCellProps> = React.forwardRef((props, ref) => {
   const state = useTableCell_unstable(props, ref);

@@ -9,8 +9,6 @@ describe('TableCellActions', () => {
     displayName: 'TableCellActions',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<TableCellActions>Default TableCellActions</TableCellActions>);
     expect(result.container).toMatchSnapshot();

@@ -6,7 +6,7 @@ import type { TableCellActionsProps } from './TableCellActions.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableCellActions component - TODO: add more docs
+ * TableCellActions component
  */
 export const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {
   const state = useTableCellActions_unstable(props, ref);

@@ -8,6 +8,5 @@ import type { TableCellActionsState, TableCellActionsSlots } from './TableCellAc
 export const renderTableCellActions_unstable = (state: TableCellActionsState) => {
   const { slots, slotProps } = getSlots<TableCellActionsSlots>(state);
 
-  // TODO Add additional slots in the appropriate place
   return <slots.root {...slotProps.root} />;
 };
@@ -7,7 +7,7 @@ import type { TableCellLayoutProps } from './TableCellLayout.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableCellLayout component - TODO: add more docs
+ * TableCellLayout component
  */
 export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {
   const state = useTableCellLayout_unstable(props, ref);

@@ -18,8 +18,6 @@ describe('TableHeader', () => {
     },
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(
       <TableHeader>

@@ -6,7 +6,7 @@ import type { TableHeaderProps } from './TableHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableHeader component - TODO: add more docs
+ * TableHeader component
  */
 export const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {
   const state = useTableHeader_unstable(props, ref);

@@ -11,14 +11,6 @@ const useFlexLayoutStyles = makeStyles({
   root: {
     display: 'block',
   },
-
-  roottable: {
-    display: 'table-row-group',
-  },
-
-  rootFlex: {
-    display: 'block',
-  },
 });
 
 const useTableLayoutStyles = makeStyles({

@@ -6,7 +6,7 @@ import type { TableHeaderCellProps } from './TableHeaderCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableHeaderCell component - TODO: add more docs
+ * TableHeaderCell component
  */
 export const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {
   const state = useTableHeaderCell_unstable(props, ref);

@@ -20,8 +20,6 @@ describe('TableRow', () => {
     displayName: 'TableRow',
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(
       <TableRow>

@@ -6,7 +6,7 @@ import type { TableRowProps } from './TableRow.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableRow component - TODO: add more docs
+ * TableRow component
  */
 export const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {
   const state = useTableRow_unstable(props, ref);

@@ -22,4 +22,6 @@ export type TableRowProps = ComponentProps<TableRowSlots> & {
  */
 export type TableRowState = ComponentState<TableRowSlots> &
   Pick<TableContextValue, 'noNativeElements' | 'size'> &
-  Pick<Required<TableRowProps>, 'appearance'>;
+  Pick<Required<TableRowProps>, 'appearance'> & {
+    isHeaderRow: boolean;
+  };
@@ -8,6 +8,5 @@ import type { TableRowState, TableRowSlots } from './TableRow.types';
 export const renderTableRow_unstable = (state: TableRowState) => {
   const { slots, slotProps } = getSlots<TableRowSlots>(state);
 
-  // TODO Add additional slots in the appropriate place
   return <slots.root {...slotProps.root} />;
 };
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
 import type { TableRowProps, TableRowState } from './TableRow.types';
 import { useTableContext } from '../../contexts/tableContext';
-import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 
 /**
  * Create the state required to render TableRow.
@@ -18,6 +19,7 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLEl
   const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';
   const focusVisibleRef = useFocusVisible();
   const focusWithinRef = useFocusWithin();
+  const isHeaderRow = useIsInTableHeader();
 
   return {
     components: {
@@ -31,5 +33,6 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLEl
     size,
     noNativeElements,
     appearance: props.appearance ?? 'none',
+    isHeaderRow,
   };
 };
@@ -5,7 +5,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';
 import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 
 export const tableRowClassName = 'fui-TableRow';
 export const tableRowClassNames: SlotClassNames<TableRowSlots> = {
@@ -151,7 +150,6 @@ const useStyles = makeStyles({
  * Apply styling to the TableRow slots based on the state
  */
 export const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {
-  const isHeaderRow = useIsInTableHeader();
   const styles = useStyles();
   const layoutStyles = {
     table: useTableLayoutStyles(),
@@ -160,11 +158,11 @@ export const useTableRowStyles_unstable = (state: TableRowState): TableRowState
   state.root.className = mergeClasses(
     tableRowClassNames.root,
     styles.root,
-    !isHeaderRow && styles.rootInteractive,
+    !state.isHeaderRow && styles.rootInteractive,
     styles[state.size],
     state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
     styles[state.appearance],
-    state.appearance === 'none' && !isHeaderRow && styles.noAppearanceFocusWithin,
+    state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin,
     state.root.className,
   );
 

@@ -6,7 +6,7 @@ import type { TableSelectionCellProps } from './TableSelectionCell.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * TableSelectionCell component - TODO: add more docs
+ * TableSelectionCell component
  */
 export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {
   const state = useTableSelectionCell_unstable(props, ref);

@@ -18,7 +18,7 @@ export type TableSelectionCellSlots = {
 /**
  * TableSelectionCell Props
  */
-export type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {
+export type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {
   /**
    * A table can have two kinds of selection modes.
    * @default checkbox