chore: update React Router to v7 (#1502)

* chore: update React Router to v7

* fix: ts

.changeset/great-mugs-invent.md

@@ -0,0 +1,6 @@
+---
+"@launchpad-ui/navigation": patch
+"@launchpad-ui/core": patch
+---
+
+Update React Router to v7

.changeset/shy-suns-lie.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Update React Router to v7

.storybook/main.ts

@@ -45,7 +45,7 @@ const config: StorybookConfig = {
 			shouldRemoveUndefinedFromOptional: true,
 			propFilter: (prop) =>
 				prop.parent
-					? !/launchpad-ui\/node_modules\/.pnpm\/(?!react-aria-components|react-aria|react-stately|@react-types|@react-aria|@react-stately|react-router-dom|class-variance-authority|@internationalized)/.test(
+					? !/launchpad-ui\/node_modules\/.pnpm\/(?!react-aria-components|react-aria|react-stately|@react-types|@react-aria|@react-stately|react-router|class-variance-authority|@internationalized)/.test(
 							prop.parent.fileName,
 						)
 					: true,

.storybook/preview.tsx

@@ -7,7 +7,7 @@ import { RouterProvider as AriaRouterProvider, useHref } from '@launchpad-ui/com
 import sprite from '@launchpad-ui/icons/img/sprite.svg';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { themes } from '@storybook/theming';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { BrowserRouter, useNavigate } from 'react-router';
 
 import custom from './custom.svg';
 import { allModes } from './modes';

package.json

@@ -78,7 +78,7 @@
 		"plop": "^4.0.0",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
-		"react-router-dom": "6.16.0",
+		"react-router": "7.0.1",
 		"rollup-plugin-pure": "^0.2.1",
 		"storybook": "^8.4.0",
 		"storybook-addon-pseudo-states": "^4.0.0",

packages/components/__tests__/Breadcrumbs.spec.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from '../../../test/utils';

packages/components/__tests__/Link.spec.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from '../../../test/utils';

packages/components/__tests__/LinkButton.spec.tsx

@@ -1,5 +1,5 @@
 import { RouterProvider } from 'react-aria-components';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen, userEvent } from '../../../test/utils';

packages/components/__tests__/LinkIconButton.spec.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from '../../../test/utils';

packages/components/global.d.ts

@@ -1,4 +1,4 @@
-import type { NavigateOptions, To } from 'react-router-dom';
+import type { NavigateOptions, To } from 'react-router';
 
 declare module 'react-aria-components' {
 	interface RouterConfig {

packages/components/package.json

@@ -45,7 +45,7 @@
 		"class-variance-authority": "0.7.0",
 		"react-aria": "3.36.0",
 		"react-aria-components": "1.5.0",
-		"react-router-dom": "6.16.0"
+		"react-router": "7.0.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",

packages/components/src/utils.tsx

@@ -1,7 +1,7 @@
 import type { Href } from '@react-types/shared';
 
 import { useEffect, useState } from 'react';
-import { useHref as useRouterHref } from 'react-router-dom';
+import { useHref as useRouterHref } from 'react-router';
 
 const useMedia = (media: string) => {
 	const [isActive, setIsActive] = useState(false);
@@ -30,7 +30,7 @@ const useMedia = (media: string) => {
 
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 
-// https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L957-L962
+// https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/dom/lib.tsx#L577-L585
 const useHref = (href: Href) => {
 	let absoluteHref: string | undefined;
 	if (typeof href === 'string' && ABSOLUTE_URL_REGEX.test(href)) {

packages/components/stories/Tabs.stories.tsx

@@ -4,7 +4,7 @@ import type { ComponentType } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from '../src';
 
 import { userEvent, within } from '@storybook/test';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router';
 
 const meta: Meta<typeof Tabs> = {
 	component: Tabs,

packages/navigation/__tests__/Navigation.spec.tsx

@@ -1,6 +1,6 @@
 import type { NavigationItemProps } from '../src';
 
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen, userEvent, waitFor } from '../../../test/utils';

packages/navigation/package.json

@@ -43,7 +43,7 @@
 		"@react-stately/list": "3.11.1",
 		"@react-types/shared": "3.26.0",
 		"classix": "2.2.0",
-		"react-router-dom": "6.16.0"
+		"react-router": "7.0.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",

packages/navigation/src/NavItem.tsx

@@ -3,7 +3,7 @@ import type { MouseEvent } from 'react';
 
 import { Chip } from '@launchpad-ui/chip';
 import { cx } from 'classix';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 
 import styles from './styles/Navigation.module.css';
 import { titlecase } from './utils';

packages/navigation/src/NavigationMenuDropdown.tsx

@@ -7,7 +7,7 @@ import { Icon } from '@launchpad-ui/icons';
 import { Menu, MenuItem } from '@launchpad-ui/menu';
 import { useListState } from '@react-stately/list';
 import { useEffect, useRef, useState } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 
 import styles from './styles/Navigation.module.css';
 import { titlecase } from './utils';

renovate.json

@@ -23,5 +23,5 @@
 		}
 	],
 	"rangeStrategy": "bump",
-	"ignoreDeps": ["react-router-dom", "@biomejs/biome", "nx"]
+	"ignoreDeps": ["react-router", "@biomejs/biome", "nx"]
 }