diff --git a/packages/components/src/form-token-field/stories/index.tsx b/packages/components/src/form-token-field/stories/index.tsx index a93c8f206e39e..b9b7bd34fcb47 100644 --- a/packages/components/src/form-token-field/stories/index.tsx +++ b/packages/components/src/form-token-field/stories/index.tsx @@ -21,7 +21,7 @@ const meta: ComponentMeta< typeof FormTokenField > = { control: { type: null }, }, __experimentalValidateInput: { - control: { type: 'boolean' }, + control: { type: null }, }, }, parameters: { @@ -43,7 +43,6 @@ const continents = [ ]; const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( { - __experimentalValidateInput, ...args } ) => { const [ selectedContinents, setSelectedContinents ] = useState< @@ -55,11 +54,6 @@ const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( { { ...args } value={ selectedContinents } onChange={ ( tokens ) => setSelectedContinents( tokens ) } - __experimentalValidateInput={ - __experimentalValidateInput - ? ( newValue ) => continents.includes( newValue ) - : () => true - } /> ); }; @@ -73,7 +67,6 @@ Default.args = { }; export const Async: ComponentStory< typeof FormTokenField > = ( { - __experimentalValidateInput, suggestions, ...args } ) => { @@ -102,11 +95,6 @@ export const Async: ComponentStory< typeof FormTokenField > = ( { suggestions={ availableContinents } onChange={ ( tokens ) => setSelectedContinents( tokens ) } onInputChange={ searchContinents } - __experimentalValidateInput={ - __experimentalValidateInput - ? ( newValue ) => continents.includes( newValue ) - : () => true - } /> ); }; diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts index d2ee330791d70..b2952fac935d9 100644 --- a/packages/components/src/form-token-field/types.ts +++ b/packages/components/src/form-token-field/types.ts @@ -76,7 +76,7 @@ export interface FormTokenFieldProps * - otherwise entities like `&` in tag names are double-encoded like `&`, * once by the REST API and once by React). */ - displayTransform?: ( suggestion: string ) => string; + displayTransform?: ( token: string ) => string; /** * Function to call to transform tokens for saving. The default is to trim the token value. * This function is also applied when matching suggestions against the current value @@ -84,6 +84,7 @@ export interface FormTokenFieldProps * this is needed to remove leading and trailing spaces from tag names, like wp-admin does. * Otherwise the REST API won't save them.) * + * @default ( token: string ) => token.trim() */ saveTransform?: ( token: string ) => string; /** @@ -136,6 +137,8 @@ export interface FormTokenFieldProps __experimentalExpandOnFocus?: boolean; /** * If passed, all introduced values will be validated before being added as tokens. + * + * @default () => true */ __experimentalValidateInput?: ( token: string ) => boolean; /**