Cleanup

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

packages/canon/package.json

@@ -46,8 +46,7 @@
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "motion": "^12.20.1",
-    "react-aria-components": "^1.10.1",
-    "react-stately": "^3.39.0"
+    "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",

packages/canon/report.api.md

@@ -30,7 +30,7 @@ import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
 import { Table as Table_2 } from '@tanstack/react-table';
 import type { TabListProps as TabListProps_2 } from 'react-aria-components';
 import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components';
-import type { TabProps as TabProps_2 } from 'react-aria-components';
+import { TabProps } from 'react-aria-components';
 import type { TabsProps as TabsProps_2 } from 'react-aria-components';
 import { TdHTMLAttributes } from 'react';
 import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components';
@@ -1670,14 +1670,6 @@ export const TabPanel: (props: TabPanelProps) => JSX_2.Element;
 // @public
 export interface TabPanelProps extends TabPanelProps_2 {}
 
-// @public
-export interface TabProps extends TabProps_2 {
-  // (undocumented)
-  onHover?: (key: string | null) => void;
-  // (undocumented)
-  onRegister?: (key: string, element: HTMLDivElement | null) => void;
-}
-
 // @public
 export const Tabs: (props: TabsProps) => JSX_2.Element | null;
 

packages/canon/src/components/Tabs/Tabs.tsx

@@ -27,7 +27,6 @@ import {
 import type {
   TabsProps,
   TabListProps,
-  TabProps,
   TabPanelProps,
   TabsContextValue,
 } from './types';
@@ -39,6 +38,7 @@ import {
   Tab as AriaTab,
   TabPanel as AriaTabPanel,
   RouterProvider,
+  TabProps as AriaTabProps,
 } from 'react-aria-components';
 
 import { useStyles } from '../../hooks/useStyles';
@@ -131,14 +131,8 @@ export const Tabs = (props: TabsProps) => {
 export const TabList = (props: TabListProps) => {
   const { children, ...rest } = props;
   const { classNames } = useStyles('Tabs');
-  const {
-    setHoveredKey,
-    setTabRef,
-    tabRefs,
-    tabsRef,
-    hoveredKey,
-    prevHoveredKey,
-  } = useTabsContext();
+  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =
+    useTabsContext();
 
   const handleHover = (key: string | null) => {
     setHoveredKey(key);
@@ -148,9 +142,9 @@ export const TabList = (props: TabListProps) => {
   const enhancedChildren = Children.map(children as ReactNode, child => {
     if (isValidElement(child)) {
       return cloneElement(child, {
-        onHover: handleHover,
-        onRegister: setTabRef,
-      } as Partial<TabProps>);
+        onHoverStart: () => handleHover(child.props.id as string),
+        onHoverEnd: () => handleHover(null),
+      } as Partial<AriaTabProps>);
     }
     return child;
   });
@@ -179,17 +173,16 @@ export const TabList = (props: TabListProps) => {
  *
  * @public
  */
-export const Tab = (props: TabProps) => {
-  const { href, children, id, onHover, onRegister, ...rest } = props;
+export const Tab = (props: AriaTabProps) => {
+  const { href, children, id, ...rest } = props;
   const { classNames } = useStyles('Tabs');
+  const { setTabRef } = useTabsContext();
 
   return (
     <AriaTab
       id={id}
       className={classNames.tab}
-      ref={el => onRegister?.(id as string, el as HTMLDivElement)}
-      onHoverStart={() => onHover?.(id as string)}
-      onHoverEnd={() => onHover?.(null)}
+      ref={el => setTabRef(id as string, el as HTMLDivElement)}
       href={href}
       {...rest}
     >

packages/canon/src/components/Tabs/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { Tabs, TabList, Tab, TabPanel } from './Tabs';
-export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './types';
+export type { TabsProps, TabListProps, TabPanelProps } from './types';

packages/canon/src/components/Tabs/types.ts

@@ -15,7 +15,6 @@
  */
 
 import type {
-  TabProps as AriaTabProps,
   TabsProps as AriaTabsProps,
   TabListProps as AriaTabListProps,
   TabPanelProps as AriaTabPanelProps,
@@ -49,16 +48,6 @@ export interface TabsContextValue {
   setTabRef: (key: string, element: HTMLDivElement | null) => void;
 }
 
-/**
- * Props for the Tab component.
- *
- * @public
- */
-export interface TabProps extends AriaTabProps {
-  onHover?: (key: string | null) => void;
-  onRegister?: (key: string, element: HTMLDivElement | null) => void;
-}
-
 /**
  * Props for the TabPanel component.
  *

yarn.lock

@@ -3841,7 +3841,6 @@ __metadata:
     react-aria-components: "npm:^1.10.1"
     react-dom: "npm:^18.0.2"
     react-router-dom: "npm:^6.3.0"
-    react-stately: "npm:^3.39.0"
     storybook: "npm:^8.6.12"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0