diff --git a/packages/components/src/custom-select-control-v2/legacy-adapter.tsx b/packages/components/src/custom-select-control-v2/legacy-adapter.tsx
index fbdfd59978e2a..55c36e77db17b 100644
--- a/packages/components/src/custom-select-control-v2/legacy-adapter.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-adapter.tsx
@@ -8,7 +8,7 @@ import type { CustomSelectProps, LegacyCustomSelectProps } from './types';
function isLegacy( props: any ): props is LegacyCustomSelectProps {
return (
typeof props.options !== 'undefined' ||
- props.__experimentalShowSelectedHint !== undefined
+ typeof props.__experimentalShowSelectedHint !== 'undefined'
);
}
diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
index fbac571556b27..8aeff5a4e93ad 100644
--- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -1,4 +1,3 @@
-//@ts-nocheck
/**
* External dependencies
*/
@@ -49,16 +48,16 @@ const meta: Meta< typeof NewCustomSelect > = {
};
export default meta;
-const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+const Template: StoryFn< typeof NewCustomSelect > = ( props ) => {
return ;
};
-const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+const ControlledTemplate: StoryFn< typeof NewCustomSelect > = ( props ) => {
const [ value, setValue ] = useState< string | string[] >();
return (
{
+ onChange={ ( nextValue: string | string[] ) => {
setValue( nextValue );
props.onChange?.( nextValue );
} }
diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
index 7aa56d39ec1ed..f297c1585b9e6 100644
--- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -1,4 +1,3 @@
-//@ts-nocheck
/**
* External dependencies
*/
@@ -13,7 +12,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import LegacyCustomSelect from '../legacy-component';
-import { CustomSelect, CustomSelectItem } from '..';
+import { CustomSelect } from '..';
const meta: Meta< typeof LegacyCustomSelect > = {
title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
@@ -43,8 +42,14 @@ const meta: Meta< typeof LegacyCustomSelect > = {
};
export default meta;
-export const Default: StoryFn = () => {
- const options = [
+const Template: StoryFn< typeof LegacyCustomSelect > = ( props ) => {
+ return ;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+ label: 'Font Size',
+ options: [
{
key: 'small',
name: 'Small',
@@ -65,13 +70,24 @@ export const Default: StoryFn = () => {
name: 'Huge',
style: { fontSize: '300%' },
},
- ];
-
- return ;
+ ],
};
-export const Controlled: StoryFn = () => {
- const options = [
+export const Controlled: StoryFn< typeof LegacyCustomSelect > = ( props ) => {
+ const [ fontSize, setFontSize ] = useState( props.options[ 0 ] );
+
+ const onChange: ( typeof props )[ 'onChange' ] = ( changeObject ) => {
+ setFontSize( changeObject.selectedItem );
+ props.onChange?.( changeObject );
+ };
+
+ return (
+
+ );
+};
+Controlled.args = {
+ label: 'Font Size',
+ options: [
{
key: 'small',
name: 'Small',
@@ -92,18 +108,5 @@ export const Controlled: StoryFn = () => {
name: 'Huge',
style: { fontSize: '300%' },
},
- ];
-
- const [ fontSize, setFontSize ] = useState( options[ 0 ] );
-
- return (
- {
- setFontSize( selectedItem );
- } }
- value={ options.find( ( option ) => option.key === fontSize.key ) }
- />
- );
+ ],
};