Update @wordpress/components (#65576)

Automattic · Jul 18, 2022 · 98fce2a · 98fce2a
1 parent 238dd7b
commit 98fce2a
Show file tree

Hide file tree

Showing 25 changed files with 220 additions and 201 deletions.
diff --git a/apps/editing-toolkit/package.json b/apps/editing-toolkit/package.json
@@ -76,7 +76,7 @@
 		"@wordpress/base-styles": "^4.5.0",
 		"@wordpress/block-editor": "^9.1.0",
 		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/data-controls": "^2.9.0",

diff --git a/apps/o2-blocks/package.json b/apps/o2-blocks/package.json
@@ -26,7 +26,7 @@
 		"@wordpress/base-styles": "^4.5.0",
 		"@wordpress/block-editor": "^9.1.0",
 		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/editor": "^12.8.0",
 		"@wordpress/element": "^4.7.0",

diff --git a/apps/wpcom-block-editor/package.json b/apps/wpcom-block-editor/package.json
@@ -26,7 +26,7 @@
 		"@wordpress/base-styles": "^4.5.0",
 		"@wordpress/block-editor": "^9.1.0",
 		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/dom-ready": "^3.9.0",

diff --git a/client/lib/protect-form/index.tsx b/client/lib/protect-form/index.tsx
@@ -2,7 +2,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import debugModule from 'debug';
 import i18n from 'i18n-calypso';
 import page from 'page';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect, ComponentType } from 'react';
 
 /**
  * Module variables
@@ -79,15 +79,16 @@ export interface ProtectedFormProps {
 /*
  * HOC that passes markChanged/markSaved props to the wrapped component instance
  */
-export const protectForm = createHigherOrderComponent< ProtectedFormProps >( ( InnerComponent ) => {
-	return ( props ) => {
-		const { markChanged, markSaved } = useProtectForm();
-		const innerProps = { ...props, markChanged, markSaved } as React.ComponentProps<
-			typeof InnerComponent
-		>;
-		return <InnerComponent { ...innerProps } />;
-	};
-}, 'protectForm' );
+export const protectForm = createHigherOrderComponent(
+	< OuterProps, >( InnerComponent: ComponentType< OuterProps & ProtectedFormProps > ) => {
+		return ( props: OuterProps ) => {
+			const { markChanged, markSaved } = useProtectForm();
+			const innerProps = { ...props, markChanged, markSaved };
+			return <InnerComponent { ...innerProps } />;
+		};
+	},
+	'protectForm'
+);
 
 /*
  * Declarative variant that takes a 'isChanged' prop.

diff --git a/client/lib/route-modal/with-route-modal.tsx b/client/lib/route-modal/with-route-modal.tsx
@@ -1,15 +1,17 @@
 import { createHigherOrderComponent } from '@wordpress/compose';
 import useRouteModal, { RouteModalData } from './use-route-modal';
+import type { ComponentType } from 'react';
 
 export default function withRouteModal( queryKey: string, defaultValue?: string ) {
-	return createHigherOrderComponent< { routeModalData: RouteModalData } >(
-		( InnerComponent ) => ( props ) => {
-			const routeModalData = useRouteModal( queryKey, defaultValue );
-			const innerProps = { ...props, routeModalData } as React.ComponentProps<
-				typeof InnerComponent
-			>;
-			return <InnerComponent { ...innerProps } />;
-		},
+	return createHigherOrderComponent(
+		< OuterProps, >(
+				InnerComponent: ComponentType< OuterProps & { routeModalData: RouteModalData } >
+			) =>
+			( props: OuterProps ) => {
+				const routeModalData = useRouteModal( queryKey, defaultValue );
+				const innerProps = { ...props, routeModalData };
+				return <InnerComponent { ...innerProps } />;
+			},
 		'WithRouteModal'
 	);
 }
diff --git a/client/package.json b/client/package.json
@@ -72,7 +72,7 @@
 		"@wordpress/base-styles": "^4.5.0",
 		"@wordpress/block-editor": "^9.1.0",
 		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/data-controls": "^2.9.0",

diff --git a/docs/dependency-management.md b/docs/dependency-management.md
@@ -77,10 +77,10 @@ yarn remove -w lodash
 Run
 
 ```
-yarn upgrade <package>
+yarn up <package>
 
 # Example
-# yarn upgrade react-query
+# yarn up react-query
 ```
 
 Note that this won't change the required range of `react-query` (i.e. it won't modify `package.json`). Instead, it will try to update `react-query` and any of its dependencies to the highest version that satisfies the specified range.
@@ -91,10 +91,10 @@ For example, if we declare a dependency on `react-query@^2.24.0` it may update r
 Run
 
 ```
-yarn upgrade <package>@^<semver-range>
+yarn up <package>@^<semver-range>
 
 # Example
-# yarn upgrade react-query@^3.0.0
+# yarn up react-query@^3.0.0
 ```
 
 As before, it will update `react-query` and all its dependencies. But in this case, it _will_ change the required range (i.e. it will modify `package.json`)

diff --git a/package.json b/package.json
@@ -172,7 +172,7 @@
 		"@types/wordpress__data-controls": "^2.2.0",
 		"@types/wordpress__editor": "^10.0.1",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/element": "^4.7.0",
 		"@wordpress/i18n": "^4.9.0",

diff --git a/packages/design-picker/package.json b/packages/design-picker/package.json
@@ -33,7 +33,7 @@
 		"@automattic/js-utils": "workspace:^",
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/typography": "workspace:^",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/react-i18n": "^3.7.0",
 		"@wordpress/url": "^3.10.0",
 		"classnames": "^2.3.1",

diff --git a/packages/domain-picker/package.json b/packages/domain-picker/package.json
@@ -36,7 +36,7 @@
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/typography": "workspace:^",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/react-i18n": "^3.7.0",

diff --git a/packages/help-center/package.json b/packages/help-center/package.json
@@ -39,7 +39,7 @@
 		"@automattic/viewport-react": "workspace:^",
 		"@popperjs/core": "^2.10.2",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/i18n": "^4.9.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/primitives": "^3.7.0",

diff --git a/packages/i18n-utils/src/locale-context.tsx b/packages/i18n-utils/src/locale-context.tsx
@@ -93,13 +93,16 @@ export function useLocale(): string {
  * }
  * export default withLocale( MyComponent );
  */
