feat: polish types to be compatible with React 18.3 #4735
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
LLM Analysis of PR ChangesSummaryThis PR updates the React and React DOM dependencies to be compatible with React 18.3, loosening the version constraints. It also fixes type issues by casting refs to Key Points to Review
Style & Consistency
|
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
3b98f1e to
b21d412
Compare
Deploying orbit with
|
| Latest commit: |
9699cd9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://fa9d3b10.orbit.pages.dev |
| Branch Preview URL: | https://sarka-react-upgrade-fix.orbit.pages.dev |
|
Size Change: +34 B (+0.01%) Total Size: 464 kB
ℹ️ View Unchanged
|
![callstackai[bot]](https://avatars.githubusercontent.com/in/1040204?s=60&v=4){kind=small}
There was a problem hiding this comment.
Key Issues
The incorrect return type React.RefObject<T> that doesn't account for null values could lead to runtime errors if not handled properly. Suppressing type errors with // @ts-expect-error without proper checks can cause runtime issues, especially if scrollingElementRef is not a valid React ref object. Removing null from ref types is unsafe as React refs can be null before mounting or if the element is unmounted, potentially causing runtime errors.
Comment on lines
+95
to
97
| // @ts-expect-error TODO | ||
| // eslint-disable-next-line no-param-reassign | ||
| scrollingElementRef.current = node; |
There was a problem hiding this comment.
🐛 Possible Bug
The // @ts-expect-error suppresses a type error without proper type checking. If scrollingElementRef is not a valid React ref object with a current property, this assignment could cause runtime errors. Consider adding proper type guards or using MutableRefObject type.
Suggested change
| // @ts-expect-error TODO | |
| // eslint-disable-next-line no-param-reassign | |
| scrollingElementRef.current = node; | |
| if (scrollingElementRef && 'current' in scrollingElementRef) { | |
| scrollingElementRef.current = node; | |
| } |
| @@ -21,7 +21,7 @@ export type Props = Common.Globals & | |||
| closable & { | |||
| readonly size?: Size; | |||
| readonly children: React.ReactNode; | |||
| readonly triggerRef?: React.RefObject<HTMLElement | null>; | |||
| readonly triggerRef?: React.RefObject<HTMLElement>; | |||
There was a problem hiding this comment.
🐛 Possible Bug
Removing null from RefObject and Ref types is unsafe as React refs can be null before the component mounts or if the referenced element is unmounted. This can lead to runtime errors when accessing these refs.
Suggested change
| readonly triggerRef?: React.RefObject<HTMLElement>; | |
| readonly triggerRef?: React.RefObject<HTMLElement | null>; |
| @@ -21,7 +21,7 @@ export type Props = Common.Globals & | |||
| closable & { | |||
| readonly size?: Size; | |||
| readonly children: React.ReactNode; | |||
| readonly triggerRef?: React.RefObject<HTMLElement | null>; | |||
| readonly triggerRef?: React.RefObject<HTMLElement>; | |||
| readonly lockScrolling?: boolean; | |||
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; | |||
There was a problem hiding this comment.
🐛 Possible Bug
The scrollingElementRef should allow for null values as the ref might not be initialized immediately or could become null during component lifecycle.
Suggested change
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; | |
| readonly scrollingElementRef?: React.Ref<HTMLElement | null>; |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
b21d412 to
3ec7c79
Compare
|
Storybook staging is available at https://kiwicom-orbit-sarka-react-upgrade-fix.surge.sh Playroom staging is available at https://kiwicom-orbit-sarka-react-upgrade-fix.surge.sh/playroom |
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
2 times, most recently
from
40890ec to
549c74f
Compare
sarkaaa
force-pushed
the
sarka/react-upgrade-fix
branch
from
549c74f to
9699cd9
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request meets the following criteria:
For new components:
d.tsfiles and are exported inindex.d.ts✨
Description by Callstackai
This PR updates type definitions to ensure compatibility with React 18.3, specifically refining the types of refs used in various components.
Diagrams of code changes
sequenceDiagram participant Component participant RefHandler participant HTMLElement Component->>RefHandler: Create React.RefObject<HTMLDivElement> Note over RefHandler: Type safety improvements for refs RefHandler->>HTMLElement: Attach ref to DOM elements Note over HTMLElement: Added refs to:<br/>- AccordionSection<br/>- CardSection<br/>- Collapse<br/>- InputSelect<br/>- ItinerarySegment<br/>- Modal<br/>- Tile HTMLElement-->>RefHandler: DOM element reference RefHandler-->>Component: Provide access to DOM element Note over Component,HTMLElement: Enhanced TypeScript type safety<br/>for ref handling across componentsFiles Changed