@wordpress/components 32.6.0 → 33.0.0

package/src/autocomplete/index.tsx

@@ -108,10 +108,15 @@ export function useAutocomplete( {
 		state;
 
 	const backspacingRef = useRef( false );
+	const prevRecordTextRef = useRef( '' );
+	const lastCompletionRef = useRef< {
+		name: string;
+		value: string;
+	} | null >( null );
 
 	function insertCompletion( replacement: React.ReactNode ) {
 		if ( autocompleter === null ) {
-			return;
+			return '';
 		}
 		const end = record.start;
 		const start =
@@ -119,27 +124,48 @@ export function useAutocomplete( {
 		const toInsert = create( { html: renderToString( replacement ) } );
 
 		onChange( insert( record, toInsert, start, end ) );
+		return getTextContent( toInsert );
 	}
 
 	function select( option: KeyedOption ) {
-		const { getOptionCompletion } = autocompleter || {};
+		if ( option.isDisabled || ! autocompleter ) {
+			return;
+		}
 
-		if ( option.isDisabled ) {
+		const { getOptionCompletion } = autocompleter;
+		if ( ! getOptionCompletion ) {
+			dispatch( { type: 'RESET' } );
+			contentRef.current?.focus();
 			return;
 		}
 
-		if ( getOptionCompletion ) {
-			const completionObject = getCompletionObject(
-				getOptionCompletion( option.value, filterValue )
-			);
+		const completionObject = getCompletionObject(
+			getOptionCompletion( option.value, filterValue )
+		);
+
+		if ( 'replace' === completionObject.action ) {
+			onReplace( [ completionObject.value ] );
+			// When replacing, the component will unmount, so don't reset
+			// state (below) on an unmounted component.
+			return;
+		}
 
-			if ( 'replace' === completionObject.action ) {
-				onReplace( [ completionObject.value ] );
-				// When replacing, the component will unmount, so don't reset
-				// state (below) on an unmounted component.
-				return;
-			} else if ( 'insert-at-caret' === completionObject.action ) {
-				insertCompletion( completionObject.value );
+		if ( 'insert-at-caret' === completionObject.action ) {
+			const completionText = insertCompletion( completionObject.value );
+			// When the completion value starts with the trigger prefix
+			// (e.g. @username), the trigger stays in the text and would
+			// re-activate the autocompleter. Store the completed text so
+			// the effect can suppress the stale re-match.
+			if ( completionText.startsWith( autocompleter.triggerPrefix ) ) {
+				const afterPrefix = completionText.slice(
+					autocompleter.triggerPrefix.length
+				);
+				if ( afterPrefix ) {
+					lastCompletionRef.current = {
+						name: autocompleter.name,
+						value: afterPrefix,
+					};
+				}
 			}
 		}
 
@@ -222,6 +248,9 @@ export function useAutocomplete( {
 	}, [ record ] );
 
 	useEffect( () => {
+		const isTextChange = record.text !== prevRecordTextRef.current;
+		prevRecordTextRef.current = record.text;
+
 		function getTextAfterSelection() {
 			return textContent
 				? getTextContent(
@@ -234,13 +263,12 @@ export function useAutocomplete( {
 				: '';
 		}
 
-		const match = getAutocompleteMatch(
-			textContent,
-			completers,
-			filteredOptions.length,
-			backspacingRef.current,
-			getTextAfterSelection
-		);
+		const match = getAutocompleteMatch( textContent, completers, {
+			matchCount: filteredOptions.length,
+			isBackspacing: backspacingRef.current,
+			getTextAfterSelection,
+			lastCompletion: lastCompletionRef.current,
+		} );
 
 		if ( ! match ) {
 			if ( autocompleter ) {
@@ -251,6 +279,26 @@ export function useAutocomplete( {
 
 		const { completer, filterValue: query } = match;
 
+		// Don't re-activate a dismissed autocompleter on cursor-only
+		// movement. `textContent` (text before cursor) changes with the
+		// caret, so the effect re-runs, but `record.text` does not.
+		// Complements the render-time `didUserInput` gate in
+		// `useAutocompleteProps` for callers using this hook directly.
+		if ( ! autocompleter && ! isTextChange ) {
+			return;
+		}
+
+		// Clear stale completion ref when the user types a new trigger
+		// for the same completer (the previous completion is no longer
+		// relevant). Must be after the cursor-only check so that mere
+		// cursor movement doesn't discard the suppression state.
+		if (
+			lastCompletionRef.current &&
+			lastCompletionRef.current.name === completer.name
+		) {
+			lastCompletionRef.current = null;
+		}
+
 		dispatch( { type: 'MATCH', completer, query } );
 		// We want to avoid introducing unexpected side effects.
 		// See https://github.com/WordPress/gutenberg/pull/41820

package/src/autocomplete/test/get-autocomplete-match.ts

@@ -14,17 +14,23 @@ const createCompleter = (
 	...overrides,
 } );
 
+const defaultOptions = {
+	matchCount: 1,
+	isBackspacing: false,
+	getTextAfterSelection: () => '',
+};
+
 describe( 'getAutocompleteMatch', () => {
 	it( 'should return null for empty text content', () => {
 		const completers = [ createCompleter() ];
 		expect(
-			getAutocompleteMatch( '', completers, 0, false, () => '' )
+			getAutocompleteMatch( '', completers, defaultOptions )
 		).toBeNull();
 	} );
 
 	it( 'should return null when no completers are provided', () => {
 		expect(
-			getAutocompleteMatch( 'some text /', [], 0, false, () => '' )
+			getAutocompleteMatch( 'some text /', [], defaultOptions )
 		).toBeNull();
 	} );
 
@@ -34,9 +40,7 @@ describe( 'getAutocompleteMatch', () => {
 			getAutocompleteMatch(
 				'no trigger here',
 				completers,
-				1,
-				false,
-				() => ''
+				defaultOptions
 			)
 		).toBeNull();
 	} );
@@ -46,9 +50,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'some text /query',
 			completers,
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result ).toEqual( {
 			completer: completers[ 0 ],
@@ -61,9 +63,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'hello @',
 			completers,
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result ).toEqual( {
 			completer: completers[ 0 ],
@@ -83,9 +83,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'/command some text @user',
 			[ slashCompleter, atCompleter ],
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result?.completer.name ).toBe( 'at' );
 	} );
@@ -94,47 +92,35 @@ describe( 'getAutocompleteMatch', () => {
 		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
 		const longText = '/' + 'a'.repeat( 51 );
 		expect(
-			getAutocompleteMatch( longText, completers, 1, false, () => '' )
+			getAutocompleteMatch( longText, completers, defaultOptions )
 		).toBeNull();
 	} );
 
 	it( 'should match when text after trigger is exactly 50 chars', () => {
 		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
 		const text = '/' + 'a'.repeat( 50 );
-		const result = getAutocompleteMatch(
-			text,
-			completers,
-			1,
-			false,
-			() => ''
-		);
+		const result = getAutocompleteMatch( text, completers, defaultOptions );
 		expect( result ).not.toBeNull();
 		expect( result?.filterValue ).toBe( 'a'.repeat( 50 ) );
 	} );
 
 	it( 'should return null on mismatch with multiple words and no backspacing', () => {
 		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
-		// 4 words from trigger, mismatch (filteredOptionsLength=0), not backspacing
+		// 4 words from trigger, mismatch (matchCount=0), not backspacing
 		expect(
-			getAutocompleteMatch(
-				'text @one two three four',
-				completers,
-				0,
-				false,
-				() => ''
-			)
+			getAutocompleteMatch( 'text @one two three four', completers, {
+				...defaultOptions,
+				matchCount: 0,
+			} )
 		).toBeNull();
 	} );
 
 	it( 'should still match on mismatch when there is only one trigger word', () => {
 		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
-		const result = getAutocompleteMatch(
-			'text @xyz',
-			completers,
-			0,
-			false,
-			() => ''
-		);
+		const result = getAutocompleteMatch( 'text @xyz', completers, {
+			...defaultOptions,
+			matchCount: 0,
+		} );
 		expect( result ).not.toBeNull();
 		expect( result?.filterValue ).toBe( 'xyz' );
 	} );
@@ -144,9 +130,11 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'text @one two three',
 			completers,
-			0,
-			true,
-			() => ''
+			{
+				...defaultOptions,
+				matchCount: 0,
+				isBackspacing: true,
+			}
 		);
 		expect( result ).not.toBeNull();
 	} );
@@ -154,27 +142,25 @@ describe( 'getAutocompleteMatch', () => {
 	it( 'should NOT match while backspacing if more than 3 words from trigger', () => {
 		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
 		expect(
-			getAutocompleteMatch(
-				'text @one two three four',
-				completers,
-				0,
-				true,
-				() => ''
-			)
+			getAutocompleteMatch( 'text @one two three four', completers, {
+				...defaultOptions,
+				matchCount: 0,
+				isBackspacing: true,
+			} )
 		).toBeNull();
 	} );
 
 	it( 'should return null when text after trigger starts with whitespace', () => {
 		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
 		expect(
-			getAutocompleteMatch( '/ query', completers, 1, false, () => '' )
+			getAutocompleteMatch( '/ query', completers, defaultOptions )
 		).toBeNull();
 	} );
 
 	it( 'should return null when text after trigger ends with multiple spaces', () => {
 		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
 		expect(
-			getAutocompleteMatch( '/query  ', completers, 1, false, () => '' )
+			getAutocompleteMatch( '/query  ', completers, defaultOptions )
 		).toBeNull();
 	} );
 
@@ -186,7 +172,7 @@ describe( 'getAutocompleteMatch', () => {
 			} ),
 		];
 		expect(
-			getAutocompleteMatch( 'text @user', completers, 1, false, () => '' )
+			getAutocompleteMatch( 'text @user', completers, defaultOptions )
 		).toBeNull();
 	} );
 
@@ -198,13 +184,10 @@ describe( 'getAutocompleteMatch', () => {
 				allowContext,
 			} ),
 		];
-		getAutocompleteMatch(
-			'before @user',
-			completers,
-			1,
-			false,
-			() => 'after'
-		);
+		getAutocompleteMatch( 'before @user', completers, {
+			...defaultOptions,
+			getTextAfterSelection: () => 'after',
+		} );
 		expect( allowContext ).toHaveBeenCalledWith( 'before ', 'after' );
 	} );
 
@@ -213,9 +196,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'text @café',
 			completers,
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result ).not.toBeNull();
 		expect( result?.filterValue ).toBe( 'cafe' );
@@ -233,9 +214,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'@@user',
 			[ singleAt, doubleAt ],
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result?.completer.name ).toBe( 'double' );
 		expect( result?.filterValue ).toBe( 'user' );
@@ -253,9 +232,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'hello @user',
 			[ singleAt, doubleAt ],
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result?.completer.name ).toBe( 'single' );
 		expect( result?.filterValue ).toBe( 'user' );
@@ -266,9 +243,7 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'text $$query',
 			completers,
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result ).not.toBeNull();
 		expect( result?.filterValue ).toBe( 'query' );
@@ -279,14 +254,63 @@ describe( 'getAutocompleteMatch', () => {
 		const result = getAutocompleteMatch(
 			'/hello world',
 			completers,
-			1,
-			false,
-			() => ''
+			defaultOptions
 		);
 		expect( result ).not.toBeNull();
 		expect( result?.filterValue ).toBe( 'hello world' );
 	} );
 
+	describe( 'lastCompletion suppression', () => {
+		it( 'should suppress match when text equals last completion value', () => {
+			const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+			expect(
+				getAutocompleteMatch( '@user', completers, {
+					...defaultOptions,
+					lastCompletion: {
+						name: completers[ 0 ].name,
+						value: 'user',
+					},
+				} )
+			).toBeNull();
+		} );
+
+		it( 'should suppress match ignoring trailing whitespace', () => {
+			const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+			expect(
+				getAutocompleteMatch( '@user ', completers, {
+					...defaultOptions,
+					lastCompletion: {
+						name: completers[ 0 ].name,
+						value: 'user',
+					},
+				} )
+			).toBeNull();
+		} );
+
+		it( 'should NOT suppress match when completer name differs', () => {
+			const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+			const result = getAutocompleteMatch( '@user', completers, {
+				...defaultOptions,
+				lastCompletion: { name: 'other', value: 'user' },
+			} );
+			expect( result ).not.toBeNull();
+			expect( result?.filterValue ).toBe( 'user' );
+		} );
+
+		it( 'should NOT suppress match when text diverges from last completion', () => {
+			const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+			const result = getAutocompleteMatch( '@user2', completers, {
+				...defaultOptions,
+				lastCompletion: {
+					name: completers[ 0 ].name,
+					value: 'user',
+				},
+			} );
+			expect( result ).not.toBeNull();
+			expect( result?.filterValue ).toBe( 'user2' );
+		} );
+	} );
+
 	it.each( [
 		{
 			text: 'café @user',
@@ -327,9 +351,7 @@ describe( 'getAutocompleteMatch', () => {
 			const result = getAutocompleteMatch(
 				text,
 				completers,
-				1,
-				false,
-				() => ''
+				defaultOptions
 			);
 			expect( result ).not.toBeNull();
 			expect( result?.filterValue ).toBe( expected );

package/src/base-control/stories/index.story.tsx

@@ -10,6 +10,7 @@ import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof BaseControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/BaseControl',
 	id: 'components-basecontrol',
 	component: BaseControl,

package/src/button/stories/index.story.tsx

@@ -21,6 +21,7 @@ import {
 import Button from '..';
 
 const meta: Meta< typeof Button > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Actions/Button',
 	id: 'components-button',
 	component: Button,

package/src/button-group/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .components-button-group {
 	display: inline-block;
@@ -28,7 +27,7 @@
 		&:focus,
 		&.is-primary {
 			position: relative;
-			z-index: z-index(".components-button {:focus or .is-primary}");
+			z-index: 1;
 		}
 
 		// The active button should look pressed.

package/src/card/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryObj } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import {
 	Card,
 	CardHeader,
@@ -37,9 +30,9 @@ const meta: Meta< typeof Card > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'use-with-caution',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Design is in flux, and may differ from the version used in `@wordpress/dataviews`.',
+			notes: 'Use `Card` or `CollapsibleCard` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/checkbox-control/stories/index.story.tsx

@@ -16,6 +16,7 @@ import { VStack } from '../../v-stack';
 import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
+	tags: [ 'manifest' ],
 	component: CheckboxControl,
 	title: 'Components/Selection & Input/Common/CheckboxControl',
 	id: 'components-checkboxcontrol',

package/src/circular-option-picker/style.scss

@@ -1,6 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 $color-palette-circle-size: 28px;
 $color-palette-circle-spacing: 12px;
@@ -9,6 +8,7 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	width: 100%;
 	min-width: 188px;
+	isolation: isolate;
 
 	.components-circular-option-picker__custom-clear-wrapper {
 		display: flex;
@@ -21,7 +21,7 @@ $color-palette-circle-spacing: 12px;
 		flex-wrap: wrap;
 		gap: $color-palette-circle-spacing;
 		position: relative;
-		z-index: z-index(".components-circular-option-picker__swatches");
+		z-index: 1;
 	}
 
 	// Make sure that the .components-circular-option-picker__swatches element
@@ -29,7 +29,7 @@ $color-palette-circle-spacing: 12px;
 	// that the tooltip rendered when hovering an `Option` always appears on top.
 	> *:not(.components-circular-option-picker__swatches) {
 		position: relative;
-		z-index: z-index("> *:not(.components-circular-option-picker__swatches)");
+		z-index: 0;
 	}
 }
 
@@ -64,8 +64,9 @@ $color-palette-circle-spacing: 12px;
 	bottom: 1px;
 	right: 1px;
 	border-radius: $radius-round;
+	// Sit below the option's color and selected-state UI.
+	z-index: -1;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
-	z-index: z-index(".components-circular-option-picker__option-wrapper::before");
 	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
@@ -95,7 +96,7 @@ $color-palette-circle-spacing: 12px;
 	&[aria-selected="true"] {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
-		z-index: z-index(".components-circular-option-picker__option.is-pressed");
+		z-index: 1;
 		overflow: visible;
 
 		& + svg {
@@ -103,7 +104,8 @@ $color-palette-circle-spacing: 12px;
 			left: 2px;
 			top: 2px;
 			border-radius: $radius-round;
-			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
+			// Render the selected checkmark above the selected option.
+			z-index: 2;
 			pointer-events: none;
 		}
 	}

package/src/color-indicator/stories/index.story.tsx

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import ColorIndicator from '..';
 
 const meta: Meta< typeof ColorIndicator > = {
+	tags: [ 'manifest' ],
 	component: ColorIndicator,
 	title: 'Components/Selection & Input/Color/ColorIndicator',
 	id: 'components-colorindicator',

package/src/color-palette/stories/index.story.tsx

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 
 const meta: Meta< typeof ColorPalette > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Color/ColorPalette',
 	id: 'components-colorpalette',
 	component: ColorPalette,

package/src/color-picker/stories/index.story.tsx

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import { ColorPicker } from '../component';
 
 const meta: Meta< typeof ColorPicker > = {
+	tags: [ 'manifest' ],
 	component: ColorPicker,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',

package/src/combobox-control/stories/index.story.tsx

@@ -35,6 +35,7 @@ const countries = [
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/ComboboxControl',
 	id: 'components-comboboxcontrol',
 	component: ComboboxControl,

package/src/composite/stories/index.story.tsx

@@ -16,6 +16,7 @@ import { Composite } from '..';
 import { Tooltip } from '../../tooltip';
 
 const meta: Meta< typeof Composite > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Composite',
 	id: 'components-composite',
 	component: Composite,

package/src/confirm-dialog/stories/index.story.tsx

@@ -24,7 +24,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 			control: false,
 		},
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onCancel: fn(),
 		onConfirm: fn(),

package/src/custom-select-control/stories/index.story.tsx

@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControl from '..';
 
 const meta: Meta< typeof CustomSelectControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/CustomSelectControl',
 	component: CustomSelectControl,
 	id: 'components-customselectcontrol',

package/src/disabled/stories/index.story.tsx

@@ -18,6 +18,7 @@ import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
 const meta: Meta< typeof Disabled > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Utilities/Disabled',
 	id: 'components-disabled',
 	component: Disabled,

package/src/drop-zone/stories/index.story.tsx

@@ -17,6 +17,7 @@ import DropZone from '..';
 const ICONS = { upload, media };
 
 const meta: Meta< typeof DropZone > = {
+	tags: [ 'manifest' ],
 	component: DropZone,
 	id: 'components-dropzone',
 	title: 'Components/Selection & Input/File Upload/DropZone',