Merge pull request #1070 from openameba/chore/react-18

chore(spindle-ui): update React to 18
openameba · Sep 11, 2024 · cdcd3c2 · cdcd3c2
2 parents 060428e + 1df6a97
commit cdcd3c2
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 133 deletions.
diff --git a/packages/spindle-ui/package.json b/packages/spindle-ui/package.json
@@ -47,8 +47,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -72,12 +72,12 @@
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/react": "^6.5.9",
     "@svgr/cli": "^8.0.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^27.0.0",
-    "@types/react": "^17.0.1",
+    "@types/react": "^18.3.3",
     "autoprefixer": "^10.0.0",
     "babel-loader": "^9.0.0",
     "bundlesize": "^0.18.0",
@@ -89,8 +89,8 @@
     "postcss": "^8.4.27",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "reg-keygen-git-hash-plugin": "^0.14.0",
     "reg-notify-github-plugin": "^0.14.0",
     "reg-publish-gcs-plugin": "^0.14.0",

diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx
@@ -1,6 +1,11 @@
 import React, { createRef, useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
+import {
+  render,
+  act,
+  renderHook,
+  fireEvent,
+  screen,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { jest } from '@jest/globals';
 

diff --git a/packages/spindle-ui/src/Pagination/hooks/useItemPageNumber.test.ts b/packages/spindle-ui/src/Pagination/hooks/useItemPageNumber.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useItemPageNumber } from './useItemPageNumber';
 
 describe('useItemPageNumber()', () => {

diff --git a/packages/spindle-ui/src/Pagination/hooks/useShowItem.test.ts b/packages/spindle-ui/src/Pagination/hooks/useShowItem.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useShowItem } from './useShowItem';
 
 // ページ総数の閾値

diff --git a/packages/spindle-ui/src/SegmentedControl/SegmentedControl.test.tsx b/packages/spindle-ui/src/SegmentedControl/SegmentedControl.test.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { jest } from '@jest/globals';
 

diff --git a/packages/spindle-ui/src/StackNotificationManager/hooks.test.tsx b/packages/spindle-ui/src/StackNotificationManager/hooks.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, renderHook as _renderHook } from '@testing-library/react-hooks';
+import { act, renderHook as _renderHook } from '@testing-library/react';
 import {
   StackNotificationManagerProvider,
   useStackNotificationManager,

diff --git a/packages/spindle-ui/src/StackNotificationManager/hooks.ts b/packages/spindle-ui/src/StackNotificationManager/hooks.ts
@@ -329,7 +329,7 @@ export const useRepeatedStackItem = <P extends StackPosition = StackPosition>({
     setIdList((prev) => [...prev, nextId]);
   }, [id, position, setActive]);
   const onHide = useCallback(
-    (id) => {
+    (id: string) => {
       setActive({ id, position, active: false });
       setIdList((prev) => prev.filter((item) => item !== id));
     },