Fix a few things on DataTable

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/report.api.md

@@ -10,14 +10,16 @@ import type { CSSProperties } from 'react';
 import { FC } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Menu as Menu_2 } from '@base-ui-components/react/menu';
-import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import type { RemixiconComponentType } from '@remixicon/react';
 import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
 import { Table as Table_2 } from '@tanstack/react-table';
+import { TdHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 import { Tooltip as Tooltip_2 } from '@base-ui-components/react/tooltip';
 import type { useRender } from '@base-ui-components/react/use-render';
 
@@ -1051,33 +1053,29 @@ export type StylingPropDef = {
 
 // @public
 export const Table: {
-  Root: React_2.ForwardRefExoticComponent<
-    React_2.HTMLAttributes<HTMLTableElement> &
-      React_2.RefAttributes<HTMLTableElement>
+  Root: ForwardRefExoticComponent<
+    HTMLAttributes<HTMLTableElement> & RefAttributes<HTMLTableElement>
   >;
-  Header: React_2.ForwardRefExoticComponent<
-    React_2.HTMLAttributes<HTMLTableSectionElement> &
-      React_2.RefAttributes<HTMLTableSectionElement>
+  Header: ForwardRefExoticComponent<
+    HTMLAttributes<HTMLTableSectionElement> &
+      RefAttributes<HTMLTableSectionElement>
   >;
-  Body: React_2.ForwardRefExoticComponent<
-    React_2.HTMLAttributes<HTMLTableSectionElement> &
-      React_2.RefAttributes<HTMLTableSectionElement>
+  Body: ForwardRefExoticComponent<
+    HTMLAttributes<HTMLTableSectionElement> &
+      RefAttributes<HTMLTableSectionElement>
   >;
-  Head: React_2.ForwardRefExoticComponent<
-    React_2.ThHTMLAttributes<HTMLTableCellElement> &
-      React_2.RefAttributes<HTMLTableCellElement>
+  Head: ForwardRefExoticComponent<
+    ThHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>
   >;
-  Row: React_2.ForwardRefExoticComponent<
-    React_2.HTMLAttributes<HTMLTableRowElement> &
-      React_2.RefAttributes<HTMLTableRowElement>
+  Row: ForwardRefExoticComponent<
+    HTMLAttributes<HTMLTableRowElement> & RefAttributes<HTMLTableRowElement>
   >;
-  Cell: React_2.ForwardRefExoticComponent<
-    React_2.TdHTMLAttributes<HTMLTableCellElement> &
-      React_2.RefAttributes<HTMLTableCellElement>
+  Cell: ForwardRefExoticComponent<
+    TdHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>
   >;
-  Caption: React_2.ForwardRefExoticComponent<
-    React_2.HTMLAttributes<HTMLTableCaptionElement> &
-      React_2.RefAttributes<HTMLTableCaptionElement>
+  Caption: ForwardRefExoticComponent<
+    HTMLAttributes<HTMLTableCaptionElement> &
+      RefAttributes<HTMLTableCaptionElement>
   >;
 };
 

packages/canon/src/components/DataTable/Root/DataTableRoot.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { DataTableRootProps } from './types';
 
 /** @public */
-const DataTableRoot = React.forwardRef<HTMLDivElement, DataTableRootProps>(
+const DataTableRoot = forwardRef<HTMLDivElement, DataTableRootProps>(
   ({ className, ...props }, ref) => {
     return (
       <div

packages/canon/src/components/Select/Select.stories.tsx

@@ -246,7 +246,7 @@ export const WithManyOptions: Story = {
   },
 };
 
-export const withErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     ...Preview.args,
     error: 'Invalid font family',

packages/canon/src/components/Table/Table.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Table } from '../Table';
 
@@ -67,11 +67,11 @@ const meta = {
   title: 'Components/Table',
   component: Table.Root,
   subcomponents: {
-    Body: Table.Body as React.ComponentType<unknown>,
-    Cell: Table.Cell as React.ComponentType<unknown>,
-    Head: Table.Head as React.ComponentType<unknown>,
-    Header: Table.Header as React.ComponentType<unknown>,
-    Row: Table.Row as React.ComponentType<unknown>,
+    Body: Table.Body as ComponentType<unknown>,
+    Cell: Table.Cell as ComponentType<unknown>,
+    Head: Table.Head as ComponentType<unknown>,
+    Header: Table.Header as ComponentType<unknown>,
+    Row: Table.Row as ComponentType<unknown>,
   },
 } satisfies Meta<typeof Table>;
 

packages/canon/src/components/Table/styles.css

@@ -19,10 +19,10 @@
 .canon-TableRow {
   border-bottom: 1px solid var(--canon-border);
   transition: color 0.2s ease-in-out;
+}
 
-  &:hover {
-    background-color: var(--canon-bg-tint-hover);
-  }
+.canon-TableBody .canon-TableRow:hover {
+  background-color: var(--canon-gray-2);
 }
 
 .canon-TableCell {

packages/canon/src/components/TextField/TextField.stories.tsx

@@ -95,14 +95,14 @@ export const Responsive: Story = {
   },
 };
 
-export const withError: Story = {
+export const WithError: Story = {
   args: {
     ...WithLabel.args,
     error: 'Invalid URL',
   },
 };
 
-export const withErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     ...WithLabel.args,
     error: 'Invalid URL',