Move product-editor CES-related components and utilities (#37131)

* Update package.json and lock file
* Move ProductMVPFeedbackModal to @woocommerce/product-editor
* Move ProductMVPFeedbackModalContainer to @woocommerce/product-editor
* Move ProductMVPCESFooter and useProductMVPCESFooter to @woocommerce/product-editor
* FIx mock of __experimentalUseProductMVPCESFooter in test
This commit is contained in:
Matt Sherman 2023-03-28 13:38:08 -04:00 committed by GitHub
parent a1ed69bc0c
commit eab7750208
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 116 additions and 76 deletions

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Move ProductMVPFeedbackModal to @woocommerce/product-editor

View File

@ -4,5 +4,4 @@ export * from './customer-effort-score-tracks';
export * from './customer-effort-score-tracks-container';
export * from './customer-feedback-simple';
export * from './customer-feedback-modal';
export * from './product-mvp-feedback-modal';
export * from './feedback-modal';

View File

@ -1,5 +1,4 @@
@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 {

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Move CES-related components to @woocommerce/product-editor

View File

@ -29,11 +29,14 @@
},
"dependencies": {
"@types/lodash": "^4.14.179",
"@types/prop-types": "^15.7.4",
"@types/wordpress__blocks": "^11.0.7",
"@woocommerce/admin-layout": "workspace:*",
"@woocommerce/components": "workspace:*",
"@woocommerce/currency": "workspace:*",
"@woocommerce/customer-effort-score": "workspace:*",
"@woocommerce/data": "workspace:^4.1.0",
"@woocommerce/experimental": "workspace:*",
"@woocommerce/navigation": "workspace:^8.1.0",
"@woocommerce/number": "workspace:*",
"@woocommerce/settings": "^1.0.0",
@ -56,6 +59,7 @@
"@wordpress/url": "wp-6.0",
"classnames": "^2.3.1",
"lodash": "^4.17.21",
"prop-types": "^15.8.1",
"react-router-dom": "^6.3.0"
},
"devDependencies": {

View File

@ -19,3 +19,6 @@ export {
BlockIcon as __experimentalBlockIcon,
BlockIconProps,
} from './block-icon';
export { ProductMVPCESFooter as __experimentalProductMVPCESFooter } from './product-mvp-ces-footer';
export { ProductMVPFeedbackModal as __experimentalProductMVPFeedbackModal } from './product-mvp-feedback-modal';
export { ProductMVPFeedbackModalContainer as __experimentalProductMVPFeedbackModalContainer } from './product-mvp-feedback-modal-container';

View File

@ -0,0 +1 @@
export * from './product-mvp-ces-footer';

View File

@ -4,6 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { createElement, Fragment } from '@wordpress/element';
import { closeSmall } from '@wordpress/icons';
import { WooFooterItem } from '@woocommerce/admin-layout';
import { Pill } from '@woocommerce/components';
@ -17,12 +18,10 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
/**
* Internal dependencies
*/
import './product-mvp-ces-footer.scss';
export const PRODUCT_MVP_CES_ACTION_OPTION_NAME =
'woocommerce_ces_product_mvp_ces_action';
export const NEW_PRODUCT_MANAGEMENT =
'woocommerce_new_product_management_enabled';
import {
PRODUCT_MVP_CES_ACTION_OPTION_NAME,
NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME,
} from '../../constants';
export const ProductMVPCESFooter: React.FC = () => {
const { showCesModal, showProductMVPFeedbackModal } =
@ -107,7 +106,7 @@ export const ProductMVPCESFooter: React.FC = () => {
[ PRODUCT_MVP_CES_ACTION_OPTION_NAME ]: 'hide',
} );
updateOptions( {
[ NEW_PRODUCT_MANAGEMENT ]: 'no',
[ NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME ]: 'no',
} );
showProductMVPFeedbackModal();
};

View File

@ -0,0 +1 @@
export * from './product-mvp-feedback-modal-container';

View File

@ -2,15 +2,18 @@
* External dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import {
ProductMVPFeedbackModal,
STORE_KEY,
} from '@woocommerce/customer-effort-score';
import { createElement } from '@wordpress/element';
import { STORE_KEY } from '@woocommerce/customer-effort-score';
import { recordEvent } from '@woocommerce/tracks';
import { getAdminLink } from '@woocommerce/settings';
import { useFormContext } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
/**
* Internal dependencies
*/
import { ProductMVPFeedbackModal } from '../product-mvp-feedback-modal';
export const ProductMVPFeedbackModalContainer: React.FC< {
productId?: number;
} > = ( { productId: _productId } ) => {

View File

@ -4,14 +4,10 @@
import { createElement, Fragment, useState } from '@wordpress/element';
import PropTypes from 'prop-types';
import { CheckboxControl, TextareaControl } from '@wordpress/components';
import { FeedbackModal } from '@woocommerce/customer-effort-score';
import { Text } from '@woocommerce/experimental';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { FeedbackModal } from '../feedback-modal';
/**
* Provides a modal requesting customer feedback.
*

View File

@ -1,3 +1,8 @@
export const PRODUCT_MVP_CES_ACTION_OPTION_NAME =
'woocommerce_ces_product_mvp_ces_action';
export const NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME =
'woocommerce_new_product_management_enabled';
export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';

View File

@ -1,3 +1,4 @@
export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper';
export { useProductMVPCESFooter as __experimentalUseProductMVPCESFooter } from './use-product-mvp-ces-footer';
export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order';
export { useCurrencyInputProps as __experimentalUseCurrencyInputProps } from './use-currency-input-props';

View File

@ -0,0 +1 @@
export * from './use-product-mvp-ces-footer';

View File

@ -7,7 +7,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
/**
* Internal dependencies
*/
import { PRODUCT_MVP_CES_ACTION_OPTION_NAME } from './product-mvp-ces-footer';
import { PRODUCT_MVP_CES_ACTION_OPTION_NAME } from '../../constants';
async function isProductMVPCESHidden(): Promise< boolean > {
const productCESAction: string = await resolveSelect(

View File

@ -1,5 +1,9 @@
export * from './components';
export { DETAILS_SECTION_ID, TAB_GENERAL_ID } from './constants';
export {
DETAILS_SECTION_ID,
NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME,
TAB_GENERAL_ID,
} from './constants';
/**
* Utils

View File

@ -9,3 +9,5 @@
@import 'components/tab/style.scss';
@import 'components/tabs/style.scss';
@import 'components/details-summary-block/style.scss';
@import 'components/product-mvp-ces-footer/style.scss';
@import 'components/product-mvp-feedback-modal/style.scss';

View File

@ -10,12 +10,12 @@ import {
ALLOW_TRACKING_OPTION_NAME,
STORE_KEY as CES_STORE_KEY,
} from '@woocommerce/customer-effort-score';
import { NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME } from '@woocommerce/product-editor';
/**
* Internal dependencies
*/
import { ClassicEditorIcon } from '../../images/classic-editor-icon';
import { NEW_PRODUCT_MANAGEMENT } from '~/customer-effort-score-tracks/product-mvp-ces-footer';
export const ClassicEditorMenuItem = ( {
onClose,
@ -57,7 +57,7 @@ export const ClassicEditorMenuItem = ( {
onClick={ () => {
if ( allowTracking ) {
updateOptions( {
[ NEW_PRODUCT_MANAGEMENT ]: 'no',
[ NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME ]: 'no',
} );
showProductMVPFeedbackModal();
onClose();

View File

@ -1,7 +1,10 @@
/**
* External dependencies
*/
import { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
import {
__experimentalProductMVPFeedbackModalContainer as ProductMVPFeedbackModalContainer,
__experimentalWooProductMoreMenuItem as WooProductMoreMenuItem,
} from '@woocommerce/product-editor';
import { registerPlugin } from '@wordpress/plugins';
import { WooHeaderItem } from '@woocommerce/admin-layout';
@ -13,7 +16,6 @@ import { useEntityProp } from '@wordpress/core-data';
/**
* Internal dependencies
*/
import { ProductMVPFeedbackModalContainer } from '~/customer-effort-score-tracks/product-mvp-feedback-modal-container';
import {
FeedbackMenuItem,
ClassicEditorMenuItem,

View File

@ -1,8 +1,10 @@
/**
* Internal dependencies
* External dependencies
*/
import { ProductMVPCESFooter } from '~/customer-effort-score-tracks/product-mvp-ces-footer';
import { ProductMVPFeedbackModalContainer } from '~/customer-effort-score-tracks/product-mvp-feedback-modal-container';
import {
__experimentalProductMVPCESFooter as ProductMVPCESFooter,
__experimentalProductMVPFeedbackModalContainer as ProductMVPFeedbackModalContainer,
} from '@woocommerce/product-editor';
export const ProductFormFooter: React.FC = () => {
return (

View File

@ -17,6 +17,7 @@ import { useCustomerEffortScoreExitPageTracker } from '@woocommerce/customer-eff
import {
preventLeavingProductForm,
__experimentalUseProductHelper as useProductHelper,
__experimentalUseProductMVPCESFooter as useProductMVPCESFooter,
} from '@woocommerce/product-editor';
import { Product } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
@ -31,7 +32,6 @@ import { store } from '@wordpress/viewport';
* Internal dependencies
*/
import './product-form-actions.scss';
import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer';
export const ProductFormActions: React.FC = () => {
const {

View File

@ -29,15 +29,6 @@ jest.mock( '@wordpress/data', () => ( {
useSelect: jest.fn().mockReturnValue( { productCESAction: 'hide' } ),
} ) );
jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
jest.mock(
'~/customer-effort-score-tracks/use-product-mvp-ces-footer',
() => ( {
useProductMVPCESFooter: () => ( {
onPublish: onPublishCES,
onSaveDraft: onDraftCES,
} ),
} )
);
jest.mock( '@woocommerce/admin-layout', () => ( {
WooHeaderItem: ( props: { children: () => React.ReactElement } ) => (
<Fragment { ...props }>{ props.children() }</Fragment>
@ -51,6 +42,10 @@ jest.mock( '@woocommerce/product-editor', () => {
copyProductWithStatus,
deleteProductAndRedirect,
} ),
__experimentalUseProductMVPCESFooter: () => ( {
onPublish: onPublishCES,
onSaveDraft: onDraftCES,
} ),
};
} );
jest.mock( '@woocommerce/navigation', () => ( {

View File

@ -1,9 +1,13 @@
/**
* External dependencies
*/
import { __experimentalUseProductMVPCESFooter as useProductMVPCESFooter } from '@woocommerce/product-editor';
/**
* Internal dependencies
*/
import { ProductTour } from './product-tour';
import { ProductTourModal } from './product-tour-modal';
import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer';
import { useProductTour } from './use-product-tour';
export const ProductTourContainer: React.FC = () => {

View File

@ -20,12 +20,7 @@
"~/*": [ "*" ]
},
"rootDir": "client",
"typeRoots": [
"./client/typings",
"./node_modules/@types"
]
"typeRoots": [ "./client/typings", "./node_modules/@types" ]
},
"include": [
"./client/**/*"
]
"include": [ "./client/**/*" ]
}

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Move components to @woocommerce/product-editor

View File

@ -1418,6 +1418,7 @@ importers:
'@testing-library/user-event': ^13.5.0
'@types/jest': ^27.4.1
'@types/lodash': ^4.14.179
'@types/prop-types': ^15.7.4
'@types/react': ^17.0.2
'@types/testing-library__jest-dom': ^5.14.3
'@types/wordpress__block-editor': ^7.0.0
@ -1432,8 +1433,10 @@ importers:
'@woocommerce/admin-layout': workspace:*
'@woocommerce/components': workspace:*
'@woocommerce/currency': workspace:*
'@woocommerce/customer-effort-score': workspace:*
'@woocommerce/data': workspace:^4.1.0
'@woocommerce/eslint-plugin': workspace:*
'@woocommerce/experimental': workspace:*
'@woocommerce/internal-js-tests': workspace:*
'@woocommerce/internal-style-build': workspace:*
'@woocommerce/navigation': workspace:^8.1.0
@ -1466,6 +1469,7 @@ importers:
lodash: ^4.17.21
postcss: ^8.4.7
postcss-loader: ^4.3.0
prop-types: ^15.8.1
react: ^17.0.2
react-dom: ^17.0.2
react-hooks^8.0.1: link:@testing-library/react-hooks^8.0.1
@ -1478,11 +1482,14 @@ importers:
webpack-cli: ^3.3.12
dependencies:
'@types/lodash': 4.14.184
'@types/prop-types': 15.7.5
'@types/wordpress__blocks': 11.0.7_sfoxds7t5ydpegc3knd667wn6m
'@woocommerce/admin-layout': link:../admin-layout
'@woocommerce/components': link:../components
'@woocommerce/currency': link:../currency
'@woocommerce/customer-effort-score': link:../customer-effort-score
'@woocommerce/data': link:../data
'@woocommerce/experimental': link:../experimental
'@woocommerce/navigation': link:../navigation
'@woocommerce/number': link:../number
'@woocommerce/settings': 1.0.0
@ -1505,6 +1512,7 @@ importers:
'@wordpress/url': 3.7.1
classnames: 2.3.1
lodash: 4.17.21
prop-types: 15.8.1
react-router-dom: 6.3.0_sfoxds7t5ydpegc3knd667wn6m
devDependencies:
'@babel/core': 7.21.3
@ -16608,21 +16616,21 @@ packages:
'@emotion/styled': 11.8.1_6t3indjc5ssefvr44gr3wo2uqu
'@emotion/utils': 1.0.0
'@use-gesture/react': 10.2.10_react@17.0.2
'@wordpress/a11y': 3.6.1
'@wordpress/a11y': 3.28.0
'@wordpress/compose': 5.4.1_react@17.0.2
'@wordpress/date': 4.6.1
'@wordpress/deprecated': 3.6.1
'@wordpress/dom': 3.6.1
'@wordpress/date': 4.28.0
'@wordpress/deprecated': 3.28.0
'@wordpress/dom': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/escape-html': 2.28.0
'@wordpress/hooks': 3.6.1
'@wordpress/hooks': 3.28.0
'@wordpress/i18n': 4.6.1
'@wordpress/icons': 8.2.3
'@wordpress/is-shallow-equal': 4.28.0
'@wordpress/keycodes': 3.6.1
'@wordpress/primitives': 3.4.1
'@wordpress/rich-text': 5.4.2_react@17.0.2
'@wordpress/warning': 2.6.1
'@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
@ -17088,11 +17096,11 @@ packages:
'@babel/runtime': 7.21.0
'@types/lodash': 4.14.184
'@types/mousetrap': 1.6.9
'@wordpress/deprecated': 3.6.1
'@wordpress/dom': 3.6.1
'@wordpress/deprecated': 3.28.0
'@wordpress/dom': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/is-shallow-equal': 4.28.0
'@wordpress/keycodes': 3.6.1
'@wordpress/keycodes': 3.28.0
'@wordpress/priority-queue': 2.28.0
clipboard: 2.0.10
lodash: 4.17.21
@ -17128,10 +17136,10 @@ packages:
react: ^17.0.0
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/api-fetch': 6.3.1
'@wordpress/api-fetch': 6.25.0
'@wordpress/blocks': 11.18.0_react@17.0.2
'@wordpress/data': 6.6.1_react@17.0.2
'@wordpress/deprecated': 3.6.1
'@wordpress/deprecated': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/html-entities': 3.6.1
'@wordpress/i18n': 4.6.1
@ -17271,7 +17279,7 @@ packages:
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/compose': 5.4.1_react@17.0.2
'@wordpress/deprecated': 3.6.1
'@wordpress/deprecated': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/is-shallow-equal': 4.28.0
'@wordpress/priority-queue': 2.28.0
@ -17386,6 +17394,7 @@ packages:
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/hooks': 3.6.1
dev: false
/@wordpress/dom-ready/3.28.0:
resolution: {integrity: sha512-PFFAnuPUouV0uSDZN6G/B8yksybtxzS/6H53OZJEA3h3EsNCicKRMGSowkumvLwXA23HV0K2Kht6JuS+bDECzA==}
@ -17419,6 +17428,7 @@ packages:
dependencies:
'@babel/runtime': 7.21.0
lodash: 4.17.21
dev: false
/@wordpress/e2e-test-utils/3.0.0_ddjhsfu4aotkh3cuzmpsln6ywq:
resolution: {integrity: sha512-XMdR8DeKyDQRF5jKeUlOzP4pTRtoJuOLsNZRLUFUvnrs9y/7/hH17VmPbWp3TJGvV/eGKzO4+D+wJTsP9nJmIw==}
@ -17485,28 +17495,28 @@ packages:
react-dom: ^17.0.0
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/a11y': 3.6.1
'@wordpress/api-fetch': 6.3.1
'@wordpress/a11y': 3.28.0
'@wordpress/api-fetch': 6.25.0
'@wordpress/block-editor': 8.6.0_eqi5qhcxfphl6j3pngzexvnehi
'@wordpress/blocks': 11.18.0_react@17.0.2
'@wordpress/components': 19.8.5_eqi5qhcxfphl6j3pngzexvnehi
'@wordpress/compose': 5.4.1_react@17.0.2
'@wordpress/core-data': 4.4.5_react@17.0.2
'@wordpress/data': 6.6.1_react@17.0.2
'@wordpress/date': 4.6.1
'@wordpress/deprecated': 3.6.1
'@wordpress/date': 4.28.0
'@wordpress/deprecated': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/hooks': 3.6.1
'@wordpress/hooks': 3.28.0
'@wordpress/html-entities': 3.6.1
'@wordpress/i18n': 4.6.1
'@wordpress/icons': 8.2.3
'@wordpress/keyboard-shortcuts': 3.4.1_react@17.0.2
'@wordpress/keycodes': 3.6.1
'@wordpress/keycodes': 3.28.0
'@wordpress/media-utils': 3.4.1
'@wordpress/notices': 3.6.1_react@17.0.2
'@wordpress/notices': 3.28.0_react@17.0.2
'@wordpress/preferences': 1.3.0_eqi5qhcxfphl6j3pngzexvnehi
'@wordpress/reusable-blocks': 3.17.0_mtk4wljkd5jimhszw4p7nnxuzm
'@wordpress/rich-text': 5.4.2_react@17.0.2
'@wordpress/rich-text': 5.17.0_react@17.0.2
'@wordpress/server-side-render': 3.17.0_mtk4wljkd5jimhszw4p7nnxuzm
'@wordpress/url': 3.7.1
'@wordpress/wordcount': 3.28.0
@ -17807,6 +17817,7 @@ packages:
engines: {node: '>=12'}
dependencies:
'@babel/runtime': 7.21.0
dev: false
/@wordpress/html-entities/3.28.0:
resolution: {integrity: sha512-UAaU6au8UTrSkowkV33pE/EvdPov2mA9W51vh6t88KsJPzt4171EzIchGnQuzt04HuZLdLyWy2A+7JCOSbfhBA==}
@ -17865,7 +17876,7 @@ packages:
hasBin: true
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/hooks': 3.6.1
'@wordpress/hooks': 3.28.0
gettext-parser: 1.4.0
lodash: 4.17.21
memize: 1.1.0
@ -17887,7 +17898,7 @@ packages:
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/element': 4.4.1
'@wordpress/primitives': 3.4.1
'@wordpress/primitives': 3.26.0
dev: false
/@wordpress/icons/8.4.0:
@ -17915,17 +17926,17 @@ packages:
react-dom: ^17.0.0
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/a11y': 3.6.1
'@wordpress/a11y': 3.28.0
'@wordpress/components': 19.8.5_eqi5qhcxfphl6j3pngzexvnehi
'@wordpress/compose': 5.4.1_react@17.0.2
'@wordpress/data': 6.6.1_react@17.0.2
'@wordpress/deprecated': 3.6.1
'@wordpress/deprecated': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/i18n': 4.6.1
'@wordpress/icons': 8.2.3
'@wordpress/plugins': 4.4.3_react@17.0.2
'@wordpress/preferences': 1.3.0_eqi5qhcxfphl6j3pngzexvnehi
'@wordpress/viewport': 4.4.1_react@17.0.2
'@wordpress/viewport': 4.17.0_react@17.0.2
classnames: 2.3.1
lodash: 4.17.21
react: 17.0.2
@ -18109,7 +18120,7 @@ packages:
'@babel/runtime': 7.21.0
'@wordpress/data': 6.6.1_react@17.0.2
'@wordpress/element': 4.4.1
'@wordpress/keycodes': 3.6.1
'@wordpress/keycodes': 3.28.0
lodash: 4.17.21
react: 17.0.2
rememo: 3.0.0
@ -18146,13 +18157,14 @@ packages:
'@babel/runtime': 7.21.0
'@wordpress/i18n': 4.6.1
lodash: 4.17.21
dev: false
/@wordpress/media-utils/3.4.1:
resolution: {integrity: sha512-WNAaMqqw6Eqy61KTWBy1NlgXSZH82Cm2SPVbz0v6yhJ4ktJmSRFm7Fd4mTMFS/L7NKTxwo+DFqEHlTGKj3lyzQ==}
engines: {node: '>=12'}
dependencies:
'@babel/runtime': 7.21.0
'@wordpress/api-fetch': 6.3.1
'@wordpress/api-fetch': 6.25.0
'@wordpress/blob': 3.28.0
'@wordpress/element': 4.4.1
'@wordpress/i18n': 4.6.1
@ -18209,7 +18221,7 @@ packages:
'@babel/runtime': 7.21.0
'@wordpress/compose': 5.4.1_react@17.0.2
'@wordpress/element': 4.4.1
'@wordpress/hooks': 3.6.1
'@wordpress/hooks': 3.28.0
'@wordpress/icons': 8.2.3
lodash: 4.17.21
memize: 1.1.0