Support React 18

[ryanwilsonperkin]

WHY are these changes introduced?

Fixes #5477

Adds explicit support for React 18 in the component library, website, and figma plugin. Fixes bugs and type errors that result.

WHAT is this pull request doing?

There are a few notable changes that we make in order to work with new behaviours in React 18:

1. The AfterInitialMount helper component gets a new prop onMount callback that will be invoked after the initial mount. This lets us avoid a timing issues in IndexTable that happens based on new mounting & effect processing behaviour that would otherwise cause a callback to invoked before a ref was actually available in the DOM.
2. An updated version of @shopify/react-testing as well as proper use of the act method throughout our tests. act was previously more lenient but gets stricter in React 18 about exactly how and when it should be invoked.
3. Removed unnecessary use of resetModules in some of our tests which was interfering with a global behaviour of the @shopify/react-testing library
4. Use a ref instead of state in the Konami code easter egg component. In React 18, state changes are now batched in more places, meaning that this handler was being invoked with stale references and was unable to track state changes appropriately. A ref works better in this scenario because we're trying to use a mutable store of value to ensure we're not relying on a stale state reference.
5. Fix type checking issues, most notably that useCallback functions now require parameter signatures and functional components no longer implicitly receive a children prop, and need to declare it explicitly now.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	209.01 KB (+2.09% 🔺)
polaris-react-esm	135.51 KB (+3.29% 🔺)
polaris-react-esnext	190.87 KB (+2.31% 🔺)
polaris-react-css	41.52 KB (0%)

[kyledurand]

This looks great @ryanwilsonperkin thank you for taking this on. I think next you'll want to /snapit for testing in web. Let me know if you want a hand with that

[kyledurand]

Why was this needed?

[ryanwilsonperkin]

actionMarkup will be used below and must be a ReactNode, but the value that gets passed in from primaryAction can be either a ReactNode or an "interface" object with some properties on it. So what's happening here is that we're initially assigning it to T | ReactNode and then in the isInterface condition we're refining that to just ReactNode, however for some reason the type assertion of the isInterface utility isn't working correctly so lower down when we try to use this as a ReactNode TypeScript still believes that it's either T | ReactNode.

React itself used to be more permissive about this, but is stricter in v18 and flags this as a potential error. By telling the compiler that it can only ever be a ReactNode and then assigning it as such in the two different conditions, we make the compiler happy, and don't change the functionality of the code.

[BPScott]

Rebased atop latest main. Only conflicts was some small ordering adjusts in package.json files

[chloerice]

/snapit

[github-actions]

🫰✨ Thanks @chloerice! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221007181635

yarn add @shopify/polaris@0.0.0-snapshot-release-20221007181635

[chloerice]

Thanks for tackling this upgrade @ryanwilsonperkin!! This fixes some bugs affecting the admin, including the IndexTable scrollbar bug 🎉 (Spinstance)

[BPScott]

@ryanwilsonperkin is vacationing (since Sept 27th, calendars suggest he'll be back on Tuesday). If the polaris crew is happy then I'm confident that this is good to merge without waiting for him to return and do the what-have-i-missed catchup.