diff --git a/changelogs/update-react-17 b/changelogs/update-react-17 new file mode 100644 index 00000000000..7011ee63d62 --- /dev/null +++ b/changelogs/update-react-17 @@ -0,0 +1,4 @@ +Significance: major +Type: Dev + +Update dependencies to support react 17 and drop support for IE11. #8305 diff --git a/client/activity-panel/activity-card/test/__snapshots__/index.js.snap b/client/activity-panel/activity-card/test/__snapshots__/index.js.snap index 6691e874e38..cdb444fc6b2 100644 --- a/client/activity-panel/activity-card/test/__snapshots__/index.js.snap +++ b/client/activity-panel/activity-card/test/__snapshots__/index.js.snap @@ -18,7 +18,7 @@ exports[`ActivityCard should render a basic card 1`] = ` > @@ -59,7 +59,7 @@ exports[`ActivityCard should render a custom icon on a card 1`] = ` > @@ -100,7 +100,7 @@ exports[`ActivityCard should render a timestamp on a card 1`] = ` > @@ -146,7 +146,7 @@ exports[`ActivityCard should render an action on a card 1`] = ` > @@ -200,7 +200,7 @@ exports[`ActivityCard should render an unread bubble on a card 1`] = ` > @@ -241,7 +241,7 @@ exports[`ActivityCard should render multiple actions on a card 1`] = ` > @@ -298,7 +298,7 @@ exports[`ActivityCard supports a non-date "date" prop on a card 1`] = ` > diff --git a/client/activity-panel/display-options/test/index.js b/client/activity-panel/display-options/test/index.js index 6891113362c..11e5690e94b 100644 --- a/client/activity-panel/display-options/test/index.js +++ b/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', diff --git a/client/analytics/settings/config.js b/client/analytics/settings/config.js index aa4fbbb5e95..029231140b9 100644 --- a/client/analytics/settings/config.js +++ b/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 diff --git a/client/homescreen/activity-panel/orders/index.js b/client/homescreen/activity-panel/orders/index.js index 98c1f6acc80..1ac1983991d 100644 --- a/client/homescreen/activity-panel/orders/index.js +++ b/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, diff --git a/client/homescreen/activity-panel/reviews/index.js b/client/homescreen/activity-panel/reviews/index.js index 089664022a7..49a11bbae17 100644 --- a/client/homescreen/activity-panel/reviews/index.js +++ b/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, diff --git a/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js b/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js index 3f5e5ab0f4f..1afe59e0cb6 100644 --- a/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js +++ b/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'; diff --git a/client/layout/store-alerts/index.js b/client/layout/store-alerts/index.js index c3520c8f58a..f186b305139 100644 --- a/client/layout/store-alerts/index.js +++ b/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'; diff --git a/client/layout/transient-notices/snackbar/list.js b/client/layout/transient-notices/snackbar/list.js index 9cf713b483f..ab1aa3c2c5a 100644 --- a/client/layout/transient-notices/snackbar/list.js +++ b/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 (
{ children } - { transitions.map( ( { item: notice, key, props: style } ) => ( - + { transitions( ( style, notice ) => ( +
ref && refMap.set( notice, ref ) } diff --git a/client/marketing/components/knowledge-base/ReadBlogMessage.js b/client/marketing/components/knowledge-base/ReadBlogMessage.js index 867cec22cda..cb016709341 100644 --- a/client/marketing/components/knowledge-base/ReadBlogMessage.js +++ b/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( { diff --git a/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js b/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js index 6b1903c5c19..9a79b4e9e5f 100644 --- a/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js +++ b/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'; diff --git a/client/profile-wizard/steps/product-types/label.js b/client/profile-wizard/steps/product-types/label.js index 9dd92b7e202..6cdaee3e2f8 100644 --- a/client/profile-wizard/steps/product-types/label.js +++ b/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'; diff --git a/client/profile-wizard/steps/product-types/product-type.js b/client/profile-wizard/steps/product-types/product-type.js index a77752c936d..cda31bd6999 100644 --- a/client/profile-wizard/steps/product-types/product-type.js +++ b/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'; diff --git a/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap b/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap index e1aead39013..c80a52c4829 100644 --- a/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap +++ b/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap @@ -9,120 +9,145 @@ exports[`ProductTypes should render product types 1`] = ` class="woocommerce-profile-wizard__step-header" >

What type of products will be listed?

Choose any that apply

- - - - +
+
+
+
+ + - + +
-
- - - - -
+ Continue +
+ aria-hidden="true" + class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0" + data-wp-c16t="true" + data-wp-component="Elevation" + /> +

Display monthly prices

@@ -156,12 +183,13 @@ you can purchase and install it later.
-

Billing is annual. All purchases are covered by our 30 day money back guarantee and include access to support and updates. Extensions will be added to a cart for you to purchase later. -

+
@@ -176,120 +204,145 @@ exports[`ProductTypes should show annual prices on toggle 1`] = ` class="woocommerce-profile-wizard__step-header" >

What type of products will be listed?

Choose any that apply

- - - - +
+
+
+
+ + - + +
-
- - - - -
+ Continue +
+ aria-hidden="true" + class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0" + data-wp-c16t="true" + data-wp-component="Elevation" + /> +

Display monthly prices

@@ -323,12 +378,13 @@ you can purchase and install it later.
-

Billing is annual. All purchases are covered by our 30 day money back guarantee and include access to support and updates. Extensions will be added to a cart for you to purchase later. -

+ diff --git a/client/profile-wizard/steps/product-types/test/__snapshots__/product-type.js.snap b/client/profile-wizard/steps/product-types/test/__snapshots__/product-type.js.snap index e2e8a3e8139..61fed474e40 100644 --- a/client/profile-wizard/steps/product-types/test/__snapshots__/product-type.js.snap +++ b/client/profile-wizard/steps/product-types/test/__snapshots__/product-type.js.snap @@ -19,7 +19,6 @@ exports[`ProductType should render the product type 1`] = ` aria-hidden="true" focusable="false" height="24" - role="img" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @@ -31,8 +30,9 @@ exports[`ProductType should render the product type 1`] = `