Rename Table -> TableView, skip some codemods for now (#7118)

Author: devongovett

packages/@react-spectrum/s2/chromatic/Table.stories.tsx renamed to packages/@react-spectrum/s2/chromatic/TableView.stories.tsx

@@ -11,16 +11,16 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, Table, TableBody, TableHeader} from '../src';
+import {Cell, Column, Content, Heading, IllustratedMessage, Link, Row, TableBody, TableHeader, TableView} from '../src';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
 import type {Meta} from '@storybook/react';
 import {SortDescriptor} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useAsyncList} from '@react-stately/data';
 import {useState} from 'react';
 
-const meta: Meta<typeof Table> = {
-  component: Table,
+const meta: Meta<typeof TableView> = {
+  component: TableView,
   parameters: {
     chromaticProvider: {disableAnimations: true}
   },
@@ -30,7 +30,7 @@ const meta: Meta<typeof Table> = {
 export default meta;
 
 const StaticTable = (args: any) => (
-  <Table aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
+  <TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
     <TableHeader>
       <Column isRowHeader>Name</Column>
       <Column>Type</Column>
@@ -61,7 +61,7 @@ const StaticTable = (args: any) => (
         <Cell>Long long long long long long long cell</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 );
 
 export const Example = {
@@ -104,7 +104,7 @@ let items = [
 ];
 
 const DynamicTable = (args: any) => (
-  <Table aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
+  <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
     <TableHeader columns={columns}>
       {(column) => (
         <Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -119,7 +119,7 @@ const DynamicTable = (args: any) => (
         </Row>
       )}
     </TableBody>
-  </Table>
+  </TableView>
 );
 
 export const Dynamic = {
@@ -145,7 +145,7 @@ function renderEmptyState() {
 }
 
 const EmptyStateTable = (args: any) => (
-  <Table aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
+  <TableView aria-label="Empty state" {...args} styles={style({height: 320, width: 320})}>
     <TableHeader columns={columns}>
       {(column) => (
         <Column minWidth={200} width={200} isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -154,7 +154,7 @@ const EmptyStateTable = (args: any) => (
     <TableBody items={[]} renderEmptyState={renderEmptyState}>
       {[]}
     </TableBody>
-  </Table>
+  </TableView>
 );
 
 export const EmptyState = {
@@ -173,7 +173,7 @@ let dividerColumns = [
 
 const ShowDividers = (args: any) => {
   return (
-    <Table aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
+    <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={dividerColumns}>
         {(column) => (
           <Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -188,7 +188,7 @@ const ShowDividers = (args: any) => {
           </Row>
         )}
       </TableBody>
-    </Table>
+    </TableView>
   );
 };
 
@@ -209,7 +209,7 @@ let alignColumns = [
 
 const TextAlign = (args: any) => {
   return (
-    <Table aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
+    <TableView aria-label="Show Dividers table" {...args} styles={style({width: 320, height: 208})}>
       <TableHeader columns={alignColumns}>
         {(column) => (
           <Column width={150} minWidth={150} isRowHeader={column.isRowHeader} align={column?.align as 'start' | 'center' | 'end'}>{column.name}</Column>
@@ -224,7 +224,7 @@ const TextAlign = (args: any) => {
           </Row>
         )}
       </TableBody>
-    </Table>
+    </TableView>
   );
 };
 
@@ -262,7 +262,7 @@ const OnLoadMoreTable = (args: any) => {
   });
 
   return (
-    <Table {...args} aria-label="Load more table" loadingState={list.loadingState} onLoadMore={list.loadMore} styles={style({width: 320, height: 320})}>
+    <TableView {...args} aria-label="Load more table" loadingState={list.loadingState} onLoadMore={list.loadMore} styles={style({width: 320, height: 320})}>
       <TableHeader>
         <Column id="name" isRowHeader>Name</Column>
         <Column id="height">Height</Column>
@@ -280,7 +280,7 @@ const OnLoadMoreTable = (args: any) => {
           </Row>
         )}
       </TableBody>
-    </Table>
+    </TableView>
   );
 };
 
@@ -340,7 +340,7 @@ const SortableTable = (args: any) => {
   };
 
   return (
-    <Table aria-label="sortable table" {...args} sortDescriptor={sortDescriptor} onSortChange={onSortChange} styles={style({height: 320})}>
+    <TableView aria-label="sortable table" {...args} sortDescriptor={sortDescriptor} onSortChange={onSortChange} styles={style({height: 320})}>
       <TableHeader columns={sortcolumns}>
         {(column) => (
           <Column isRowHeader={column.isRowHeader} allowsSorting>{column.name}</Column>
@@ -355,7 +355,7 @@ const SortableTable = (args: any) => {
           </Row>
         )}
       </TableBody>
-    </Table>
+    </TableView>
   );
 };
 
@@ -391,7 +391,7 @@ const SortableResizableTable = (args: any) => {
   };
 
   return (
-    <Table aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
+    <TableView aria-label="sortable table" {...args} sortDescriptor={isSortable ? sortDescriptor : null} onSortChange={isSortable ? onSortChange : null} styles={style({width: 384, height: 320})}>
       <TableHeader columns={args.columns}>
         {(column: any) => (
           <Column isRowHeader={column.isRowHeader} allowsSorting={column.isSortable} allowsResizing={column.allowsResizing} align={column.align}>{column.name}</Column>
@@ -406,7 +406,7 @@ const SortableResizableTable = (args: any) => {
           </Row>
         )}
       </TableBody>
-    </Table>
+    </TableView>
   );
 };
 

packages/@react-spectrum/s2/src/Table.tsx renamed to packages/@react-spectrum/s2/src/TableView.tsx

@@ -105,12 +105,12 @@ interface S2TableProps {
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
-export interface TableProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
+export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
 
-let InternalTableContext = createContext<TableProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});
+let InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});
 
 const tableWrapper = style({
   minHeight: 0,
@@ -251,7 +251,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
   }
 }
 
-function Table(props: TableProps, ref: DOMRef<HTMLDivElement>) {
+function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   let {
     UNSAFE_style,
     UNSAFE_className,
@@ -1106,5 +1106,5 @@ export function Row<T extends object>({id, columns, children, ...otherProps}: Ro
 /**
  * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */
-const _Table = forwardRef(Table);
-export {_Table as Table};
+const _TableView = forwardRef(TableView);
+export {_TableView as TableView};

packages/@react-spectrum/s2/src/index.ts

@@ -63,7 +63,7 @@ export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
 export {StatusLight, StatusLightContext} from './StatusLight';
 export {Switch, SwitchContext} from './Switch';
-export {Table, TableHeader, TableBody, Row, Cell, Column} from './Table';
+export {TableView, TableHeader, TableBody, Row, Cell, Column} from './TableView';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
@@ -124,7 +124,7 @@ export type {SkeletonProps} from './Skeleton';
 export type {SkeletonCollectionProps} from './SkeletonCollection';
 export type {StatusLightProps} from './StatusLight';
 export type {SwitchProps} from './Switch';
-export type {TableProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './Table';
+export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, ColumnProps} from './TableView';
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
 export type {TagGroupProps, TagProps} from './TagGroup';
 export type {TextFieldProps, TextAreaProps} from './TextField';