Fix Picker and ComboBox press state, Table types + docs

[devongovett]

Noticed that Picker and ComboBox were getting stuck in the down state when open. That's due to RAC setting isPressed when they are open. Not sure what changed since the last release where this didn't happen, but it does now...

Fixed the storybook controls for Table not appearing correctly (it doesn't seem to like forwardRefType, which was unnecessary in this case. only needed when there are generics). Also exported Table components and props from the package and fixed the props for TableHeader to exclude className and style.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:Table

+Table {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  density?: 'compact' | 'spacious' | 'regular' = 'regular'
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isQuiet?: boolean
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => any
+  onResize?: (Map<Key, ColumnSize>) => void
+  onResizeEnd?: (Map<Key, ColumnSize>) => void
+  onResizeStart?: (Map<Key, ColumnSize>) => void
+  onSelectionChange?: (Selection) => void
+  onSortChange?: (SortDescriptor) => any
+  overflowMode?: 'wrap' | 'truncate' = 'truncate'
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  slot?: string | null
+  sortDescriptor?: SortDescriptor
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:TableHeader

+TableHeader <T extends {}> {
+  children?: ReactNode | (T) => ReactElement
+  columns?: Array<T>
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+}

/@react-spectrum/s2:TableBody

+TableBody <T extends {}> {
+  children?: ReactNode | (T) => ReactNode
+  disabledKeys?: Iterable<Key>
+  items?: Iterable<T>
+  renderEmptyState?: (TableBodyRenderProps) => ReactNode
+}

/@react-spectrum/s2:Row

+Row <T extends {}> {
+  children?: ReactNode | (T) => ReactElement
+  columns?: Iterable<T>
+  id?: Key
+  textValue?: string
+}

/@react-spectrum/s2:Cell

+Cell {
+  align?: 'start' | 'center' | 'end' = 'start'
+  children: ReactNode
+  className?: string | ((CellRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  id?: Key
+  showDivider?: boolean
+  style?: CSSProperties | ((CellRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  textValue?: string
+}

/@react-spectrum/s2:Column

+Column {
+  align?: 'start' | 'center' | 'end' = 'start'
+  allowsResizing?: boolean
+  allowsSorting?: boolean
+  children: ReactNode
+  className?: string | ((ColumnRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultWidth?: ColumnSize | null
+  id?: Key
+  isRowHeader?: boolean
+  maxWidth?: ColumnStaticSize | null
+  minWidth?: ColumnStaticSize | null
+  showDivider?: boolean
+  style?: CSSProperties | ((ColumnRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  textValue?: string
+  width?: ColumnSize | null
+}

/@react-spectrum/s2:TableProps

+TableProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  density?: 'compact' | 'spacious' | 'regular' = 'regular'
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  isQuiet?: boolean
+  loadingState?: LoadingState
+  onAction?: (Key) => void
+  onLoadMore?: () => any
+  onResize?: (Map<Key, ColumnSize>) => void
+  onResizeEnd?: (Map<Key, ColumnSize>) => void
+  onResizeStart?: (Map<Key, ColumnSize>) => void
+  onSelectionChange?: (Selection) => void
+  onSortChange?: (SortDescriptor) => any
+  overflowMode?: 'wrap' | 'truncate' = 'truncate'
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  slot?: string | null
+  sortDescriptor?: SortDescriptor
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:TableHeaderProps

+TableHeaderProps <T> {
+  children?: ReactNode | (T) => ReactElement
+  columns?: Array<T>
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+}

/@react-spectrum/s2:TableBodyProps

+TableBodyProps <T> {
+  children?: ReactNode | (T) => ReactNode
+  disabledKeys?: Iterable<Key>
+  items?: Iterable<T>
+  renderEmptyState?: (TableBodyRenderProps) => ReactNode
+}

/@react-spectrum/s2:RowProps

+RowProps <T> {
+  children?: ReactNode | (T) => ReactElement
+  columns?: Iterable<T>
+  id?: Key
+  textValue?: string
+}

/@react-spectrum/s2:CellProps

+CellProps {
+  align?: 'start' | 'center' | 'end' = 'start'
+  children: ReactNode
+  className?: string | ((CellRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  id?: Key
+  showDivider?: boolean
+  style?: CSSProperties | ((CellRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  textValue?: string
+}

/@react-spectrum/s2:ColumnProps

+ColumnProps {
+  align?: 'start' | 'center' | 'end' = 'start'
+  allowsResizing?: boolean
+  allowsSorting?: boolean
+  children: ReactNode
+  className?: string | ((ColumnRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultWidth?: ColumnSize | null
+  id?: Key
+  isRowHeader?: boolean
+  maxWidth?: ColumnStaticSize | null
+  minWidth?: ColumnStaticSize | null
+  showDivider?: boolean
+  style?: CSSProperties | ((ColumnRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  textValue?: string
+  width?: ColumnSize | null
+}

---

[snowystinger]

bummer about the pressed state :-/