@wordpress/components 28.1.0 → 28.3.0

package/build-types/tooltip/types.d.ts

@@ -15,6 +15,10 @@ export type TooltipProps = {
      * **Note**: Accepts only one child element.
      */
     children: React.ReactElement;
+    /**
+     * Custom class name for the tooltip.
+     */
+    className?: string;
     /**
      * Option to hide the tooltip when the anchor is clicked.
      *

package/build-types/tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tooltip/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IAC1B;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC,iBAAiB,EAAE,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tooltip/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IAC1B;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAE,UAAU,CAAE,CAAC;IACtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC,iBAAiB,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAiN7E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;;;;;8kLAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAkN7E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;;;;;8kLAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}

package/build-types/unit-control/styles/unit-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAK3C,KAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;UAWtB,CAAC;AAmCF,eAAO,MAAM,SAAS;;;uHAQrB,CAAC;AAiDF,eAAO,MAAM,UAAU;;;mIAqBtB,CAAC"}
+{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAK3C,KAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;UAWtB,CAAC;AA0CF,eAAO,MAAM,SAAS;;;uHAQrB,CAAC;AAgDF,eAAO,MAAM,UAAU;;;mIAqBtB,CAAC"}

package/build-types/utils/hooks/use-update-effect.d.ts

@@ -2,7 +2,7 @@ export default useUpdateEffect;
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps

package/build-types/utils/hooks/use-update-effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-update-effect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-update-effect.js"],"names":[],"mappings":";AAKA;;;;;;;GAOG;AACH,yCAHW,OAAO,OAAO,EAAE,cAAc,QAC9B,OAAO,OAAO,EAAE,cAAc,QAgBxC"}
+{"version":3,"file":"use-update-effect.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-update-effect.js"],"names":[],"mappings":";AAKA;;;;;;;GAOG;AACH,yCAHW,OAAO,OAAO,EAAE,cAAc,QAC9B,OAAO,OAAO,EAAE,cAAc,QAuBxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.1.0",
+	"version": "28.3.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/is-shallow-equal": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/primitives": "^4.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/rich-text": "^7.1.0",
-		"@wordpress/warning": "^3.1.0",
+		"@wordpress/a11y": "^4.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/is-shallow-equal": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/primitives": "^4.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/rich-text": "^7.3.0",
+		"@wordpress/warning": "^3.3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

package/src/animation/index.tsx

@@ -6,7 +6,6 @@
  * @see https://www.framer.com/docs/animation/
  */
 
-// eslint-disable-next-line no-restricted-imports
 export {
 	motion as __unstableMotion,
 	AnimatePresence as __unstableAnimatePresence,

package/src/autocomplete/autocompleter-ui.tsx

@@ -58,6 +58,7 @@ function ListBox( {
 					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
 					role="option"
 					aria-selected={ index === selectedIndex }
+					accessibleWhenDisabled
 					disabled={ option.isDisabled }
 					className={ clsx(
 						'components-autocomplete__result',

package/src/autocomplete/index.tsx

@@ -13,7 +13,6 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import { __, _n } from '@wordpress/i18n';
 import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,

package/src/base-control/index.tsx

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -116,14 +122,16 @@ const UnconnectedBaseControl = (
  * 	</BaseControl>
  * );
  */
-export const VisualLabel = ( {
-	className,
-	children,
-	...props
-}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {
+const UnforwardedVisualLabel = (
+	props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >,
+	ref: ForwardedRef< any >
+) => {
+	const { className, children, ...restProps } = props;
+
 	return (
 		<StyledVisualLabel
-			{ ...props }
+			ref={ ref }
+			{ ...restProps }
 			className={ clsx( 'components-base-control__label', className ) }
 		>
 			{ children }
@@ -131,6 +139,8 @@ export const VisualLabel = ( {
 	);
 };
 
+export const VisualLabel = forwardRef( UnforwardedVisualLabel );
+
 export const BaseControl = Object.assign(
 	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
 	{ VisualLabel }

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

@@ -55,7 +55,6 @@ WithHelpText.args = {
  * otherwise use if the `label` prop was passed.
  */
 export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
-	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 
 	return (

package/src/border-box-control/border-box-control-visualizer/component.tsx

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

package/src/button/README.md

@@ -115,6 +115,17 @@ The presence of a `href` prop determines whether an `anchor` element is rendered
 
 Props not included in this set will be applied to the `a` or `button` element.
 
+#### `accessibleWhenDisabled`: `boolean`
+
+Whether to keep the button focusable when disabled.
+
+In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or by preventing focus from returning to a trigger element.
+
+Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) in the WAI-ARIA Authoring Practices Guide.
+
+-   Required: No
+-   Default: `false`
+
 #### `children`: `ReactNode`
 
 The button's children.
@@ -137,6 +148,8 @@ An accessible description for the button.
 
 Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.
 
+In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
+
 -   Required: No
 
 #### `href`: `string`

package/src/button/index.tsx

@@ -29,6 +29,7 @@ import { positionToPlacement } from '../popover/utils';
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
 function useDeprecatedProps( {
+	__experimentalIsFocusable,
 	isDefault,
 	isPrimary,
 	isSecondary,
@@ -43,7 +44,8 @@ function useDeprecatedProps( {
 	let computedSize = size;
 	let computedVariant = variant;
 
-	const newProps: { 'aria-pressed'?: boolean } = {
+	const newProps = {
+		accessibleWhenDisabled: __experimentalIsFocusable,
 		// @todo Mark `isPressed` as deprecated
 		'aria-pressed': isPressed,
 	};
@@ -91,6 +93,7 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
+		accessibleWhenDisabled,
 		isBusy,
 		isDestructive,
 		className,
@@ -106,7 +109,6 @@ export function UnforwardedButton(
 		size = 'default',
 		text,
 		variant,
-		__experimentalIsFocusable: isFocusable,
 		describedBy,
 		...buttonOrAnchorProps
 	} = useDeprecatedProps( props );
@@ -159,7 +161,7 @@ export function UnforwardedButton(
 		'has-icon': !! icon,
 	} );
 
-	const trulyDisabled = disabled && ! isFocusable;
+	const trulyDisabled = disabled && ! accessibleWhenDisabled;
 	const Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';
 	const buttonProps: ComponentPropsWithoutRef< 'button' > =
 		Tag === 'button'
@@ -177,7 +179,7 @@ export function UnforwardedButton(
 	const disableEventProps: {
 		[ key: string ]: ( event: MouseEvent ) => void;
 	} = {};
-	if ( disabled && isFocusable ) {
+	if ( disabled && accessibleWhenDisabled ) {
 		// In this case, the button will be disabled, but still focusable and
 		// perceivable by screen reader users.
 		buttonProps[ 'aria-disabled' ] = true;

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

@@ -39,12 +39,13 @@ export const VariantStates: StoryFn< typeof Button > = (
 					key={ variant ?? 'undefined' }
 				>
 					<Button { ...props } variant={ variant } />
+					{ /* eslint-disable-next-line no-restricted-syntax */ }
 					<Button { ...props } variant={ variant } disabled />
 					<Button
 						{ ...props }
 						variant={ variant }
 						disabled
-						__experimentalIsFocusable
+						accessibleWhenDisabled
 					/>
 					<Button { ...props } variant={ variant } isBusy />
 					<Button { ...props } variant={ variant } isDestructive />

package/src/button/test/index.tsx

@@ -235,13 +235,14 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
+			// eslint-disable-next-line no-restricted-syntax
 			render( <Button disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeDisabled();
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
-			render( <Button disabled __experimentalIsFocusable /> );
+			render( <Button disabled accessibleWhenDisabled /> );
 			const button = screen.getByRole( 'button' );
 
 			expect( button ).toBeEnabled();
@@ -536,6 +537,7 @@ describe( 'Button', () => {
 
 		it( 'should become a button again when disabled is supplied', () => {
 			// @ts-expect-error - a button should not have `href`
+			// eslint-disable-next-line no-restricted-syntax
 			render( <Button href="https://wordpress.org/" disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeVisible();
@@ -617,6 +619,15 @@ describe( 'Button', () => {
 				'mixed'
 			);
 		} );
+
+		it( 'should not break when the legacy __experimentalIsFocusable prop is passed', () => {
+			// eslint-disable-next-line no-restricted-syntax
+			render( <Button disabled __experimentalIsFocusable /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toBeEnabled();
+			expect( button ).toHaveAttribute( 'aria-disabled' );
+		} );
 	} );
 
 	describe( 'static typing', () => {
@@ -624,15 +635,19 @@ describe( 'Button', () => {
 			<Button href="foo" />
 			{ /* @ts-expect-error - `target` requires `href` */ }
 			<Button target="foo" />
+
+			{ /* eslint-disable no-restricted-syntax */ }
 			{ /* @ts-expect-error - `disabled` is only for buttons */ }
 			<Button href="foo" disabled />
+			{ /* eslint-enable no-restricted-syntax */ }
+
 			<Button href="foo" type="image/png" />
 			{ /* @ts-expect-error - if button, type must be submit/reset/button */ }
 			<Button type="image/png" />
 			{ /* @ts-expect-error */ }
 			<Button type="invalidtype" />
 			{ /* @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake. */ }
-			<Button disabled __experimentalIsFocusable href="foo" />
+			<Button disabled accessibleWhenDisabled href="foo" />
 		</>;
 	} );
 } );

package/src/button/types.ts

@@ -25,6 +25,19 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability
+	 * can cause accessibility issues, by hiding their presence from screen reader users,
+	 * or by preventing focus from returning to a trigger element.
+	 *
+	 * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)
+	 * in the WAI-ARIA Authoring Practices Guide.
+	 *
+	 * @default false
+	 */
+	accessibleWhenDisabled?: boolean;
 	/**
 	 * The button's children.
 	 */
@@ -105,28 +118,24 @@ type BaseButtonProps = {
 	 * 'link' (the link button styles)
 	 */
 	variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
-	/**
-	 * Whether to keep the button focusable when disabled.
-	 *
-	 * @default false
-	 */
-	__experimentalIsFocusable?: boolean;
 };
 
 type _ButtonProps = {
 	/**
-	 * Whether the button is disabled.
+	 * Whether the button is disabled. If `true`, this will force a `button` element
+	 * to be rendered, even when an `href` is given.
 	 *
-	 * If `true`, this will force a `button` element to be rendered, even when an `href` is given.
+	 * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
 	 */
 	disabled?: boolean;
 };
 
 type AnchorProps = {
 	/**
-	 * Whether the button is disabled.
+	 * Whether the button is disabled. If `true`, this will force a `button` element
+	 * to be rendered, even when an `href` is given.
 	 *
-	 * If `true`, this will force a `button` element to be rendered, even when an `href` is given.
+	 * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
 	 */
 	disabled?: false;
 	/**
@@ -140,6 +149,14 @@ type AnchorProps = {
 };
 
 export type DeprecatedButtonProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * @default false
+	 * @deprecated Use the `accessibleWhenDisabled` prop instead.
+	 * @ignore
+	 */
+	__experimentalIsFocusable?: boolean;
 	/**
 	 * Gives the button a default style.
 	 *

package/src/combobox-control/index.tsx

@@ -346,6 +346,8 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								<Button
 									className="components-combobox-control__reset"
 									icon={ closeSmall }
+									// Disable reason: Focus returns to input field when reset is clicked.
+									// eslint-disable-next-line no-restricted-syntax
 									disabled={ ! value }
 									onClick={ handleOnReset }
 									label={ __( 'Reset' ) }

package/src/composite/current/index.ts

@@ -8,7 +8,6 @@
  * @see https://ariakit.org/components/composite
  */
 
-/* eslint-disable-next-line no-restricted-imports */
 export {
 	Composite,
 	CompositeGroup,
@@ -18,5 +17,4 @@ export {
 	useCompositeStore,
 } from '@ariakit/react';
 
-/* eslint-disable-next-line no-restricted-imports */
 export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';

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

@@ -3,6 +3,11 @@
  */
 import type { StoryFn } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -20,10 +25,34 @@ export default {
 				type: 'radio',
 			},
 		},
+		onChange: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 	},
 };
 
-export const Default: StoryFn = CustomSelectControl.bind( {} );
+const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
+	const [ value, setValue ] = useState( props.options[ 0 ] );
+
+	const onChange: React.ComponentProps<
+		typeof CustomSelectControl
+	>[ 'onChange' ] = ( changeObject: { selectedItem: any } ) => {
+		setValue( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ onChange }
+			value={ value }
+		/>
+	);
+};
+
+export const Default: StoryFn = Template.bind( {} );
 Default.args = {
 	label: 'Label',
 	options: [
@@ -51,7 +80,7 @@ Default.args = {
 	],
 };
 
-export const WithLongLabels: StoryFn = CustomSelectControl.bind( {} );
+export const WithLongLabels: StoryFn = Template.bind( {} );
 WithLongLabels.args = {
 	...Default.args,
 	options: [
@@ -70,7 +99,7 @@ WithLongLabels.args = {
 	],
 };
 
-export const WithHints: StoryFn = CustomSelectControl.bind( {} );
+export const WithHints: StoryFn = Template.bind( {} );
 WithHints.args = {
 	...Default.args,
 	options: [