Add components to @woocommerce/customer-effort-score (#37112)

* Update src structure of @woocommerce/customer-effort-score

* Changelog

* Add dependencies to @woocommerce/customer-effort-score

* Move useCustomerEffortScoreExitPageTracker and utils to @woocommerce/customer-effort-score

* Fix up imports from @woocommerce/customer-effort-score

* Changelog

* Fix import of constant

* Mock @woocommerce/customer-effort-score in tests

* Move tests to @woocommerce/customer-effort-score

* Update lock file

* Update lock file from trunk

* Update lock file again... this time, tests pass

packages/js/customer-effort-score/changelog/update-move-ces-to-package

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add additional components to package.

packages/js/customer-effort-score/package.json

@@ -47,8 +47,10 @@
 		"@types/testing-library__jest-dom": "^5.14.3",
 		"@types/wordpress__components": "^19.10.3",
 		"@types/wordpress__data": "^6.0.0",
+		"@woocommerce/data": "workspace:*",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
+		"@woocommerce/navigation": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",

packages/js/customer-effort-score/src/components/customer-effort-score/index.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { CustomerFeedbackModal } from './customer-feedback-modal';
+import { CustomerFeedbackModal } from '../customer-feedback-modal';
 
 const noop = () => {};
 

packages/js/customer-effort-score/src/components/customer-effort-score/test/index.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { CustomerEffortScore } from '../customer-effort-score';
+import { CustomerEffortScore } from '..';
 
 const noop = () => {};
 

packages/js/customer-effort-score/src/constants.js

@@ -0,0 +1 @@
+export const ALLOW_TRACKING_OPTION_NAME = 'woocommerce_allow_tracking';

packages/js/customer-effort-score/src/hooks/use-customer-effort-score-exit-page-tracker/index.ts

@@ -10,7 +10,7 @@ import {
 	addCustomerEffortScoreExitPageListener,
 	addExitPage,
 	removeCustomerEffortScoreExitPageListener,
-} from './customer-effort-score-exit-page';
+} from '../../utils/customer-effort-score-exit-page';
 
 export const useCustomerEffortScoreExitPageTracker = (
 	pageId: string,

packages/js/customer-effort-score/src/index.ts

@@ -1,5 +1,8 @@
-export * from './customer-effort-score';
-export * from './customer-feedback-simple';
-export * from './customer-feedback-modal';
-export * from './product-mvp-feedback-modal';
-export * from './feedback-modal';
+export * from './components/customer-effort-score';
+export * from './components/customer-feedback-simple';
+export * from './components/customer-feedback-modal';
+export * from './components/product-mvp-feedback-modal';
+export * from './components/feedback-modal';
+export * from './hooks/use-customer-effort-score-exit-page-tracker';
+export * from './utils/customer-effort-score-exit-page';
+export * from './constants';

packages/js/customer-effort-score/src/style.scss

@@ -1,6 +1,6 @@
-@import 'customer-feedback-simple/customer-feedback-simple.scss';
-@import 'product-mvp-feedback-modal/product-mvp-feedback-modal.scss';
-@import 'feedback-modal/feedback-modal.scss';
+@import 'components/customer-feedback-simple/customer-feedback-simple.scss';
+@import 'components/product-mvp-feedback-modal/product-mvp-feedback-modal.scss';
+@import 'components/feedback-modal/feedback-modal.scss';
 
 .woocommerce-customer-effort-score__selection {
 	margin: 1em 0 1.5em 0;

packages/js/customer-effort-score/src/utils/customer-effort-score-exit-page.ts

@@ -9,7 +9,13 @@ import { getQuery } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
-import { ALLOW_TRACKING_OPTION_NAME } from './constants';
+import { ALLOW_TRACKING_OPTION_NAME } from '../constants';
+
+interface AdminWindow extends Window {
+	pagenow?: string;
+	adminpage?: string;
+}
+declare let window: AdminWindow;
 
 const CUSTOMER_EFFORT_SCORE_EXIT_PAGE_KEY = 'customer-effort-score-exit-page';
 
@@ -87,7 +93,7 @@ const eventListeners: Record< string, ( event: BeforeUnloadEvent ) => void > =
 /**
  * Adds unload event listener to add pageId to exit page list incase there were unsaved changes.
  *
- * @param {string}   pageId the page id of the page being exited early.
+ * @param {string}   pageId            the page id of the page being exited early.
  * @param {Function} hasUnsavedChanges callback to check if the page had unsaved changes.
  */
 export const addCustomerEffortScoreExitPageListener = (

plugins/woocommerce-admin/client/customer-effort-score-tracks/constants.ts

@@ -2,4 +2,3 @@ export const SHOWN_FOR_ACTIONS_OPTION_NAME =
 	'woocommerce_ces_shown_for_actions';
 export const ADMIN_INSTALL_TIMESTAMP_OPTION_NAME =
 	'woocommerce_admin_install_timestamp';
-export const ALLOW_TRACKING_OPTION_NAME = 'woocommerce_allow_tracking';

plugins/woocommerce-admin/client/customer-effort-score-tracks/customer-effort-score-tracks.js

@@ -4,7 +4,10 @@
 import { useState } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { recordEvent } from '@woocommerce/tracks';
-import { CustomerEffortScore } from '@woocommerce/customer-effort-score';
+import {
+	ALLOW_TRACKING_OPTION_NAME,
+	CustomerEffortScore,
+} from '@woocommerce/customer-effort-score';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
@@ -16,7 +19,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	SHOWN_FOR_ACTIONS_OPTION_NAME,
 	ADMIN_INSTALL_TIMESTAMP_OPTION_NAME,
-	ALLOW_TRACKING_OPTION_NAME,
 } from './constants';
 import { getStoreAgeInWeeks } from './utils';
 

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx

@@ -7,16 +7,14 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { WooFooterItem } from '@woocommerce/admin-layout';
 import { Pill } from '@woocommerce/components';
+import { ALLOW_TRACKING_OPTION_NAME } from '@woocommerce/customer-effort-score';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 
 /**
  * Internal dependencies
  */
 import './product-mvp-ces-footer.scss';
-import {
-	ALLOW_TRACKING_OPTION_NAME,
-	SHOWN_FOR_ACTIONS_OPTION_NAME,
-} from './constants';
+import { SHOWN_FOR_ACTIONS_OPTION_NAME } from './constants';
 import { STORE_KEY } from './data/constants';
 
 export const PRODUCT_MVP_CES_ACTION_OPTION_NAME =

plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx

@@ -3,6 +3,7 @@
  */
 import { applyFilters } from '@wordpress/hooks';
 import { useEffect } from '@wordpress/element';
+import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
 import QueryString, { parse } from 'qs';
 
 /**
@@ -13,7 +14,6 @@ import { ShippingRecommendations } from '../shipping';
 import { EmbeddedBodyProps } from './embedded-body-props';
 import { StoreAddressTour } from '../guided-tours/store-address-tour';
 import './style.scss';
-import { triggerExitPageCesSurvey } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
 
 type QueryParams = EmbeddedBodyProps;
 

plugins/woocommerce-admin/client/embedded-body-layout/test/embedded-body-layout.test.tsx

@@ -9,12 +9,9 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { EmbeddedBodyLayout } from '../embedded-body-layout';
 
-jest.mock(
-	'~/customer-effort-score-tracks/customer-effort-score-exit-page',
-	() => ( {
-		triggerExitPageCesSurvey: jest.fn(),
-	} )
-);
+jest.mock( '@woocommerce/customer-effort-score', () => ( {
+	triggerExitPageCesSurvey: jest.fn(),
+} ) );
 jest.mock( '@wordpress/data', () => ( {
 	...jest.requireActual( '@wordpress/data' ),
 	resolveSelect: jest.fn().mockReturnValue( {

plugins/woocommerce-admin/client/layout/index.js

@@ -17,6 +17,7 @@ import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { get, isFunction, identity, memoize } from 'lodash';
 import { parse } from 'qs';
+import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
 import { getHistory, getQuery } from '@woocommerce/navigation';
 import {
 	PLUGINS_STORE_NAME,
@@ -39,7 +40,6 @@ import Notices from './notices';
 import TransientNotices from './transient-notices';
 import { CustomerEffortScoreModalContainer } from '../customer-effort-score-tracks';
 import { getAdminSetting } from '~/utils/admin-settings';
-import { triggerExitPageCesSurvey } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
 import '~/activity-panel';
 import '~/mobile-banner';
 import './navigation';

plugins/woocommerce-admin/client/products/product-form-actions.tsx

@@ -13,6 +13,7 @@ import { chevronDown, check, Icon } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
 import { WooHeaderItem } from '@woocommerce/admin-layout';
 import { useFormContext } from '@woocommerce/components';
+import { useCustomerEffortScoreExitPageTracker } from '@woocommerce/customer-effort-score';
 import {
 	preventLeavingProductForm,
 	__experimentalUseProductHelper as useProductHelper,
@@ -32,7 +33,6 @@ import { store } from '@wordpress/viewport';
 import usePreventLeavingPage from '~/hooks/usePreventLeavingPage';
 import './product-form-actions.scss';
 import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer';
-import { useCustomerEffortScoreExitPageTracker } from '~/customer-effort-score-tracks/use-customer-effort-score-exit-page-tracker';
 
 export const ProductFormActions: React.FC = () => {
 	const {

plugins/woocommerce-admin/client/products/product-more-menu.tsx

@@ -9,6 +9,7 @@ import { getAdminLink } from '@woocommerce/settings';
 import { moreVertical } from '@wordpress/icons';
 import { OPTIONS_STORE_NAME, Product } from '@woocommerce/data';
 import { useFormContext } from '@woocommerce/components';
+import { ALLOW_TRACKING_OPTION_NAME } from '@woocommerce/customer-effort-score';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import { ClassicEditorIcon } from './images/classic-editor-icon';
 import { FeedbackIcon } from './images/feedback-icon';
 import { STORE_KEY as CES_STORE_KEY } from '~/customer-effort-score-tracks/data/constants';
 import { NEW_PRODUCT_MANAGEMENT } from '~/customer-effort-score-tracks/product-mvp-ces-footer';
-import { ALLOW_TRACKING_OPTION_NAME } from '~/customer-effort-score-tracks/constants';
 import './product-more-menu.scss';
 
 export const ProductMoreMenu = () => {

plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx

@@ -54,12 +54,9 @@ jest.mock( '@woocommerce/product-editor', () => {
 	};
 } );
 jest.mock( '~/hooks/usePreventLeavingPage' );
-jest.mock(
-	'~/customer-effort-score-tracks/use-customer-effort-score-exit-page-tracker',
-	() => ( {
-		useCustomerEffortScoreExitPageTracker: jest.fn(),
-	} )
-);
+jest.mock( '@woocommerce/customer-effort-score', () => ( {
+	useCustomerEffortScoreExitPageTracker: jest.fn(),
+} ) );
 
 describe( 'ProductFormActions', () => {
 	beforeEach( () => {

plugins/woocommerce-admin/client/wp-admin-scripts/order-tracking/exit-order-page.ts

@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+import { addCustomerEffortScoreExitPageListener } from '@woocommerce/customer-effort-score';
+
 /**
  * Internal dependencies
  */
-import { addCustomerEffortScoreExitPageListener } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
 import { staticFormDataToObject } from '~/utils/static-form-helper';
 
 type FormElements = {

plugins/woocommerce-admin/client/wp-admin-scripts/product-import-tracking/product-import-tracking.ts

@@ -1,15 +1,11 @@
 /**
  * External dependencies
  */
-import { getQuery } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
 import {
 	addExitPage,
 	removeExitPage,
-} from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
+} from '@woocommerce/customer-effort-score';
+import { getQuery } from '@woocommerce/navigation';
 
 const ACTION_NAME = 'import_products';
 

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/shared.ts

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
+import { addCustomerEffortScoreExitPageListener } from '@woocommerce/customer-effort-score';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
  */
 import { waitUntilElementIsPresent } from './utils';
-import { addCustomerEffortScoreExitPageListener } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
 
 /**
  * Get the product data.
@@ -135,7 +135,7 @@ const getProductData = () => {
 /**
  * Get the publish date as a string.
  *
- * @param prefix Prefix for date element selectors.
+ * @param  prefix Prefix for date element selectors.
  * @return string
  */
 const getPublishDate = ( prefix = '' ) => {
@@ -186,8 +186,8 @@ const getPublishingWidgetData = () => {
 /**
  * Prefix all object keys with a string.
  *
- * @param obj    Object to create keys from.
- * @param prefix Prefix used before all keys.
+ * @param  obj    Object to create keys from.
+ * @param  prefix Prefix used before all keys.
  * @return object
  */
 const prefixObjectKeys = (

plugins/woocommerce-admin/client/wp-admin-scripts/settings-tracking/exit-setting-page.ts

@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+import { addCustomerEffortScoreExitPageListener } from '@woocommerce/customer-effort-score';
+
 /**
  * Internal dependencies
  */
-import { addCustomerEffortScoreExitPageListener } from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
 import { staticFormDataToObject } from '~/utils/static-form-helper';
 
 type FormElements = {

plugins/woocommerce/changelog/update-move-ces-to-package

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Move CES components and utilities to @woocommerce/customer-effort-score

pnpm-lock.yaml

@@ -518,9 +518,11 @@ importers:
       '@types/testing-library__jest-dom': ^5.14.3
       '@types/wordpress__components': ^19.10.3
       '@types/wordpress__data': ^6.0.0
+      '@woocommerce/data': workspace:*
       '@woocommerce/eslint-plugin': workspace:*
       '@woocommerce/experimental': workspace:*
       '@woocommerce/internal-style-build': workspace:*
+      '@woocommerce/navigation': workspace:*
       '@wordpress/browserslist-config': wp-6.0
       '@wordpress/components': wp-6.0
       '@wordpress/compose': wp-6.0
@@ -548,7 +550,7 @@ importers:
       webpack-cli: ^3.3.12
     dependencies:
       '@woocommerce/experimental': link:../experimental
-      '@wordpress/components': 19.8.5_ivjkhzvx5dt6opkkf6frl2zoam
+      '@wordpress/components': 19.8.5_rysvg2ttzfworbkpz2ftlx73d4
       '@wordpress/compose': 5.4.1_react@17.0.2
       '@wordpress/data': 6.6.1_react@17.0.2
       '@wordpress/element': 4.4.1
@@ -557,18 +559,20 @@ importers:
       classnames: 2.3.1
       prop-types: 15.8.1
       react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-transition-group: 4.4.2_sfoxds7t5ydpegc3knd667wn6m
+      react-dom: 16.14.0_react@17.0.2
+      react-transition-group: 4.4.2_prpqlkd37azqwypxturxi7uyci
     devDependencies:
       '@babel/core': 7.17.8
-      '@testing-library/react': 12.1.4_sfoxds7t5ydpegc3knd667wn6m
+      '@testing-library/react': 12.1.4_prpqlkd37azqwypxturxi7uyci
       '@types/jest': 27.4.1
       '@types/prop-types': 15.7.4
       '@types/testing-library__jest-dom': 5.14.3
-      '@types/wordpress__components': 19.10.5_sfoxds7t5ydpegc3knd667wn6m
+      '@types/wordpress__components': 19.10.5_prpqlkd37azqwypxturxi7uyci
       '@types/wordpress__data': 6.0.0
+      '@woocommerce/data': link:../data
       '@woocommerce/eslint-plugin': link:../eslint-plugin
       '@woocommerce/internal-style-build': link:../internal-style-build
+      '@woocommerce/navigation': link:../navigation
       '@wordpress/browserslist-config': 4.1.3
       concurrently: 7.0.0
       css-loader: 3.6.0_webpack@5.70.0
@@ -13547,6 +13551,20 @@ packages:
       react-dom: 18.2.0_react@17.0.2
     dev: false
 
+  /@testing-library/react/12.1.4_prpqlkd37azqwypxturxi7uyci:
+    resolution: {integrity: sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@testing-library/dom': 8.11.3
+      '@types/react-dom': 17.0.17
+      react: 17.0.2
+      react-dom: 16.14.0_react@17.0.2
+    dev: true
+
   /@testing-library/react/12.1.4_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==}
     engines: {node: '>=12'}
@@ -14187,7 +14205,7 @@ packages:
       '@types/tinycolor2': 1.4.3
       '@types/wordpress__notices': 3.5.0
       '@types/wordpress__rich-text': 3.4.6
-      '@wordpress/element': 4.20.0
+      '@wordpress/element': 4.4.1
       downshift: 6.1.12_react@17.0.2
       re-resizable: 6.9.5_prpqlkd37azqwypxturxi7uyci
     transitivePeerDependencies:
@@ -15214,7 +15232,7 @@ packages:
       '@babel/runtime': 7.17.7
       '@wordpress/babel-plugin-import-jsx-pragma': 3.1.0_@babel+core@7.16.12
       '@wordpress/browserslist-config': 4.1.3
-      '@wordpress/element': 4.20.0
+      '@wordpress/element': 4.4.1
       '@wordpress/warning': 2.2.2
       browserslist: 4.19.3
       core-js: 3.21.1
@@ -15700,60 +15718,6 @@ packages:
       - react-with-direction
     dev: false
 
-  /@wordpress/components/19.8.5_ivjkhzvx5dt6opkkf6frl2zoam:
-    resolution: {integrity: sha512-36d8fSk/nWfNv2nEZrC2gLx1rN9rGWFt425yXoH6JiakDvdXacN/04xcxZGBRkS+JDz6v22uyPMEol9TzwXOLg==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      react: ^17.0.0
-      react-dom: ^17.0.0
-    dependencies:
-      '@babel/runtime': 7.19.0
-      '@emotion/cache': 11.10.5
-      '@emotion/css': 11.7.1_@babel+core@7.17.8
-      '@emotion/react': 11.10.5_mcptgafjogap2nfvnfqvfwh6uu
-      '@emotion/serialize': 1.1.1
-      '@emotion/styled': 11.8.1_c2qm47vaialpqni522adyu6za4
-      '@emotion/utils': 1.0.0
-      '@use-gesture/react': 10.2.10_react@17.0.2
-      '@wordpress/a11y': 3.28.0
-      '@wordpress/compose': 5.17.0_react@17.0.2
-      '@wordpress/date': 4.28.0
-      '@wordpress/deprecated': 3.28.0
-      '@wordpress/dom': 3.28.0
-      '@wordpress/element': 4.20.0
-      '@wordpress/escape-html': 2.28.0
-      '@wordpress/hooks': 3.28.0
-      '@wordpress/i18n': 4.28.0
-      '@wordpress/icons': 8.4.0
-      '@wordpress/is-shallow-equal': 4.28.0
-      '@wordpress/keycodes': 3.28.0
-      '@wordpress/primitives': 3.26.0
-      '@wordpress/rich-text': 5.17.0_react@17.0.2
-      '@wordpress/warning': 2.28.0
-      classnames: 2.3.1
-      colord: 2.9.2
-      dom-scroll-into-view: 1.2.1
-      downshift: 6.1.12_react@17.0.2
-      framer-motion: 6.2.8_sfoxds7t5ydpegc3knd667wn6m
-      gradient-parser: 0.1.5
-      highlight-words-core: 1.2.2
-      lodash: 4.17.21
-      memize: 1.1.0
-      moment: 2.29.4
-      re-resizable: 6.9.5_sfoxds7t5ydpegc3knd667wn6m
-      react: 17.0.2
-      react-colorful: 5.5.1_sfoxds7t5ydpegc3knd667wn6m
-      react-dates: 17.2.0_mbqv3i57zshgl3mhyvv367ttdu
-      react-dom: 17.0.2_react@17.0.2
-      react-resize-aware: 3.1.1_react@17.0.2
-      reakit: 1.3.11_sfoxds7t5ydpegc3knd667wn6m
-      uuid: 8.3.2
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@types/react'
-      - react-with-direction
-    dev: false
-
   /@wordpress/components/19.8.5_rysvg2ttzfworbkpz2ftlx73d4:
     resolution: {integrity: sha512-36d8fSk/nWfNv2nEZrC2gLx1rN9rGWFt425yXoH6JiakDvdXacN/04xcxZGBRkS+JDz6v22uyPMEol9TzwXOLg==}
     engines: {node: '>=12'}
@@ -15770,14 +15734,14 @@ packages:
       '@emotion/utils': 1.0.0
       '@use-gesture/react': 10.2.10_react@17.0.2
       '@wordpress/a11y': 3.28.0
-      '@wordpress/compose': 5.17.0_react@17.0.2
+      '@wordpress/compose': 5.4.1_react@17.0.2
       '@wordpress/date': 4.28.0
       '@wordpress/deprecated': 3.28.0
       '@wordpress/dom': 3.28.0
-      '@wordpress/element': 4.20.0
+      '@wordpress/element': 4.4.1
       '@wordpress/escape-html': 2.28.0
       '@wordpress/hooks': 3.28.0
-      '@wordpress/i18n': 4.28.0
+      '@wordpress/i18n': 4.6.1
       '@wordpress/icons': 8.4.0
       '@wordpress/is-shallow-equal': 4.28.0
       '@wordpress/keycodes': 3.28.0
@@ -16027,7 +15991,7 @@ packages:
       '@types/mousetrap': 1.6.9
       '@wordpress/deprecated': 3.28.0
       '@wordpress/dom': 3.28.0
-      '@wordpress/element': 4.20.0
+      '@wordpress/element': 4.4.1
       '@wordpress/is-shallow-equal': 4.28.0
       '@wordpress/keycodes': 3.28.0
       '@wordpress/priority-queue': 2.28.0
@@ -16037,7 +16001,6 @@ packages:
       react: 17.0.2
       react-resize-aware: 3.1.1_react@17.0.2
       use-memo-one: 1.1.2_react@17.0.2
-    dev: false
 
   /@wordpress/compose/6.5.0_react@17.0.2:
     resolution: {integrity: sha512-gtZwEeFFHGltsr0vqwyrxPbAcA6lVfE36s59mZBh9KHeC/s590q2FPQz+9jSE5Y+uQmnXZCtahCrjvnpnaBIUg==}
@@ -16209,9 +16172,9 @@ packages:
       react: ^17.0.0
     dependencies:
       '@babel/runtime': 7.19.0
-      '@wordpress/compose': 5.17.0_react@17.0.2
+      '@wordpress/compose': 5.4.1_react@17.0.2
       '@wordpress/deprecated': 3.28.0
-      '@wordpress/element': 4.20.0
+      '@wordpress/element': 4.4.1
       '@wordpress/is-shallow-equal': 4.28.0
       '@wordpress/priority-queue': 2.28.0
       '@wordpress/redux-routine': 4.28.0_redux@4.2.0
@@ -16518,7 +16481,6 @@ packages:
       lodash: 4.17.21
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
-    dev: false
 
   /@wordpress/element/4.8.0:
     resolution: {integrity: sha512-f2Mb70xvGxZWNWh5pFhOoRgrd+tKs9Xk9hpDgRB7iPel/zbAIxNebr0Jqm5Nt+MDiDl/dogTPc9GyrkYCm9u0g==}
@@ -17135,7 +17097,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.19.0
       '@wordpress/a11y': 3.28.0
-      '@wordpress/data': 6.15.0_react@17.0.2
+      '@wordpress/data': 6.6.1_react@17.0.2
       lodash: 4.17.21
       react: 17.0.2
     dev: false
@@ -35565,6 +35527,20 @@ packages:
       - '@types/react'
     dev: true
 
+  /react-transition-group/4.4.2_prpqlkd37azqwypxturxi7uyci:
+    resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    dependencies:
+      '@babel/runtime': 7.19.0
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 16.14.0_react@17.0.2
+    dev: false
+
   /react-transition-group/4.4.2_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==}
     peerDependencies:
@@ -35589,6 +35565,24 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
+  /react-with-direction/1.4.0_prpqlkd37azqwypxturxi7uyci:
+    resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
+    peerDependencies:
+      react: ^0.14 || ^15 || ^16
+      react-dom: ^0.14 || ^15 || ^16
+    dependencies:
+      airbnb-prop-types: 2.16.0_react@17.0.2
+      brcast: 2.0.2
+      deepmerge: 1.5.2
+      direction: 1.0.4
+      hoist-non-react-statics: 3.3.2
+      object.assign: 4.1.4
+      object.values: 1.1.5
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 16.14.0_react@17.0.2
+    dev: false
+
   /react-with-direction/1.4.0_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
     peerDependencies:
@@ -35651,7 +35645,7 @@ packages:
       object.assign: 4.1.4
       prop-types: 15.8.1
       react: 17.0.2
-      react-with-direction: 1.4.0_sfoxds7t5ydpegc3knd667wn6m
+      react-with-direction: 1.4.0_prpqlkd37azqwypxturxi7uyci
     dev: false
 
   /react-with-styles/4.2.0_tzgwoaxjvs23ve2qhnwxwqxt3e: