diff --git a/packages/canon/package.json b/packages/canon/package.json index f746159a61..ccc23c55ed 100644 --- a/packages/canon/package.json +++ b/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:^", diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 0f49157250..5e5b289a6f 100644 --- a/packages/canon/report.api.md +++ b/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; diff --git a/packages/canon/src/components/Tabs/Tabs.tsx b/packages/canon/src/components/Tabs/Tabs.tsx index 2e27e09941..f77338d34e 100644 --- a/packages/canon/src/components/Tabs/Tabs.tsx +++ b/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); + onHoverStart: () => handleHover(child.props.id as string), + onHoverEnd: () => handleHover(null), + } as Partial); } 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 ( 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} > diff --git a/packages/canon/src/components/Tabs/index.ts b/packages/canon/src/components/Tabs/index.ts index 37a199dc14..ac65c77479 100644 --- a/packages/canon/src/components/Tabs/index.ts +++ b/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'; diff --git a/packages/canon/src/components/Tabs/types.ts b/packages/canon/src/components/Tabs/types.ts index b373c1ce72..38eaa65b74 100644 --- a/packages/canon/src/components/Tabs/types.ts +++ b/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. * diff --git a/yarn.lock b/yarn.lock index 50297c1707..083d80ba3b 100644 --- a/yarn.lock +++ b/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