Fix Picker and ComboBox press state, Table types + docs (#7086)

* Fix ComboBox and Picker getting stuck in down state

* Fix table types and export from package

Author: devongovett

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -263,6 +263,9 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldR
               {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
               <Button
                 ref={buttonRef}
+                // Prevent press scale from sticking while ComboBox is open.
+                // @ts-ignore
+                isPressed={false}
                 style={renderProps => pressScale(buttonRef)(renderProps)}
                 className={renderProps => inputButton({
                   ...renderProps,

packages/@react-spectrum/s2/src/Picker.tsx

@@ -285,6 +285,9 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
             <Button
               ref={domRef}
               style={renderProps => pressScale(domRef)(renderProps)}
+              // Prevent press scale from sticking while Picker is open.
+              // @ts-ignore
+              isPressed={false}
               className={renderProps => inputButton({
                 ...renderProps,
                 size: size,

packages/@react-spectrum/s2/src/Table.tsx

@@ -29,11 +29,11 @@ import {
   TableBody as RACTableBody,
   TableBodyProps as RACTableBodyProps,
   TableHeader as RACTableHeader,
+  TableHeaderProps as RACTableHeaderProps,
   TableProps as RACTableProps,
   ResizableTableContainer,
   RowRenderProps,
   TableBodyRenderProps,
-  TableHeaderProps,
   TableRenderProps,
   UNSTABLE_TableLayout,
   UNSTABLE_TableLoadingIndicator,
@@ -45,7 +45,7 @@ import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles}
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {ColumnSize} from '@react-types/table';
-import {DOMRef, forwardRefType, LoadingState, Node} from '@react-types/shared';
+import {DOMRef, LoadingState, Node} from '@react-types/shared';
 import {fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
@@ -814,6 +814,8 @@ const selectAllCheckboxColumn = style({
 
 let InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({isHeaderRowHovered: false});
 
+export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies'> {}
+
 /**
  * A header within a `<Table>`, containing the table columns.
  */
@@ -1125,5 +1127,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 = /*#__PURE__*/ (forwardRef as forwardRefType)(Table);
+const _Table = forwardRef(Table);
 export {_Table as Table};

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

@@ -63,6 +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 {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
@@ -121,6 +122,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 {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
 export type {TagGroupProps, TagProps} from './TagGroup';
 export type {TextFieldProps, TextAreaProps} from './TextField';

packages/@react-spectrum/s2/stories/Table.stories.tsx

@@ -11,9 +11,8 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionButton, Content, Heading, IllustratedMessage, Link} from '../src';
+import {ActionButton, Cell, Column, Content, Heading, IllustratedMessage, Link, Row, Table, TableBody, TableHeader} from '../src';
 import {categorizeArgTypes} from './utils';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '../src/Table';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
 import type {Meta} from '@storybook/react';
 import {SortDescriptor} from 'react-aria-components';