Order menu items in product editor's more menu (kebab menu) (#41104)

packages/js/product-editor/changelog/update-order-more-menu-items-product-editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Support ordering of more menu items in product editor header.

packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx

@@ -1,37 +1,32 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
+import { Slot, Fill } from '@wordpress/components';
+import { createElement } from '@wordpress/element';
 import {
-	createSlotFill,
-	Slot as BaseSlot,
-	Fill as BaseFill,
-} from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
+	createOrderedChildren,
+	sortFillsByOrder,
+} from '@woocommerce/components';
 
-type WooProductMoreMenuSlot = React.FC< BaseSlot.Props >;
+export const WC_PRODUCT_MORE_MENU_SLOT_NAME = 'WooProductMenuMenuItem';
 
-type WooProductMoreMenuFill = React.FC< BaseFill.Props > & {
-	Slot?: WooProductMoreMenuSlot;
+export const WooProductMoreMenuItem: React.FC< {
+	children?: React.ReactNode;
+	order?: number;
+} > & {
+	Slot: React.FC< Slot.Props >;
+} = ( { children, order = 1 } ) => {
+	return (
+		<Fill name={ WC_PRODUCT_MORE_MENU_SLOT_NAME }>
+			{ ( fillProps: Fill.Props ) => {
+				return createOrderedChildren( children, order, fillProps );
+			} }
+		</Fill>
+	);
 };
 
-type CreateSlotFillReturn = {
-	Fill: WooProductMoreMenuFill;
-	Slot: WooProductMoreMenuSlot;
-};
-
-const { Fill, Slot }: CreateSlotFillReturn = createSlotFill(
-	'WooProductMoreMenuItem'
-);
-
-Fill.Slot = ( { fillProps } ) => (
-	<Slot fillProps={ fillProps }>
-		{ ( fills ) => {
-			return isEmpty( fills ) ? null : <>{ fills }</>;
-		} }
+WooProductMoreMenuItem.Slot = ( { fillProps } ) => (
+	<Slot name={ WC_PRODUCT_MORE_MENU_SLOT_NAME } fillProps={ fillProps }>
+		{ sortFillsByOrder }
 	</Slot>
 );
-
-export const WooProductMoreMenuItem = Fill as WooProductMoreMenuFill & {
-	Slot: WooProductMoreMenuSlot;
-};