@react-spectrum/s2 3.0.0-nightly-bebc9764a-241010 → 3.0.0-nightly-db60babaf-241012

package/src/TableView.tsx

@@ -16,6 +16,7 @@ import {
   Collection,
   ColumnRenderProps,
   ColumnResizer,
+  ContextValue,
   Key,
   Provider,
   Cell as RACCell,
@@ -46,7 +47,7 @@ import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {colorMix, fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
-import {DOMRef, LoadingState, Node} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -65,6 +66,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useLoadMore} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useScale} from './utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 import {VisuallyHidden} from 'react-aria';
 
 interface S2TableProps {
@@ -251,7 +253,10 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
   }
 }
 
+export const TableContext = createContext<ContextValue<TableViewProps, DOMRefValue<HTMLDivElement>>>(null);
+
 function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TableContext);
   let {
     UNSAFE_style,
     UNSAFE_className,
@@ -351,11 +356,9 @@ const centeredWrapper = style({
 
 export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'dependencies'> {}
 
-/**
- * The body of a `<Table>`, containing the table rows.
- */
-export function TableBody<T extends object>(props: TableBodyProps<T>) {
+function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {items, renderEmptyState, children} = props;
+  let domRef = useDOMRef(ref);
   let {loadingState} = useContext(InternalTableContext);
   let emptyRender;
   let renderer = children;
@@ -410,6 +413,8 @@ export function TableBody<T extends object>(props: TableBodyProps<T>) {
 
   return (
     <RACTableBody
+      // @ts-ignore
+      ref={domRef}
       className={style({height: 'full'})}
       {...props}
       renderEmptyState={emptyRender}
@@ -419,6 +424,12 @@ export function TableBody<T extends object>(props: TableBodyProps<T>) {
   );
 }
 
+/**
+ * The body of a `<Table>`, containing the table rows.
+ */
+let _TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(TableBody);
+export {_TableBody as TableBody};
+
 const cellFocus = {
   outlineStyle: {
     default: 'none',
@@ -493,14 +504,15 @@ export interface ColumnProps extends RACColumnProps {
 /**
  * A column within a `<Table>`.
  */
-export function Column(props: ColumnProps) {
+export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef<HTMLDivElement>) {
   let {isHeaderRowHovered} = useContext(InternalTableHeaderContext);
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
+  let domRef = useDOMRef(ref);
   let isColumnResizable = allowsResizing;
 
   return (
-    <RACColumn {...props} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>
+    <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>
       {({allowsSorting, sortDirection, isFocusVisible, sort, startResize, isHovered}) => (
         <>
           {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity
@@ -522,7 +534,7 @@ export function Column(props: ColumnProps) {
       )}
     </RACColumn>
   );
-}
+});
 
 const columnContentWrapper = style({
   minWidth: 0,
@@ -823,18 +835,20 @@ let InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({
 
 export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
 
-/**
- * A header within a `<Table>`, containing the table columns.
- */
-export function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>) {
+function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
   let {isQuiet} = useContext(InternalTableContext);
   let [isHeaderRowHovered, setHeaderRowHovered] = useState(false);
+  let domRef = useDOMRef(ref);
 
   return (
     <InternalTableHeaderContext.Provider value={{isHeaderRowHovered}}>
-      <RACTableHeader onHoverChange={setHeaderRowHovered} className={tableHeader}>
+      <RACTableHeader
+        // @ts-ignore
+        ref={domRef}
+        onHoverChange={setHeaderRowHovered}
+        className={tableHeader}>
         {/* Add extra columns for selection. */}
         {selectionBehavior === 'toggle' && (
           // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
@@ -863,6 +877,12 @@ export function TableHeader<T extends object>({columns, children}: TableHeaderPr
   );
 }
 
+/**
+ * A header within a `<Table>`, containing the table columns.
+ */
+let _TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(TableHeader);
+export {_TableHeader as TableHeader};
+
 function VisuallyHiddenSelectAllLabel() {
   let checkboxProps = useSlottedContext(RACCheckboxContext, 'selection');
 
@@ -972,13 +992,15 @@ export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'sh
 /**
  * A cell within a table row.
  */
-export function Cell(props: CellProps) {
+export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isSticky, showDivider = false, align, textValue, ...otherProps} = props;
+  let domRef = useDOMRef(ref);
   let tableVisualOptions = useContext(InternalTableContext);
   textValue ||= typeof children === 'string' ? children : undefined;
 
   return (
     <RACCell
+      ref={domRef}
       // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
       // @ts-ignore
       isSticky={isSticky}
@@ -997,7 +1019,7 @@ export function Cell(props: CellProps) {
       )}
     </RACCell>
   );
-}
+});
 
 // Use color-mix instead of transparency so sticky cells work correctly.
 const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
@@ -1076,15 +1098,15 @@ const row = style<RowRenderProps & S2TableProps>({
 
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue'>  {}
 
-/**
- * A row within a `<Table>`.
- */
-export function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>) {
+function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
+  let domRef = useDOMRef(ref);
 
   return (
     <RACRow
+      // @ts-ignore
+      ref={domRef}
       id={id}
       className={renderProps => row({
         ...renderProps,
@@ -1103,6 +1125,12 @@ export function Row<T extends object>({id, columns, children, ...otherProps}: Ro
   );
 }
 
+/**
+ * A row within a `<Table>`.
+ */
+let _Row = /*#__PURE__*/ (forwardRef as forwardRefType)(Row);
+export {_Row as Row};
+
 /**
  * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */

package/src/index.ts

@@ -21,7 +21,7 @@ export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from './Breadcrumbs';
 export {Button, LinkButton, ButtonContext, LinkButtonContext} from './Button';
 export {ButtonGroup, ButtonGroupContext} from './ButtonGroup';
 export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from './Card';
-export {CardView} from './CardView';
+export {CardView, CardViewContext} from './CardView';
 export {Checkbox, CheckboxContext} from './Checkbox';
 export {CheckboxGroup, CheckboxGroupContext} from './CheckboxGroup';
 export {ColorArea, ColorAreaContext} from './ColorArea';
@@ -63,7 +63,7 @@ export {Skeleton, useIsSkeleton} from './Skeleton';
 export {SkeletonCollection} from './SkeletonCollection';
 export {StatusLight, StatusLightContext} from './StatusLight';
 export {Switch, SwitchContext} from './Switch';
-export {TableView, TableHeader, TableBody, Row, Cell, Column} from './TableView';
+export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext} from './TableView';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';