From 3e81dfb0bc0469e188732ec66a03ed46e0e9a146 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 23 Oct 2024 20:09:52 +0900
Subject: [PATCH] Interface: Use plugin context hook instead of HoC (#66362)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../complementary-area-context/index.js         | 12 ------------
 .../complementary-area-toggle/index.js          | 13 +++++++------
 .../src/components/complementary-area/index.js  | 17 +++++++++--------
 3 files changed, 16 insertions(+), 26 deletions(-)
 delete mode 100644 packages/interface/src/components/complementary-area-context/index.js

diff --git a/packages/interface/src/components/complementary-area-context/index.js b/packages/interface/src/components/complementary-area-context/index.js
deleted file mode 100644
index bdfc6869e1e51d..00000000000000
--- a/packages/interface/src/components/complementary-area-context/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index 2f8d8dd413674b..40b4dd99be7432 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -3,12 +3,12 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
 /**
  * Whether the role supports checked state.
@@ -29,17 +29,20 @@ function roleSupportsCheckedState( role ) {
 	].includes( role );
 }
 
-function ComplementaryAreaToggle( {
+export default function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
-	identifier,
-	icon,
+	identifier: identifierProp,
+	icon: iconProp,
 	selectedIcon,
 	name,
 	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
 	const isSelected = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
@@ -70,5 +73,3 @@ function ComplementaryAreaToggle( {
 		/>
 	);
 }
-
-export default complementaryAreaContext( ComplementaryAreaToggle );
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 84334f6b2659b4..ff4c3eb1469789 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -25,6 +25,7 @@ import {
 	useViewportMatch,
 	usePrevious,
 } from '@wordpress/compose';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -32,7 +33,6 @@ import {
 import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
-import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
@@ -171,10 +171,10 @@ function ComplementaryArea( {
 	children,
 	className,
 	closeLabel = __( 'Close plugin' ),
-	identifier,
+	identifier: identifierProp,
 	header,
 	headerClassName,
-	icon,
+	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
 	scope,
@@ -183,6 +183,10 @@ function ComplementaryArea( {
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
+
 	// This state is used to delay the rendering of the Fill
 	// until the initial effect runs.
 	// This prevents the animation from running on mount if
@@ -344,9 +348,6 @@ function ComplementaryArea( {
 	);
 }
 
-const ComplementaryAreaWrapped =
-	withComplementaryAreaContext( ComplementaryArea );
-
-ComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;
+ComplementaryArea.Slot = ComplementaryAreaSlot;
 
-export default ComplementaryAreaWrapped;
+export default ComplementaryArea;