Update dependencies to support react 17 (#8305)

* Upgrade dependencies to support react17

Update pkg

Update @wordpress/api-fetch and gridicons

* Update test snapshots

* Update SnackbarList with latest react-spring

* Mock data.dispatch for task-list-item.test.tsx

* Remove '@wordpress/components/src/visually-hidden/style' import

wp-components has included it

* Update interpolateComponents import path

* Fix display-options test

* Add changelogs

Update changelogs

* Add @automattic/explat-client-react-helpers back

* Update webpack.config for explat-client-react-helpers

Update webpack config comment

Fix grammar

changelogs/update-react-17

@@ -0,0 +1,4 @@
+Significance: major
+Type: Dev
+
+Update dependencies to support react 17 and drop support for IE11. #8305

client/activity-panel/activity-card/test/__snapshots__/index.js.snap

@@ -18,7 +18,7 @@ exports[`ActivityCard should render a basic card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>
@@ -59,7 +59,7 @@ exports[`ActivityCard should render a custom icon on a card 1`] = `
       >
         <g>
           <path
-            d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z"
+            d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2a3 3 0 013 3c0 .386-.079.752-.212 1.091a74.515 74.515 0 012.191 1.808l-2.08 2.08a75.852 75.852 0 01-1.808-2.191A2.977 2.977 0 016 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.341-1.341A4.446 4.446 0 0017.5 12 4.5 4.5 0 0022 7.5c0-.725-.188-1.401-.493-2.007L18 9l-2-2 3.507-3.507A4.446 4.446 0 0017.5 3 4.5 4.5 0 0013 7.5c0 .725.188 1.401.493 2.007L3 20l2 2 6.848-6.848a68.562 68.562 0 005.977 5.449l1.425 1.149 1.5-1.5-1.149-1.425a68.562 68.562 0 00-5.449-5.977z"
           />
         </g>
       </svg>
@@ -100,7 +100,7 @@ exports[`ActivityCard should render a timestamp on a card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>
@@ -146,7 +146,7 @@ exports[`ActivityCard should render an action on a card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>
@@ -200,7 +200,7 @@ exports[`ActivityCard should render an unread bubble on a card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>
@@ -241,7 +241,7 @@ exports[`ActivityCard should render multiple actions on a card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>
@@ -298,7 +298,7 @@ exports[`ActivityCard supports a non-date "date" prop on a card 1`] = `
       >
         <g>
           <path
-            d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+            d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
           />
         </g>
       </svg>

client/activity-panel/display-options/test/index.js

@@ -53,14 +53,10 @@ describe( 'Activity Panel - Homescreen Display Options', () => {
 		fireEvent.click( getByRole( 'button', { name: 'Display options' } ) );
 
 		// Verify the default of two columns.
-		expect(
-			getByText( 'Single column', { selector: 'button' } )
-		).toBeChecked();
-		expect(
-			getByText( 'Two columns', { selector: 'button' } )
-		).not.toBeChecked();
+		expect( getByText( 'Single column' ).parentNode ).toBeChecked();
+		expect( getByText( 'Two columns' ).parentNode ).not.toBeChecked();
 
-		fireEvent.click( getByText( 'Two columns', { selector: 'button' } ) );
+		fireEvent.click( getByText( 'Two columns' ).parentNode );
 
 		expect( recordEvent ).toHaveBeenCalledWith(
 			'homescreen_display_option',

client/analytics/settings/config.js

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies

client/homescreen/activity-panel/orders/index.js

@@ -5,7 +5,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import {
 	EmptyContent,
 	Flag,

client/homescreen/activity-panel/reviews/index.js

@@ -10,7 +10,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import PropTypes from 'prop-types';
 import StarIcon from 'gridicons/dist/star';
 import StarOutlineIcon from 'gridicons/dist/star-outline';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import {
 	EmptyContent,
 	Link,

client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js

@@ -5,7 +5,7 @@ import React, { useState, useEffect } from '@wordpress/element';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { recordEvent } from '@woocommerce/tracks';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import classNames from 'classnames';
 import { Link } from '@woocommerce/components';
 

client/layout/store-alerts/index.js

@@ -12,7 +12,7 @@ import {
 	SelectControl,
 } from '@wordpress/components';
 import classnames from 'classnames';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import moment from 'moment';

client/layout/transient-notices/snackbar/list.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { omit, noop } from 'lodash';
-import { useTransition, animated } from 'react-spring/web.cjs';
+import { useTransition, animated } from '@react-spring/web';
 import { useReducedMotion } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
@@ -32,7 +32,8 @@ function SnackbarList( {
 } ) {
 	const isReducedMotion = useReducedMotion();
 	const [ refMap ] = useState( () => new WeakMap() );
-	const transitions = useTransition( notices, ( notice ) => notice.id, {
+	const transitions = useTransition( notices, {
+		keys: ( notice ) => notice.id,
 		from: { opacity: 0, height: 0 },
 		enter: ( item ) => async ( next ) =>
 			await next( {
@@ -56,8 +57,8 @@ function SnackbarList( {
 	return (
 		<div className={ className }>
 			{ children }
-			{ transitions.map( ( { item: notice, key, props: style } ) => (
-				<animated.div key={ key } style={ style }>
+			{ transitions( ( style, notice ) => (
+				<animated.div style={ style }>
 					<div
 						className="components-snackbar-list__notice-container"
 						ref={ ( ref ) => ref && refMap.set( notice, ref ) }

client/marketing/components/knowledge-base/ReadBlogMessage.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Link } from '@woocommerce/components';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 
 const ReadBlogMessage = () => {
 	return interpolateComponents( {

client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js

@@ -7,7 +7,7 @@ import { Text } from '@woocommerce/experimental';
 import { Link } from '@woocommerce/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { pluginNames, ONBOARDING_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { useDispatch, useSelect } from '@wordpress/data';

client/profile-wizard/steps/product-types/label.js

@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, Popover, Tooltip } from '@wordpress/components';
 import { Fragment, useState } from '@wordpress/element';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { Link, Pill } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { Icon, info } from '@wordpress/icons';

client/profile-wizard/steps/product-types/product-type.js

@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, Popover, Tooltip } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import interpolateComponents from 'interpolate-components';
+import interpolateComponents from '@automattic/interpolate-components';
 import { Link, Pill } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { Icon, info } from '@wordpress/icons';