-export const withLocale = createHigherOrderComponent< { locale: string } >( ( InnerComponent ) => {
-	return ( props ) => {
-		const locale = useLocale();
-		const innerProps = { ...props, locale } as React.ComponentProps< typeof InnerComponent >;
-		return <InnerComponent { ...innerProps } />;
-	};
-}, 'withLocale' );
+export const withLocale = createHigherOrderComponent(
+	< OuterProps, >( InnerComponent: React.ComponentType< OuterProps & { locale: string } > ) => {
+		return ( props: OuterProps ) => {
+			const locale = useLocale();
+			const innerProps = { ...props, locale };
+			return <InnerComponent { ...innerProps } />;
+		};
+	},
+	'withLocale'
+);
 
 /**
  * React hook providing whether the current locale slug belongs to English or not

diff --git a/packages/i18n-utils/src/localize-url.tsx b/packages/i18n-utils/src/localize-url.tsx
@@ -1,6 +1,6 @@
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { getLocaleSlug } from 'i18n-calypso';
-import { useCallback } from 'react';
+import { useCallback, ComponentType } from 'react';
 import { useLocale } from './locale-context';
 import {
 	localesWithBlog,
@@ -217,12 +217,17 @@ export function useLocalizeUrl() {
 	);
 }
 
-export const withLocalizeUrl = createHigherOrderComponent< {
-	localizeUrl: ReturnType< typeof useLocalizeUrl >;
-} >( ( InnerComponent ) => {
-	return ( props ) => {
-		const localizeUrl = useLocalizeUrl();
-		const innerProps = { ...props, localizeUrl } as React.ComponentProps< typeof InnerComponent >;
-		return <InnerComponent { ...innerProps } />;
-	};
-}, 'withLocalizeUrl' );
+export const withLocalizeUrl = createHigherOrderComponent(
+	< OuterProps, >(
+		InnerComponent: ComponentType<
+			OuterProps & { localizeUrl: ReturnType< typeof useLocalizeUrl > }
+		>
+	) => {
+		return ( props: OuterProps ) => {
+			const localizeUrl = useLocalizeUrl();
+			const innerProps = { ...props, localizeUrl };
+			return <InnerComponent { ...innerProps } />;
+		};
+	},
+	'withLocalizeUrl'
+);
diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json
@@ -31,7 +31,7 @@
 		"@automattic/search": "workspace:^",
 		"@babel/runtime": "^7.17.2",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/i18n": "^4.9.0",
 		"@wordpress/react-i18n": "^3.7.0"
 	},

diff --git a/packages/launch/package.json b/packages/launch/package.json
@@ -36,7 +36,7 @@
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/plans-grid": "workspace:^",
 		"@automattic/shopping-cart": "workspace:^",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/react-i18n": "^3.7.0",
 		"@wordpress/url": "^3.10.0",

diff --git a/packages/onboarding/package.json b/packages/onboarding/package.json
@@ -31,7 +31,7 @@
 	"dependencies": {
 		"@automattic/components": "workspace:^",
 		"@automattic/data-stores": "workspace:^",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/data": "^6.9.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/react-i18n": "^3.7.0",

diff --git a/packages/page-pattern-modal/package.json b/packages/page-pattern-modal/package.json
@@ -30,7 +30,7 @@
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/typography": "workspace:^",
 		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/element": "^4.7.0",
 		"@wordpress/i18n": "^4.9.0",

diff --git a/packages/page-pattern-modal/src/components/page-pattern-modal.tsx b/packages/page-pattern-modal/src/components/page-pattern-modal.tsx
@@ -18,7 +18,7 @@ interface PagePatternModalProps {
 	areTipsEnabled?: boolean;
 	hideWelcomeGuide: () => void;
 	insertPattern: ( title: string | null, blocks: unknown[] ) => void;
-	instanceId: number;
+	instanceId: string | number;
 	isOpen: boolean;
 	isWelcomeGuideActive?: boolean;
 	locale?: string;

diff --git a/packages/page-pattern-modal/src/components/pattern-selector-control.tsx b/packages/page-pattern-modal/src/components/pattern-selector-control.tsx
@@ -8,7 +8,7 @@ import type { PatternDefinition } from '../pattern-definition';
 const noop = () => undefined;
 
 interface PatternSelectorControlProps {
-	instanceId: number;
+	instanceId: string | number;
 	label: string;
 	legendLabel?: string;
 	locale?: string;

diff --git a/packages/plans-grid/package.json b/packages/plans-grid/package.json
@@ -32,7 +32,7 @@
 		"@automattic/data-stores": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/onboarding": "workspace:^",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/primitives": "^3.7.0",

diff --git a/packages/search/package.json b/packages/search/package.json
@@ -30,7 +30,7 @@
 		"@automattic/typography": "workspace:^",
 		"@babel/runtime": "^7.17.2",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/compose": "^5.7.0",
 		"@wordpress/icons": "^9.0.0",
 		"@wordpress/react-i18n": "^3.7.0",

diff --git a/packages/social-previews/package.json b/packages/social-previews/package.json
@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@emotion/react": "^11.4.1",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/i18n": "^4.9.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",

diff --git a/packages/tour-kit/package.json b/packages/tour-kit/package.json
@@ -35,7 +35,7 @@
 		"@automattic/viewport-react": "workspace:^",
 		"@popperjs/core": "^2.10.2",
 		"@wordpress/base-styles": "^4.5.0",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/dom": "^3.9.0",
 		"@wordpress/element": "^4.7.0",
 		"@wordpress/i18n": "^4.9.0",

diff --git a/packages/whats-new/package.json b/packages/whats-new/package.json
@@ -40,7 +40,7 @@
 		"@automattic/components": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/typography": "workspace:^",
-		"@wordpress/components": "^19.11.0",
+		"@wordpress/components": "^19.15.0",
 		"@wordpress/element": "^4.7.0",
 		"@wordpress/i18n": "^4.10.0",
 		"@wordpress/keycodes": "^3.10.0",