feat: introduce support for react v18 (FE-6015) #7148

Parsium · 2025-01-08T13:41:04Z

addresses #6517

Proposed behaviour

⚠️ BREAKING CHANGES

Dependencies react-dnd and react-dnd-html5-backend are now ESM-only packages.
Temporary incompatibility with Strict Mode in React 18

Features

Upgrade react-dnd and react-dnd-html5-backend to version ^16.0.0
Introduce support for React ^18.0.0.
Upgrade @tanstack/react-virtual dependency to version ^3.11.2
Portrait - Add data-element and data-role props for testing purposes
Menu - let browser handle tabbing to prevent focus on non-focusable items
Menu - skip non-focusable submenu items when moving focus with Up, Down, Home and End keys
Menu - prevent showing hover styling for non-focusable menu items

Fixes

Menu - ensure focus state remains consistent between tabbing and Home/End key presses
Menu - prevent root element from being focused when containing focusable content
Select - debounce scroll handler on option list to reduce frequency of onListScrollBottom calls

Current behaviour

Carbon only supports React v17

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

Using the Storybook build, verify that the following remain unchanged for all Carbon components:

Visuals (appearance, layout, spacing, animations, etc.)
Behaviour (following interactions such as with the mouse or keyboard, screen reader behaviour)
Props (the set of available props and their default values)

Compare these attributes against the latest production build of Storybook, using the latest versions of Chrome, Safari and Firefox.

Exceptions

The following stories have been updated in the PR and are expected to show changes. These should not be flagged for regressions:

Dialog: "Editable" story (removed)
RadioButton: "With Legends and Labels" story (small change to component usage)
Menu: "Menu Full Screen with Max Width" (changes to number of menu items)

src/components/action-popover/action-popover.component.tsx

nineteen88 · 2025-01-20T14:00:50Z

src/components/date/date.component.tsx

