From ad133ba90117850442fd55fdb4acc99ec0e24ef4 Mon Sep 17 00:00:00 2001
From: Seghir Nadir <nadir.seghir@gmail.com>
Date: Wed, 27 Oct 2021 16:41:57 +0100
Subject: [PATCH] Return an element instead of a component in useViewSwitcher
 (https://github.com/woocommerce/woocommerce-blocks/pull/5016)

* return element instead of component in viewSwitcher

* use ToolbarGroup instead of Toolbar
---
 .../assets/js/blocks/cart-checkout/cart/edit.js       |  2 +-
 .../blocks/cart-checkout/shared/use-view-switcher.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
index 933f6af1169..d511ba71630 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
@@ -157,7 +157,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
 						setAttributes={ setAttributes }
 					/>
 					<BlockControls __experimentalShareWithChildBlocks>
-						<ViewSwitcherComponent />
+						{ ViewSwitcherComponent }
 					</BlockControls>
 					<CartBlockContext.Provider
 						value={ {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx
index 2813e71d302..7cde24b3ee3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useDispatch, select } from '@wordpress/data';
-import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
+import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import { Icon, eye } from '@woocommerce/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -19,15 +19,15 @@ export const useViewSwitcher = (
 	views: View[]
 ): {
 	currentView: string;
-	component: () => JSX.Element;
+	component: JSX.Element;
 } => {
 	const initialView = views[ 0 ];
 	const [ currentView, setCurrentView ] = useState( initialView );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const { getBlock } = select( blockEditorStore );
 
-	const ViewSwitcherComponent = () => (
-		<Toolbar>
+	const ViewSwitcherComponent = (
+		<ToolbarGroup>
 			<ToolbarDropdownMenu
 				label={ __( 'Switch view', 'woo-gutenberg-products-block' ) }
 				text={ currentView.label }
@@ -37,6 +37,7 @@ export const useViewSwitcher = (
 				controls={ views.map( ( view ) => ( {
 					...view,
 					title: view.label,
+					isActive: view.view === currentView.view,
 					onClick: () => {
 						setCurrentView( view );
 						selectBlock(
@@ -48,7 +49,7 @@ export const useViewSwitcher = (
 					},
 				} ) ) }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 
 	return {