diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
index f72bb609e07bd7..4be0d4c79da26e 100644
--- a/packages/components/src/composite/legacy/index.tsx
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -125,12 +125,12 @@ function proxyComposite< C extends Component >(
): CompositeComponent< C > {
const displayName = ProxiedComponent.displayName;
- deprecated( `__unstable${ displayName }`, {
- since: '6.7',
- alternative: `stable ${ displayName } component`,
- } );
-
const Component = ( legacyProps: CompositeStateProps ) => {
+ deprecated( `wp.components.__unstable${ displayName }`, {
+ since: '6.7',
+ alternative: `the unprefixed, stable version of the ${ displayName } component`,
+ } );
+
const { store, ...rest } =
mapLegacyStatePropsToComponentProps( legacyProps );
const props = rest as ComponentProps< C >;
@@ -196,9 +196,9 @@ export const CompositeItem = proxyComposite( Current.CompositeItem, {
export function useCompositeState(
legacyStateOptions: LegacyStateOptions = {}
): CompositeState {
- deprecated( `__unstableUseCompositeState`, {
+ deprecated( `wp.components.__unstableUseCompositeState`, {
since: '6.7',
- alternative: `useCompositeStore hook`,
+ alternative: `the useCompositeStore hook`,
} );
const {
diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
index 315532a8b50869..2882c5cd045ead 100644
--- a/packages/components/src/composite/legacy/test/index.tsx
+++ b/packages/components/src/composite/legacy/test/index.tsx
@@ -1,7 +1,12 @@
/**
* External dependencies
*/
-import { queryByAttribute, render, screen } from '@testing-library/react';
+import {
+ queryByAttribute,
+ render,
+ screen,
+ renderHook,
+} from '@testing-library/react';
import { press, sleep, waitFor } from '@ariakit/test';
/**
@@ -156,6 +161,57 @@ function getShiftTestItems() {
};
}
+// Checking for deprecation warnings before other tests because the `deprecated`
+// utility only fires a console.warn the first time a component is rendered.
+describe( 'Shows a deprecation warning', () => {
+ it( 'useCompositeState', () => {
+ renderHook( () => useCompositeState() );
+ expect( console ).toHaveWarnedWith(
+ 'wp.components.__unstableUseCompositeState is deprecated since version 6.7. Please use the useCompositeStore hook instead.'
+ );
+ } );
+ it( 'Composite', () => {
+ const Test = () => {
+ const props = useCompositeState();
+ return ;
+ };
+ render( );
+ expect( console ).toHaveWarnedWith(
+ 'wp.components.__unstableComposite is deprecated since version 6.7. Please use the unprefixed, stable version of the Composite component instead.'
+ );
+ } );
+ it( 'CompositeItem', () => {
+ const Test = () => {
+ const props = useCompositeState();
+ return (
+
+
+
+ );
+ };
+ render( );
+ expect( console ).toHaveWarnedWith(
+ 'wp.components.__unstableCompositeItem is deprecated since version 6.7. Please use the unprefixed, stable version of the CompositeItem component instead.'
+ );
+ } );
+ it( 'CompositeGroup', () => {
+ const Test = () => {
+ const props = useCompositeState();
+ return (
+
+
+
+
+
+ );
+ };
+ render( );
+ expect( console ).toHaveWarnedWith(
+ 'wp.components.__unstableCompositeGroup is deprecated since version 6.7. Please use the unprefixed, stable version of the CompositeGroup component instead.'
+ );
+ } );
+} );
+
describe.each( [
[
'With "spread" state',