-        }
-      };
-      document.addEventListener("mousedown", handleClick);
+    const handleClickAway = () => {


praise: glad to see this has been resolved without the cludge being necessary anymore!

src/components/dialog/dialog.stories.tsx

src/components/menu/__internal__/submenu/submenu.component.tsx

src/components/menu/menu-item/menu-item.component.tsx

src/components/portrait/portrait.component.tsx

src/components/accordion/accordion-group/accordion-group.component.tsx

src/components/action-popover/action-popover-menu/action-popover-menu.component.tsx

src/components/anchor-navigation/anchor-navigation.component.tsx

src/components/dialog/dialog-test.stories.tsx

src/components/dialog/dialog.stories.tsx

src/components/duelling-picklist/picklist-group/picklist-group.component.tsx

edleeks87 · 2025-01-20T14:52:15Z

src/components/menu/__internal__/submenu/submenu.component.tsx

-  HTMLAnchorElement & HTMLButtonElement & HTMLDivElement,
-  SubmenuProps
->(
+const Submenu = React.forwardRef<HTMLAnchorElement, SubmenuProps>(


Question: is this type correct? As we can still pass an onClick to the parent item and that will cause it to use polymorphism to render a button

I guess it doesn't matter to TS at compile time though

Due to typing in styled-components, StyledMenuItemWrapper is inferred as a anchor element by default. Setting the ref type to HTMLAnchorElement | HTMLButtonElement results in type errors. It seems TypeScript cannot infer the ref could be of a different element type when the polymorphic as prop is passed. There may be technical detail I'm overlooking as to why its being inferred like this.

I also tried the following:

// menu-item.style.ts const StyledMenuItemWrapper = styled(Link)<StyledMenuItemWrapperProps>` /* css */ `;

but this caused further type errors due incorrect props being passed to Link. So I've opted for this as a workaround until we revisit our abstractions around Link.

No worries, it makes sense thanks for clearing it up

src/components/select/__internal__/select-list/select-list.test.tsx

quinnturner · 2025-01-20T20:40:48Z

I got on a call with @Parsium. Portals aren't opening when using <React.StrictMode>. I am not sure if this is considered a blocker for merging, but it's something to be aware of. If this is merged without fixing portals for StrictMode, consider adding documentation outlining this current limitation.

quinnturner · 2025-01-20T20:42:15Z

Also, as a side note: other than portals + StrictMode, our application is fully functional with both React 18 and React 19 using this pull request. It might be worth considering opening up the dependencies/peerDependencies restrictions to allow React 19.

in preparation for consuming latest version of React Testing Library and its sibling packages

BREAKING CHANGE: Both packages are now ESM-only, which may affect tools like Jest that run your project code in a Node.js environment. Adjust your bundler configuration to handle ESM code if issues arise.

…ble items A `MenuItem` is now only focusable when tabbing if it has an `href`, `onClick`, or `submenu` prop, or contains a focusable child.

BREAKING CHANGE: Temporary incompatibility with React Strict Mode. In React v18, Strict Mode now intentionally re-renders components and re-executes their effects and callbacks an extra time. This leads to unintended side effects in several Carbon components. A fix will be provided in advance of introducing React v19 support. If you encounter issues, you can either disable Strict Mode globally, or apply it selectively to specific parts of your application.

…purposes

…h about focus changes

…cy of onListScrollBottom calls

…focused

…Home/End key presses

…ng focusable content

…event listener

…p, Down, Home and End keys A `MenuItem` is now only focusable via Up, Down, Home and End key navigation if it has an `href`, `onClick`, or `submenu` prop, or contains a focusable child.

carbonci · 2025-02-24T08:59:14Z

🎉 This PR is included in version 148.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Parsium added the In Progress label Jan 8, 2025

Parsium self-assigned this Jan 8, 2025

Parsium force-pushed the react-18-pass-2 branch 4 times, most recently from 19621c9 to 7d2f7d1 Compare January 10, 2025 09:30

Parsium marked this pull request as ready for review January 10, 2025 11:04

Parsium requested review from a team as code owners January 10, 2025 11:04

Parsium marked this pull request as draft January 10, 2025 11:06

Parsium force-pushed the react-18-pass-2 branch 6 times, most recently from eaa07b1 to 26d2ea3 Compare January 17, 2025 15:53

Parsium added Pending Review Pending QA No UX QA Required and removed In Progress labels Jan 17, 2025

Parsium force-pushed the react-18-pass-2 branch from 26d2ea3 to 108266e Compare January 17, 2025 16:15

Parsium changed the title ~~feat: introduce support for react v18~~ feat: introduce support for react v18 (FE-6015) Jan 17, 2025

Parsium requested review from edleeks87 and nineteen88 January 20, 2025 08:50

nineteen88 reviewed Jan 20, 2025

View reviewed changes

edleeks87 reviewed Jan 20, 2025

View reviewed changes

Parsium mentioned this pull request Jan 21, 2025

feat: upgrade react-dnd and react-dnd-html5-backend to v16 #7106

Closed

14 tasks

Parsium force-pushed the react-18-pass-2 branch 2 times, most recently from 38b63ea to 87166ec Compare February 21, 2025 12:12

Parsium added 21 commits February 24, 2025 08:40

test: wrap interactions that update state with act wrapper

46350ba

in preparation for consuming latest version of React Testing Library and its sibling packages

chore: upgrade storybook packages to 8.4.7

c37a61a

feat: upgrade react-dnd and react-dnd-html5-backend to v16

3d495ec

BREAKING CHANGE: Both packages are now ESM-only, which may affect tools like Jest that run your project code in a Node.js environment. Adjust your bundler configuration to handle ESM code if issues arise.

feat(menu): let browser handle tabbing to prevent focus on non-focusa…

b0dcfba

…ble items A `MenuItem` is now only focusable when tabbing if it has an `href`, `onClick`, or `submenu` prop, or contains a focusable child.

feat(portrait): add data-element and data-role props for testing …

fad5723

…purposes

refactor: replace playwright wrapper with react 18 counterpart

5c1a4e0

feat: update @tanstack/react-virtual to version ^3.11.2

30581d7

test(select): use of aria-activedescendent for updating assistive tec…

2e5ba55

…h about focus changes

fix(select): debounce scroll handler on option list to reduce frequen…

112ed5e

…cy of onListScrollBottom calls

test(select): ensure mousedown tests adequately wait for input to be …

0c29a02

…focused

build: enforce linting rule to disallow React v18 features

001ef80

test(menu-item): refactor existing focus tests

a908c33

fix(menu): ensure focus state remains consistent between tabbing and …

5e2119e

…Home/End key presses

fix(menu-item): prevent root element from being focused when containi…

f086303

…ng focusable content

test(menu): ensure all MenuItems in tests are focusable

bd5f12e

docs(menu): add disclaimer regarding ensuring MenuItems are focusable

3f5087f

refactor(menu): remove click away listener in favour of submenu blur …

803b09d

…event listener

feat(menu): skip non-focusable submenu items when moving focus with U…

824115f

…p, Down, Home and End keys A `MenuItem` is now only focusable via Up, Down, Home and End key navigation if it has an `href`, `onClick`, or `submenu` prop, or contains a focusable child.

test(date): improve robustness of flaky test

7238ab1

feat(menu): prevent showing hover styling for non-focusable menu items

db8f54c

Parsium force-pushed the react-18-pass-2 branch from 87166ec to db8f54c Compare February 24, 2025 08:41

Parsium merged commit dbe234c into master Feb 24, 2025
28 checks passed

Parsium deleted the react-18-pass-2 branch February 24, 2025 08:55

carbonci added the released label Feb 24, 2025

Parsium removed the DO NOT MERGE label Mar 18, 2025

Parsium mentioned this pull request Dec 23, 2025

fix: resolve strict mode incompatibilities with portals and popups (FE-7197) #7688

Draft

14 tasks

feat: introduce support for react v18 (FE-6015) #7148

feat: introduce support for react v18 (FE-6015) #7148

Uh oh!

Conversation

Parsium commented Jan 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Exceptions

Uh oh!

Uh oh!

nineteen88 Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edleeks87 Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

edleeks87 Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

Parsium Jan 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edleeks87 Jan 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

quinnturner commented Jan 20, 2025

Uh oh!

quinnturner commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

carbonci commented Feb 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

Parsium commented Jan 8, 2025 •

edited

Loading

Parsium Jan 22, 2025 •

edited

Loading

quinnturner commented Jan 20, 2025 •

edited

Loading