Merge pull request #33918 from backstage/fix/ui-missing-react-types-table-dep

fix(ui,app): update React Aria to v1.17.0 and migrate to monopackage imports

.changeset/chubby-candies-cry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': patch
+---
+
+Migrated React Aria imports from individual packages (`@react-aria/toast`, `@react-aria/button`, `@react-stately/toast`) to the monopackages (`react-aria`, `react-stately`).

.changeset/gold-drinks-poke.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Updated React Aria dependencies to v1.17.0 and migrated imports from individual `@react-aria/*` and `@react-stately/*` packages to the monopackages (`react-aria`, `react-stately`). This fixes a type resolution error for `@react-types/table` that occurred in new app installations.

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -287,6 +287,8 @@ misconfigured
 mkdocs
 Mkdocs
 modularization
+monopackage
+monopackages
 monorepo
 monorepos
 monospace

.patches/pr-33918.txt

@@ -0,0 +1 @@
+Update React Aria to v1.17.0 and migrate to monopackage imports

packages/ui/package.json

@@ -47,15 +47,12 @@
   },
   "dependencies": {
     "@backstage/version-bridge": "workspace:^",
-    "@react-aria/interactions": "^3.27.1",
-    "@react-stately/layout": "^4.6.0",
-    "@react-stately/overlays": "^3.6.23",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
-    "react-aria": "^3.47.0",
-    "react-aria-components": "^1.14.0",
-    "react-stately": "^3.45.0",
+    "react-aria": "^3.48.0",
+    "react-aria-components": "^1.17.0",
+    "react-stately": "^3.46.0",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {

packages/ui/report.api.md

@@ -8,8 +8,8 @@ import { CellProps as CellProps_2 } from 'react-aria-components';
 import type { CheckboxGroupProps as CheckboxGroupProps_2 } from 'react-aria-components';
 import type { CheckboxProps as CheckboxProps_2 } from 'react-aria-components';
 import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
-import type { ColumnSize } from '@react-types/table';
-import type { ColumnStaticSize } from '@react-types/table';
+import type { ColumnSize } from 'react-stately';
+import type { ColumnStaticSize } from 'react-stately';
 import type { ComponentProps } from 'react';
 import type { ComponentPropsWithoutRef } from 'react';
 import type { ComponentPropsWithRef } from 'react';

packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Children, useRef } from 'react';
-import { useInteractOutside } from '@react-aria/interactions';
+import { useInteractOutside } from 'react-aria';
 import {
   Autocomplete,
   SearchField as RASearchField,
@@ -26,7 +26,7 @@ import {
   ListBoxItem,
   OverlayTriggerStateContext,
 } from 'react-aria-components';
-import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayTriggerState } from 'react-stately';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
 import { useDefinition } from '../../hooks/useDefinition';
 import {

packages/ui/src/components/Table/components/Table.tsx

@@ -20,7 +20,7 @@ import {
   ResizableTableContainer,
   Virtualizer,
 } from 'react-aria-components';
-import { TableLayout } from '@react-stately/layout';
+import { TableLayout } from 'react-stately';
 import { useDefinition } from '../../../hooks/useDefinition';
 import { TableWrapperDefinition } from '../definition';
 import { TableRoot } from './TableRoot';

packages/ui/src/components/Table/types.ts

@@ -24,7 +24,7 @@ import {
 } from 'react-aria-components';
 import type { ReactElement, ReactNode } from 'react';
 import type { SortDescriptor as ReactStatelySortDescriptor } from 'react-stately';
-import type { ColumnSize, ColumnStaticSize } from '@react-types/table';
+import type { ColumnSize, ColumnStaticSize } from 'react-stately';
 import type { TextColors } from '../../types';
 import { TablePaginationProps } from '../TablePagination';
 

plugins/app/package.json

@@ -65,12 +65,11 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@react-aria/button": "^3.14.3",
-    "@react-aria/toast": "^3.0.9",
     "@react-hookz/web": "^24.0.0",
-    "@react-stately/toast": "^3.1.2",
     "@remixicon/react": "^4.6.0",
     "motion": "^12.0.0",
+    "react-aria": "^3.48.0",
+    "react-stately": "^3.46.0",
     "react-use": "^17.2.4",
     "zen-observable": "^0.10.0",
     "zod": "^3.25.76 || ^4.0.0"

plugins/app/src/components/Toast/Toast.stories.tsx

@@ -18,7 +18,7 @@ import { useState } from 'react';
 import preview from '../../../../../.storybook/preview';
 import { Button, Flex, Text } from '../../../../../packages/ui/src';
 /* eslint-enable @backstage/no-relative-monorepo-imports */
-import { ToastQueue } from '@react-stately/toast';
+import { ToastQueue } from 'react-stately';
 import { ToastContainer } from './index';
 import type { ToastApiMessageContent } from './types';
 import { MemoryRouter } from 'react-router-dom';

plugins/app/src/components/Toast/Toast.tsx

@@ -15,8 +15,7 @@
  */
 
 import { forwardRef, Ref, useRef, useLayoutEffect, useState } from 'react';
-import { useToast } from '@react-aria/toast';
-import { useButton } from '@react-aria/button';
+import { useToast, useButton } from 'react-aria';
 import { motion } from 'motion/react';
 import { Box } from '@backstage/ui';
 import {

plugins/app/src/components/Toast/ToastContainer.tsx

@@ -15,8 +15,8 @@
  */
 
 import { forwardRef, Ref, useState, useRef, useCallback, useMemo } from 'react';
-import { useToastRegion } from '@react-aria/toast';
-import { useToastQueue } from '@react-stately/toast';
+import { useToastRegion } from 'react-aria';
+import { useToastQueue } from 'react-stately';
 import { AnimatePresence } from 'motion/react';
 import type { ToastApiMessageContainerProps } from './types';
 import { useInvertedThemeMode } from '../../hooks/useInvertedThemeMode';

plugins/app/src/components/Toast/ToastDisplay.tsx

@@ -16,7 +16,7 @@
 
 import { useEffect, useState } from 'react';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
-import { ToastQueue } from '@react-stately/toast';
+import { ToastQueue } from 'react-stately';
 import { ToastContainer } from './ToastContainer';
 import { toastApiForwarderRef } from '../../apis';
 import type {