Directly apply width to table column and add hover events to table header for S2 (#6719)

* Directly apply width to table column so we dont assume a specific virtualized DOM structure

* Add support for hover events on TableHeader

used in S2 so we can tell the resize nubbins to all render when the header is hovered

---------

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

packages/react-aria-components/src/Table.tsx

@@ -522,7 +522,15 @@ export function useTableOptions(): TableOptionsContextValue {
   return useContext(TableOptionsContext)!;
 }
 
-export interface TableHeaderProps<T> extends StyleProps {
+export interface TableHeaderRenderProps {
+  /**
+   * Whether the table header is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean
+}
+
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents {
   /** A list of table columns. */
   columns?: T[],
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
@@ -552,13 +560,27 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
 
     let THead = useElementType('thead');
     let {rowGroupProps} = useTableRowGroup();
+    let {hoverProps, isHovered} = useHover({
+      onHoverStart: props.onHoverStart,
+      onHoverChange: props.onHoverChange,
+      onHoverEnd: props.onHoverEnd
+    });
+
+    let renderProps = useRenderProps({
+      className: props.className,
+      style: props.style,
+      defaultClassName: 'react-aria-TableHeader',
+      values: {
+        isHovered
+      }
+    });
+
     return (
       <THead
-        {...filterDOMProps(props as any)}
-        {...rowGroupProps}
+        {...mergeProps(filterDOMProps(props as any), rowGroupProps, hoverProps)}
+        {...renderProps}
         ref={ref}
-        className={props.className ?? 'react-aria-TableHeader'}
-        style={props.style}>
+        data-hovered={isHovered || undefined}>
         {headerRows}
       </THead>
     );
@@ -711,7 +733,7 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
 
   let style = renderProps.style;
   if (layoutState) {
-    style = {...style, width: isVirtualized ? undefined : layoutState.getColumnWidth(column.key)};
+    style = {...style, width: layoutState.getColumnWidth(column.key)};
   }
 
   let TH = useElementType('th');

packages/react-aria-components/test/Table.test.js

@@ -410,6 +410,34 @@ describe('Table', () => {
     expect(onHoverEnd).not.toHaveBeenCalled();
   });
 
+  it('should support hover events on the TableHeader', async () => {
+    let onHoverStart = jest.fn();
+    let onHoverChange = jest.fn();
+    let onHoverEnd = jest.fn();
+    let {getAllByRole} = renderTable({
+      tableHeaderProps: {className: ({isHovered}) => isHovered ? 'hover' : '', onHoverStart, onHoverChange, onHoverEnd}
+    });
+    let headerRow = getAllByRole('rowgroup')[0];
+
+    expect(headerRow).not.toHaveAttribute('data-hovered');
+    expect(headerRow).not.toHaveClass('hover');
+    expect(onHoverStart).not.toHaveBeenCalled();
+    expect(onHoverChange).not.toHaveBeenCalled();
+    expect(onHoverEnd).not.toHaveBeenCalled();
+
+    await user.hover(headerRow);
+    expect(headerRow).toHaveAttribute('data-hovered');
+    expect(headerRow).toHaveClass('hover');
+    expect(onHoverStart).toHaveBeenCalledTimes(1);
+    expect(onHoverChange).toHaveBeenCalledTimes(1);
+
+    await user.unhover(headerRow);
+    expect(headerRow).not.toHaveAttribute('data-hovered');
+    expect(headerRow).not.toHaveClass('hover');
+    expect(onHoverEnd).toHaveBeenCalledTimes(1);
+    expect(onHoverChange).toHaveBeenCalledTimes(2);
+  });
+
   it('should support focus ring', async () => {
     let {getAllByRole} = renderTable({
       rowProps: {className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''},

starters/tailwind/src/Table.tsx

@@ -74,7 +74,7 @@ export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
   let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
 
   return (
-    <AriaTableHeader {...props} className={twMerge('sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b dark:border-b-zinc-700', props.className)}>
+    <AriaTableHeader {...props} className={composeTailwindRenderProps(props.className, 'sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b dark:border-b-zinc-700')}>
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}
       {selectionBehavior === 'toggle' && (