Add deprecated console warnings

packages/components/src/composite/legacy/index.tsx

@@ -22,12 +22,13 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { Composite as Current } from '..';
-import { useInstanceId } from '@wordpress/compose';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -123,12 +124,31 @@ function mapLegacyStatePropsToComponentProps(
 	return legacyProps;
 }
 
+const LEGACY_TO_NEW_DISPLAY_NAME = {
+	__unstableComposite: 'Composite',
+	__unstableCompositeGroup: 'Composite.Group or Composite.Row',
+	__unstableCompositeItem: 'Composite.Item',
+	__unstableUseCompositeState: 'Composite',
+};
+
 function proxyComposite< C extends Component >(
 	ProxiedComponent: C | React.ForwardRefExoticComponent< C >,
 	propMap: Record< string, string > = {}
 ): CompositeComponent< C > {
-	const displayName = ProxiedComponent.displayName;
+	const displayName = ProxiedComponent.displayName ?? '';
+
 	const Component = ( legacyProps: CompositeStateProps ) => {
+		deprecated( `wp.components.${ displayName }`, {
+			since: '6.7',
+			alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(
+				displayName
+			)
+				? LEGACY_TO_NEW_DISPLAY_NAME[
+						displayName as keyof typeof LEGACY_TO_NEW_DISPLAY_NAME
+				  ]
+				: undefined,
+		} );
+
 		const { store, ...rest } =
 			mapLegacyStatePropsToComponentProps( legacyProps );
 		const props = rest as ComponentProps< C >;
@@ -153,7 +173,7 @@ function proxyComposite< C extends Component >(
 // `CompositeRow`, but this has been split into two different
 // components. We handle that difference by checking on the
 // provided role, and returning the appropriate component.
-const unproxiedCompositeGroup = forwardRef<
+const UnproxiedCompositeGroup = forwardRef<
 	any,
 	React.ComponentPropsWithoutRef< typeof Current.Group | typeof Current.Row >
 >( ( { role, ...props }, ref ) => {
@@ -166,21 +186,33 @@ const unproxiedCompositeGroup = forwardRef<
  *
  * @deprecated
  */
-export const Composite = proxyComposite( Current, { baseId: 'id' } );
+export const Composite = proxyComposite(
+	Object.assign( Current, { displayName: '__unstableComposite' } ),
+	{ baseId: 'id' }
+);
 /**
- * _Note: please use the `Composite.Group` component instead._
+ * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
  *
  * @deprecated
  */
-export const CompositeGroup = proxyComposite( unproxiedCompositeGroup );
+export const CompositeGroup = proxyComposite(
+	Object.assign( UnproxiedCompositeGroup, {
+		displayName: '__unstableCompositeGroup',
+	} )
+);
 /**
  * _Note: please use the `Composite.Item` component instead._
  *
  * @deprecated
  */
-export const CompositeItem = proxyComposite( Current.Item, {
-	focusable: 'accessibleWhenDisabled',
-} );
+export const CompositeItem = proxyComposite(
+	Object.assign( Current.Item, {
+		displayName: '__unstableCompositeItem',
+	} ),
+	{
+		focusable: 'accessibleWhenDisabled',
+	}
+);
 
 /**
  * _Note: please use the `Composite` component instead._
@@ -190,6 +222,11 @@ export const CompositeItem = proxyComposite( Current.Item, {
 export function useCompositeState(
 	legacyStateOptions: LegacyStateOptions = {}
 ): CompositeState {
+	deprecated( `wp.components.__unstableUseCompositeState`, {
+		since: '6.7',
+		alternative: `Composite.useStore`,
+	} );
+
 	const {
 		baseId,
 		currentId: defaultActiveId,