@wordpress/components 19.15.0 → 20.0.0

package/build-module/form-token-field/index.js

@@ -4,7 +4,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { last, clone, uniq, map, difference, some } from 'lodash';
+import { last, clone, map, some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -14,7 +14,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
-import { BACKSPACE, ENTER, UP, DOWN, LEFT, RIGHT, SPACE, DELETE, ESCAPE } from '@wordpress/keycodes';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
@@ -25,6 +24,7 @@ import TokenInput from './token-input';
 import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import { FlexItem } from '../flex';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const identity = value => value;
 /**
@@ -64,10 +64,12 @@ export function FormTokenField(props) {
       remove: __('Remove item'),
       __experimentalInvalid: __('Invalid item')
     },
+    __experimentalRenderItem,
     __experimentalExpandOnFocus = false,
     __experimentalValidateInput = () => true,
     __experimentalShowHowTo = true,
-    __next36pxDefaultSize = false
+    __next36pxDefaultSize = false,
+    __experimentalAutoSelectFirstMatch = false
   } = props;
   const instanceId = useInstanceId(FormTokenField); // We reset to these initial values again in the onBlur
 
@@ -100,6 +102,9 @@ export function FormTokenField(props) {
   useEffect(() => {
     updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [incompleteTokenValue]);
+  useEffect(() => {
+    updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [__experimentalAutoSelectFirstMatch]);
 
   if (disabled && isActive) {
     setIsActive(false);
@@ -156,46 +161,45 @@ export function FormTokenField(props) {
 
     if (event.defaultPrevented) {
       return;
-    } // TODO: replace to event.code;
-
+    }
 
-    switch (event.keyCode) {
-      case BACKSPACE:
+    switch (event.code) {
+      case 'Backspace':
         preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
 
-      case ENTER:
+      case 'Enter':
         preventDefault = addCurrentToken();
         break;
 
-      case LEFT:
+      case 'ArrowLeft':
         preventDefault = handleLeftArrowKey();
         break;
 
-      case UP:
+      case 'ArrowUp':
         preventDefault = handleUpArrowKey();
         break;
 
-      case RIGHT:
+      case 'ArrowRight':
         preventDefault = handleRightArrowKey();
         break;
 
-      case DOWN:
+      case 'ArrowDown':
         preventDefault = handleDownArrowKey();
         break;
 
-      case DELETE:
+      case 'Delete':
         preventDefault = handleDeleteKey(deleteTokenAfterInput);
         break;
 
-      case SPACE:
+      case 'Space':
         if (tokenizeOnSpace) {
           preventDefault = addCurrentToken();
         }
 
         break;
 
-      case ESCAPE:
+      case 'Escape':
         preventDefault = handleEscapeKey(event);
         break;
 
@@ -385,7 +389,7 @@ export function FormTokenField(props) {
   }
 
   function addNewTokens(tokens) {
-    const tokensToAdd = uniq(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)));
+    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
 
     if (tokensToAdd.length > 0) {
       const newValue = clone(value);
@@ -453,7 +457,7 @@ export function FormTokenField(props) {
     });
 
     if (match.length === 0) {
-      _suggestions = difference(_suggestions, normalizedValue);
+      _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));
     } else {
       match = match.toLocaleLowerCase();
 
@@ -506,11 +510,19 @@ export function FormTokenField(props) {
     const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
     const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
     const hasMatchingSuggestions = matchingSuggestions.length > 0;
-    setIsExpanded(__experimentalExpandOnFocus || inputHasMinimumChars && hasMatchingSuggestions);
+
+    const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
+
+    setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);
 
     if (resetSelectedSuggestion) {
-      setSelectedSuggestionIndex(-1);
-      setSelectedSuggestionScroll(false);
+      if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {
+        setSelectedSuggestionIndex(0);
+        setSelectedSuggestionScroll(true);
+      } else {
+        setSelectedSuggestionIndex(-1);
+        setSelectedSuggestionScroll(false);
+      }
     }
 
     if (inputHasMinimumChars) {
@@ -593,7 +605,7 @@ export function FormTokenField(props) {
   /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 
-  return createElement("div", tokenFieldProps, createElement("label", {
+  return createElement("div", tokenFieldProps, createElement(StyledLabel, {
     htmlFor: `components-form-token-input-${instanceId}`,
     className: "components-form-token-field__label"
   }, label), createElement("div", {
@@ -617,7 +629,8 @@ export function FormTokenField(props) {
     selectedIndex: selectedSuggestionIndex,
     scrollIntoView: selectedSuggestionScroll,
     onHover: onSuggestionHovered,
-    onSelect: onSuggestionSelected
+    onSelect: onSuggestionSelected,
+    __experimentalRenderItem: __experimentalRenderItem
   })), __experimentalShowHowTo && createElement("p", {
     id: `components-form-token-suggestions-howto-${instanceId}`,
     className: "components-form-token-field__help"

package/build-module/form-token-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/form-token-field/index.tsx"],"names":["last","clone","uniq","map","difference","some","classnames","useEffect","useRef","useState","__","_n","sprintf","useDebounce","useInstanceId","usePrevious","speak","BACKSPACE","ENTER","UP","DOWN","LEFT","RIGHT","SPACE","DELETE","ESCAPE","isShallowEqual","Token","TokenInput","TokensAndInputWrapperFlex","SuggestionsList","FlexItem","identity","value","FormTokenField","props","autoCapitalize","autoComplete","maxLength","placeholder","label","className","suggestions","maxSuggestions","displayTransform","saveTransform","token","trim","onChange","onInputChange","onFocus","undefined","isBorderless","disabled","tokenizeOnSpace","messages","added","removed","remove","__experimentalInvalid","__experimentalExpandOnFocus","__experimentalValidateInput","__experimentalShowHowTo","__next36pxDefaultSize","instanceId","incompleteTokenValue","setIncompleteTokenValue","inputOffsetFromEnd","setInputOffsetFromEnd","isActive","setIsActive","isExpanded","setIsExpanded","selectedSuggestionIndex","setSelectedSuggestionIndex","selectedSuggestionScroll","setSelectedSuggestionScroll","prevSuggestions","prevValue","input","tokensAndInput","debouncedSpeak","hasFocus","focus","suggestionsDidUpdate","updateSuggestions","current","ownerDocument","activeElement","onFocusHandler","event","target","onBlur","inputHasValidValue","onKeyDown","preventDefault","defaultPrevented","keyCode","handleDeleteKey","deleteTokenBeforeInput","addCurrentToken","handleLeftArrowKey","handleUpArrowKey","handleRightArrowKey","handleDownArrowKey","deleteTokenAfterInput","handleEscapeKey","onKeyPress","charCode","handleCommaKey","onContainerTouched","onTokenClickRemove","deleteToken","onSuggestionHovered","suggestion","index","getMatchingSuggestions","indexOf","onSuggestionSelected","addNewToken","onInputChangeHandler","text","separator","items","split","tokenValue","length","addNewTokens","slice","_deleteToken","isInputEmpty","moveInputBeforePreviousToken","moveInputAfterNextToken","HTMLInputElement","moveInputToIndex","Math","max","prevInputOffsetFromEnd","min","getIndexOfInput","selectedSuggestion","getSelectedSuggestion","tokens","tokensToAdd","filter","Boolean","valueContainsToken","newValue","splice","newTokens","item","getTokenValue","searchValue","_suggestions","_value","_maxSuggestions","_saveTransform","match","startsWithMatch","containsMatch","normalizedValue","toLocaleLowerCase","forEach","push","concat","resetSelectedSuggestion","inputHasMinimumChars","matchingSuggestions","hasMatchingSuggestions","message","renderTokensAndInput","components","renderToken","renderInput","status","termPosition","termsCount","title","onMouseEnter","onMouseLeave","inputProps","key","classes","tokenFieldProps","tabIndex","Object","assign"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { last, clone, uniq, map, difference, some } from 'lodash';\nimport classnames from 'classnames';\nimport type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport {\n\tBACKSPACE,\n\tENTER,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tSPACE,\n\tDELETE,\n\tESCAPE,\n} from '@wordpress/keycodes';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport Token from './token';\nimport TokenInput from './token-input';\nimport { TokensAndInputWrapperFlex } from './styles';\nimport SuggestionsList from './suggestions-list';\nimport type { FormTokenFieldProps, TokenItem } from './types';\nimport { FlexItem } from '../flex';\n\nconst identity = ( value: string ) => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.\n */\nexport function FormTokenField( props: FormTokenFieldProps ) {\n\tconst {\n\t\tautoCapitalize,\n\t\tautoComplete,\n\t\tmaxLength,\n\t\tplaceholder,\n\t\tlabel = __( 'Add item' ),\n\t\tclassName,\n\t\tsuggestions = [],\n\t\tmaxSuggestions = 100,\n\t\tvalue = [],\n\t\tdisplayTransform = identity,\n\t\tsaveTransform = ( token ) => token.trim(),\n\t\tonChange = () => {},\n\t\tonInputChange = () => {},\n\t\tonFocus = undefined,\n\t\tisBorderless = false,\n\t\tdisabled = false,\n\t\ttokenizeOnSpace = false,\n\t\tmessages = {\n\t\t\tadded: __( 'Item added.' ),\n\t\t\tremoved: __( 'Item removed.' ),\n\t\t\tremove: __( 'Remove item' ),\n\t\t\t__experimentalInvalid: __( 'Invalid item' ),\n\t\t},\n\t\t__experimentalExpandOnFocus = false,\n\t\t__experimentalValidateInput = () => true,\n\t\t__experimentalShowHowTo = true,\n\t\t__next36pxDefaultSize = false,\n\t} = props;\n\n\tconst instanceId = useInstanceId( FormTokenField );\n\n\t// We reset to these initial values again in the onBlur\n\tconst [ incompleteTokenValue, setIncompleteTokenValue ] = useState( '' );\n\tconst [ inputOffsetFromEnd, setInputOffsetFromEnd ] = useState( 0 );\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ selectedSuggestionIndex, setSelectedSuggestionIndex ] =\n\t\tuseState( -1 );\n\tconst [ selectedSuggestionScroll, setSelectedSuggestionScroll ] =\n\t\tuseState( false );\n\n\tconst prevSuggestions = usePrevious< string[] >( suggestions );\n\tconst prevValue = usePrevious< ( string | TokenItem )[] >( value );\n\n\tconst input = useRef< HTMLInputElement >( null );\n\tconst tokensAndInput = useRef< HTMLInputElement >( null );\n\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\tuseEffect( () => {\n\t\t// Make sure to focus the input when the isActive state is true.\n\t\tif ( isActive && ! hasFocus() ) {\n\t\t\tfocus();\n\t\t}\n\t}, [ isActive ] );\n\n\tuseEffect( () => {\n\t\tconst suggestionsDidUpdate = ! isShallowEqual(\n\t\t\tsuggestions,\n\t\t\tprevSuggestions || []\n\t\t);\n\n\t\tif ( suggestionsDidUpdate || value !== prevValue ) {\n\t\t\tupdateSuggestions( suggestionsDidUpdate );\n\t\t}\n\n\t\t// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ suggestions, prevSuggestions, value, prevValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ incompleteTokenValue ] );\n\n\tif ( disabled && isActive ) {\n\t\tsetIsActive( false );\n\t\tsetIncompleteTokenValue( '' );\n\t}\n\n\tfunction focus() {\n\t\tinput.current?.focus();\n\t}\n\n\tfunction hasFocus() {\n\t\treturn input.current === input.current?.ownerDocument.activeElement;\n\t}\n\n\tfunction onFocusHandler( event: FocusEvent ) {\n\t\t// If focus is on the input or on the container, set the isActive state to true.\n\t\tif ( hasFocus() || event.target === tokensAndInput.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tsetIsExpanded( __experimentalExpandOnFocus || isExpanded );\n\t\t} else {\n\t\t\t/*\n\t\t\t * Otherwise, focus is on one of the token \"remove\" buttons and we\n\t\t\t * set the isActive state to false to prevent the input to be\n\t\t\t * re-focused, see componentDidUpdate().\n\t\t\t */\n\t\t\tsetIsActive( false );\n\t\t}\n\n\t\tif ( 'function' === typeof onFocus ) {\n\t\t\tonFocus( event );\n\t\t}\n\t}\n\n\tfunction onBlur() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\tsetIsActive( false );\n\t\t} else {\n\t\t\t// Reset to initial state\n\t\t\tsetIncompleteTokenValue( '' );\n\t\t\tsetInputOffsetFromEnd( 0 );\n\t\t\tsetIsActive( false );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onKeyDown( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\t// TODO: replace to event.code;\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase BACKSPACE:\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenBeforeInput );\n\t\t\t\tbreak;\n\t\t\tcase ENTER:\n\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\tbreak;\n\t\t\tcase LEFT:\n\t\t\t\tpreventDefault = handleLeftArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase UP:\n\t\t\t\tpreventDefault = handleUpArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase RIGHT:\n\t\t\t\tpreventDefault = handleRightArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase DOWN:\n\t\t\t\tpreventDefault = handleDownArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase DELETE:\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenAfterInput );\n\t\t\t\tbreak;\n\t\t\tcase SPACE:\n\t\t\t\tif ( tokenizeOnSpace ) {\n\t\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ESCAPE:\n\t\t\t\tpreventDefault = handleEscapeKey( event );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onKeyPress( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\t\t// TODO: replace to event.code;\n\t\tswitch ( event.charCode ) {\n\t\t\tcase 44: // Comma.\n\t\t\t\tpreventDefault = handleCommaKey();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onContainerTouched( event: MouseEvent | TouchEvent ) {\n\t\t// Prevent clicking/touching the tokensAndInput container from blurring\n\t\t// the input and adding the current token.\n\t\tif ( event.target === tokensAndInput.current && isActive ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onTokenClickRemove( event: { value: string } ) {\n\t\tdeleteToken( event.value );\n\t\tfocus();\n\t}\n\n\tfunction onSuggestionHovered( suggestion: string ) {\n\t\tconst index = getMatchingSuggestions().indexOf( suggestion );\n\n\t\tif ( index >= 0 ) {\n\t\t\tsetSelectedSuggestionIndex( index );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onSuggestionSelected( suggestion: string ) {\n\t\taddNewToken( suggestion );\n\t}\n\n\tfunction onInputChangeHandler( event: { value: string } ) {\n\t\tconst text = event.value;\n\t\tconst separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n\t\tconst items = text.split( separator );\n\t\tconst tokenValue = last( items ) || '';\n\n\t\tif ( items.length > 1 ) {\n\t\t\taddNewTokens( items.slice( 0, -1 ) );\n\t\t}\n\t\tsetIncompleteTokenValue( tokenValue );\n\t\tonInputChange( tokenValue );\n\t}\n\n\tfunction handleDeleteKey( _deleteToken: () => void ) {\n\t\tlet preventDefault = false;\n\t\tif ( hasFocus() && isInputEmpty() ) {\n\t\t\t_deleteToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleLeftArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputBeforePreviousToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleRightArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputAfterNextToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleUpArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index === 0\n\t\t\t\t\t? getMatchingSuggestions(\n\t\t\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\t\t\tsuggestions,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\t\t\tsaveTransform\n\t\t\t\t\t  ).length\n\t\t\t\t\t: index ) - 1\n\t\t\t);\n\t\t} );\n\t\tsetSelectedSuggestionScroll( true );\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleDownArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index + 1 ) %\n\t\t\t\tgetMatchingSuggestions(\n\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\tsuggestions,\n\t\t\t\t\tvalue,\n\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\tsaveTransform\n\t\t\t\t).length\n\t\t\t);\n\t\t} );\n\n\t\tsetSelectedSuggestionScroll( true );\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleEscapeKey( event: KeyboardEvent ) {\n\t\tif ( event.target instanceof HTMLInputElement ) {\n\t\t\tsetIncompleteTokenValue( event.target.value );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleCommaKey() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction moveInputToIndex( index: number ) {\n\t\tsetInputOffsetFromEnd( value.length - Math.max( index, -1 ) - 1 );\n\t}\n\n\tfunction moveInputBeforePreviousToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.min( prevInputOffsetFromEnd + 1, value.length );\n\t\t} );\n\t}\n\n\tfunction moveInputAfterNextToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.max( prevInputOffsetFromEnd - 1, 0 );\n\t\t} );\n\t}\n\n\tfunction deleteTokenBeforeInput() {\n\t\tconst index = getIndexOfInput() - 1;\n\n\t\tif ( index > -1 ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t}\n\t}\n\n\tfunction deleteTokenAfterInput() {\n\t\tconst index = getIndexOfInput();\n\n\t\tif ( index < value.length ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t\t// Update input offset since it's the offset from the last token.\n\t\t\tmoveInputToIndex( index );\n\t\t}\n\t}\n\n\tfunction addCurrentToken() {\n\t\tlet preventDefault = false;\n\t\tconst selectedSuggestion = getSelectedSuggestion();\n\n\t\tif ( selectedSuggestion ) {\n\t\t\taddNewToken( selectedSuggestion );\n\t\t\tpreventDefault = true;\n\t\t} else if ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction addNewTokens( tokens: string[] ) {\n\t\tconst tokensToAdd = uniq(\n\t\t\ttokens\n\t\t\t\t.map( saveTransform )\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.filter( ( token ) => ! valueContainsToken( token ) )\n\t\t);\n\n\t\tif ( tokensToAdd.length > 0 ) {\n\t\t\tconst newValue = clone( value );\n\t\t\tnewValue.splice( getIndexOfInput(), 0, ...tokensToAdd );\n\t\t\tonChange( newValue );\n\t\t}\n\t}\n\n\tfunction addNewToken( token: string ) {\n\t\tif ( ! __experimentalValidateInput( token ) ) {\n\t\t\tspeak( messages.__experimentalInvalid, 'assertive' );\n\t\t\treturn;\n\t\t}\n\t\taddNewTokens( [ token ] );\n\t\tspeak( messages.added, 'assertive' );\n\n\t\tsetIncompleteTokenValue( '' );\n\t\tsetSelectedSuggestionIndex( -1 );\n\t\tsetSelectedSuggestionScroll( false );\n\t\tsetIsExpanded( ! __experimentalExpandOnFocus );\n\n\t\tif ( isActive ) {\n\t\t\tfocus();\n\t\t}\n\t}\n\n\tfunction deleteToken( token: string | TokenItem ) {\n\t\tconst newTokens = value.filter( ( item ) => {\n\t\t\treturn getTokenValue( item ) !== getTokenValue( token );\n\t\t} );\n\t\tonChange( newTokens );\n\t\tspeak( messages.removed, 'assertive' );\n\t}\n\n\tfunction getTokenValue( token: { value: string } | string ) {\n\t\tif ( 'object' === typeof token ) {\n\t\t\treturn token.value;\n\t\t}\n\n\t\treturn token;\n\t}\n\n\tfunction getMatchingSuggestions(\n\t\tsearchValue = incompleteTokenValue,\n\t\t_suggestions = suggestions,\n\t\t_value = value,\n\t\t_maxSuggestions = maxSuggestions,\n\t\t_saveTransform = saveTransform\n\t) {\n\t\tlet match = _saveTransform( searchValue );\n\t\tconst startsWithMatch: string[] = [];\n\t\tconst containsMatch: string[] = [];\n\t\tconst normalizedValue = _value.map( ( item ) => {\n\t\t\tif ( typeof item === 'string' ) {\n\t\t\t\treturn item;\n\t\t\t}\n\t\t\treturn item.value;\n\t\t} );\n\n\t\tif ( match.length === 0 ) {\n\t\t\t_suggestions = difference( _suggestions, normalizedValue );\n\t\t} else {\n\t\t\tmatch = match.toLocaleLowerCase();\n\n\t\t\t_suggestions.forEach( ( suggestion ) => {\n\t\t\t\tconst index = suggestion.toLocaleLowerCase().indexOf( match );\n\t\t\t\tif ( normalizedValue.indexOf( suggestion ) === -1 ) {\n\t\t\t\t\tif ( index === 0 ) {\n\t\t\t\t\t\tstartsWithMatch.push( suggestion );\n\t\t\t\t\t} else if ( index > 0 ) {\n\t\t\t\t\t\tcontainsMatch.push( suggestion );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t_suggestions = startsWithMatch.concat( containsMatch );\n\t\t}\n\n\t\treturn _suggestions.slice( 0, _maxSuggestions );\n\t}\n\n\tfunction getSelectedSuggestion() {\n\t\tif ( selectedSuggestionIndex !== -1 ) {\n\t\t\treturn getMatchingSuggestions()[ selectedSuggestionIndex ];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction valueContainsToken( token: string ) {\n\t\treturn some( value, ( item ) => {\n\t\t\treturn getTokenValue( token ) === getTokenValue( item );\n\t\t} );\n\t}\n\n\tfunction getIndexOfInput() {\n\t\treturn value.length - inputOffsetFromEnd;\n\t}\n\n\tfunction isInputEmpty() {\n\t\treturn incompleteTokenValue.length === 0;\n\t}\n\n\tfunction inputHasValidValue() {\n\t\treturn saveTransform( incompleteTokenValue ).length > 0;\n\t}\n\n\tfunction updateSuggestions( resetSelectedSuggestion = true ) {\n\t\tconst inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n\t\tconst matchingSuggestions =\n\t\t\tgetMatchingSuggestions( incompleteTokenValue );\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\n\t\tsetIsExpanded(\n\t\t\t__experimentalExpandOnFocus ||\n\t\t\t\t( inputHasMinimumChars && hasMatchingSuggestions )\n\t\t);\n\n\t\tif ( resetSelectedSuggestion ) {\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\n\t\tif ( inputHasMinimumChars ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tdebouncedSpeak( message, 'assertive' );\n\t\t}\n\t}\n\n\tfunction renderTokensAndInput() {\n\t\tconst components = map( value, renderToken );\n\t\tcomponents.splice( getIndexOfInput(), 0, renderInput() );\n\n\t\treturn components;\n\t}\n\n\tfunction renderToken(\n\t\ttoken: string | TokenItem,\n\t\tindex: number,\n\t\ttokens: ( string | TokenItem )[]\n\t) {\n\t\tconst _value = getTokenValue( token );\n\t\tconst status = typeof token !== 'string' ? token.status : undefined;\n\t\tconst termPosition = index + 1;\n\t\tconst termsCount = tokens.length;\n\n\t\treturn (\n\t\t\t<FlexItem key={ 'token-' + _value }>\n\t\t\t\t<Token\n\t\t\t\t\tvalue={ _value }\n\t\t\t\t\tstatus={ status }\n\t\t\t\t\ttitle={\n\t\t\t\t\t\ttypeof token !== 'string' ? token.title : undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\tonClickRemove={ onTokenClickRemove }\n\t\t\t\t\tisBorderless={\n\t\t\t\t\t\t( typeof token !== 'string' && token.isBorderless ) ||\n\t\t\t\t\t\tisBorderless\n\t\t\t\t\t}\n\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseEnter\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseLeave\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ 'error' !== status && disabled }\n\t\t\t\t\tmessages={ messages }\n\t\t\t\t\ttermsCount={ termsCount }\n\t\t\t\t\ttermPosition={ termPosition }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t);\n\t}\n\n\tfunction renderInput() {\n\t\tconst inputProps = {\n\t\t\tinstanceId,\n\t\t\tautoCapitalize,\n\t\t\tautoComplete,\n\t\t\tplaceholder: value.length === 0 ? placeholder : '',\n\t\t\tkey: 'input',\n\t\t\tdisabled,\n\t\t\tvalue: incompleteTokenValue,\n\t\t\tonBlur,\n\t\t\tisExpanded,\n\t\t\tselectedSuggestionIndex,\n\t\t};\n\n\t\treturn (\n\t\t\t<TokenInput\n\t\t\t\t{ ...inputProps }\n\t\t\t\tonChange={\n\t\t\t\t\t! ( maxLength && value.length >= maxLength )\n\t\t\t\t\t\t? onInputChangeHandler\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tref={ input }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-form-token-field__input-container',\n\t\t{\n\t\t\t'is-active': isActive,\n\t\t\t'is-disabled': disabled,\n\t\t}\n\t);\n\n\tlet tokenFieldProps = {\n\t\tclassName: 'components-form-token-field',\n\t\ttabIndex: -1,\n\t};\n\tconst matchingSuggestions = getMatchingSuggestions();\n\n\tif ( ! disabled ) {\n\t\ttokenFieldProps = Object.assign( {}, tokenFieldProps, {\n\t\t\tonKeyDown,\n\t\t\tonKeyPress,\n\t\t\tonFocus: onFocusHandler,\n\t\t} );\n\t}\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<div { ...tokenFieldProps }>\n\t\t\t<label\n\t\t\t\thtmlFor={ `components-form-token-input-${ instanceId }` }\n\t\t\t\tclassName=\"components-form-token-field__label\"\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tref={ tokensAndInput }\n\t\t\t\tclassName={ classes }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonMouseDown={ onContainerTouched }\n\t\t\t\tonTouchStart={ onContainerTouched }\n\t\t\t>\n\t\t\t\t<TokensAndInputWrapperFlex\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap={ 1 }\n\t\t\t\t\twrap={ true }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\thasTokens={ !! value.length }\n\t\t\t\t>\n\t\t\t\t\t{ renderTokensAndInput() }\n\t\t\t\t</TokensAndInputWrapperFlex>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tmatch={ saveTransform( incompleteTokenValue ) }\n\t\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\tselectedIndex={ selectedSuggestionIndex }\n\t\t\t\t\t\tscrollIntoView={ selectedSuggestionScroll }\n\t\t\t\t\t\tonHover={ onSuggestionHovered }\n\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ __experimentalShowHowTo && (\n\t\t\t\t<p\n\t\t\t\t\tid={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-form-token-field__help\"\n\t\t\t\t>\n\t\t\t\t\t{ tokenizeOnSpace\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t'Separate with commas, spaces, or the Enter key.'\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Separate with commas or the Enter key.' ) }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</div>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default FormTokenField;\n"]}
+{"version":3,"sources":["@wordpress/components/src/form-token-field/index.tsx"],"names":["last","clone","map","some","classnames","useEffect","useRef","useState","__","_n","sprintf","useDebounce","useInstanceId","usePrevious","speak","isShallowEqual","Token","TokenInput","TokensAndInputWrapperFlex","SuggestionsList","FlexItem","StyledLabel","identity","value","FormTokenField","props","autoCapitalize","autoComplete","maxLength","placeholder","label","className","suggestions","maxSuggestions","displayTransform","saveTransform","token","trim","onChange","onInputChange","onFocus","undefined","isBorderless","disabled","tokenizeOnSpace","messages","added","removed","remove","__experimentalInvalid","__experimentalRenderItem","__experimentalExpandOnFocus","__experimentalValidateInput","__experimentalShowHowTo","__next36pxDefaultSize","__experimentalAutoSelectFirstMatch","instanceId","incompleteTokenValue","setIncompleteTokenValue","inputOffsetFromEnd","setInputOffsetFromEnd","isActive","setIsActive","isExpanded","setIsExpanded","selectedSuggestionIndex","setSelectedSuggestionIndex","selectedSuggestionScroll","setSelectedSuggestionScroll","prevSuggestions","prevValue","input","tokensAndInput","debouncedSpeak","hasFocus","focus","suggestionsDidUpdate","updateSuggestions","current","ownerDocument","activeElement","onFocusHandler","event","target","onBlur","inputHasValidValue","onKeyDown","preventDefault","defaultPrevented","code","handleDeleteKey","deleteTokenBeforeInput","addCurrentToken","handleLeftArrowKey","handleUpArrowKey","handleRightArrowKey","handleDownArrowKey","deleteTokenAfterInput","handleEscapeKey","onKeyPress","charCode","handleCommaKey","onContainerTouched","onTokenClickRemove","deleteToken","onSuggestionHovered","suggestion","index","getMatchingSuggestions","indexOf","onSuggestionSelected","addNewToken","onInputChangeHandler","text","separator","items","split","tokenValue","length","addNewTokens","slice","_deleteToken","isInputEmpty","moveInputBeforePreviousToken","moveInputAfterNextToken","HTMLInputElement","moveInputToIndex","Math","max","prevInputOffsetFromEnd","min","getIndexOfInput","selectedSuggestion","getSelectedSuggestion","tokens","tokensToAdd","Set","filter","Boolean","valueContainsToken","newValue","splice","newTokens","item","getTokenValue","searchValue","_suggestions","_value","_maxSuggestions","_saveTransform","match","startsWithMatch","containsMatch","normalizedValue","includes","toLocaleLowerCase","forEach","push","concat","resetSelectedSuggestion","inputHasMinimumChars","matchingSuggestions","hasMatchingSuggestions","shouldExpandIfFocuses","message","renderTokensAndInput","components","renderToken","renderInput","status","termPosition","termsCount","title","onMouseEnter","onMouseLeave","inputProps","key","classes","tokenFieldProps","tabIndex","Object","assign"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { last, clone, map, some } from 'lodash';\nimport classnames from 'classnames';\nimport type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport Token from './token';\nimport TokenInput from './token-input';\nimport { TokensAndInputWrapperFlex } from './styles';\nimport SuggestionsList from './suggestions-list';\nimport type { FormTokenFieldProps, TokenItem } from './types';\nimport { FlexItem } from '../flex';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\n\nconst identity = ( value: string ) => value;\n\n/**\n * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,\n * or the \"to\" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.\n *\n * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).\n * Tokens are separated by the \",\" character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.\n *\n * The `value` property is handled in a manner similar to controlled form components.\n * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.\n */\nexport function FormTokenField( props: FormTokenFieldProps ) {\n\tconst {\n\t\tautoCapitalize,\n\t\tautoComplete,\n\t\tmaxLength,\n\t\tplaceholder,\n\t\tlabel = __( 'Add item' ),\n\t\tclassName,\n\t\tsuggestions = [],\n\t\tmaxSuggestions = 100,\n\t\tvalue = [],\n\t\tdisplayTransform = identity,\n\t\tsaveTransform = ( token ) => token.trim(),\n\t\tonChange = () => {},\n\t\tonInputChange = () => {},\n\t\tonFocus = undefined,\n\t\tisBorderless = false,\n\t\tdisabled = false,\n\t\ttokenizeOnSpace = false,\n\t\tmessages = {\n\t\t\tadded: __( 'Item added.' ),\n\t\t\tremoved: __( 'Item removed.' ),\n\t\t\tremove: __( 'Remove item' ),\n\t\t\t__experimentalInvalid: __( 'Invalid item' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t\t__experimentalExpandOnFocus = false,\n\t\t__experimentalValidateInput = () => true,\n\t\t__experimentalShowHowTo = true,\n\t\t__next36pxDefaultSize = false,\n\t\t__experimentalAutoSelectFirstMatch = false,\n\t} = props;\n\n\tconst instanceId = useInstanceId( FormTokenField );\n\n\t// We reset to these initial values again in the onBlur\n\tconst [ incompleteTokenValue, setIncompleteTokenValue ] = useState( '' );\n\tconst [ inputOffsetFromEnd, setInputOffsetFromEnd ] = useState( 0 );\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ selectedSuggestionIndex, setSelectedSuggestionIndex ] =\n\t\tuseState( -1 );\n\tconst [ selectedSuggestionScroll, setSelectedSuggestionScroll ] =\n\t\tuseState( false );\n\n\tconst prevSuggestions = usePrevious< string[] >( suggestions );\n\tconst prevValue = usePrevious< ( string | TokenItem )[] >( value );\n\n\tconst input = useRef< HTMLInputElement >( null );\n\tconst tokensAndInput = useRef< HTMLInputElement >( null );\n\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\tuseEffect( () => {\n\t\t// Make sure to focus the input when the isActive state is true.\n\t\tif ( isActive && ! hasFocus() ) {\n\t\t\tfocus();\n\t\t}\n\t}, [ isActive ] );\n\n\tuseEffect( () => {\n\t\tconst suggestionsDidUpdate = ! isShallowEqual(\n\t\t\tsuggestions,\n\t\t\tprevSuggestions || []\n\t\t);\n\n\t\tif ( suggestionsDidUpdate || value !== prevValue ) {\n\t\t\tupdateSuggestions( suggestionsDidUpdate );\n\t\t}\n\n\t\t// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ suggestions, prevSuggestions, value, prevValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ incompleteTokenValue ] );\n\n\tuseEffect( () => {\n\t\tupdateSuggestions();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ __experimentalAutoSelectFirstMatch ] );\n\n\tif ( disabled && isActive ) {\n\t\tsetIsActive( false );\n\t\tsetIncompleteTokenValue( '' );\n\t}\n\n\tfunction focus() {\n\t\tinput.current?.focus();\n\t}\n\n\tfunction hasFocus() {\n\t\treturn input.current === input.current?.ownerDocument.activeElement;\n\t}\n\n\tfunction onFocusHandler( event: FocusEvent ) {\n\t\t// If focus is on the input or on the container, set the isActive state to true.\n\t\tif ( hasFocus() || event.target === tokensAndInput.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tsetIsExpanded( __experimentalExpandOnFocus || isExpanded );\n\t\t} else {\n\t\t\t/*\n\t\t\t * Otherwise, focus is on one of the token \"remove\" buttons and we\n\t\t\t * set the isActive state to false to prevent the input to be\n\t\t\t * re-focused, see componentDidUpdate().\n\t\t\t */\n\t\t\tsetIsActive( false );\n\t\t}\n\n\t\tif ( 'function' === typeof onFocus ) {\n\t\t\tonFocus( event );\n\t\t}\n\t}\n\n\tfunction onBlur() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\tsetIsActive( false );\n\t\t} else {\n\t\t\t// Reset to initial state\n\t\t\tsetIncompleteTokenValue( '' );\n\t\t\tsetInputOffsetFromEnd( 0 );\n\t\t\tsetIsActive( false );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onKeyDown( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Backspace':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenBeforeInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tpreventDefault = handleLeftArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpreventDefault = handleUpArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowRight':\n\t\t\t\tpreventDefault = handleRightArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpreventDefault = handleDownArrowKey();\n\t\t\t\tbreak;\n\t\t\tcase 'Delete':\n\t\t\t\tpreventDefault = handleDeleteKey( deleteTokenAfterInput );\n\t\t\t\tbreak;\n\t\t\tcase 'Space':\n\t\t\t\tif ( tokenizeOnSpace ) {\n\t\t\t\t\tpreventDefault = addCurrentToken();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tpreventDefault = handleEscapeKey( event );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onKeyPress( event: KeyboardEvent ) {\n\t\tlet preventDefault = false;\n\t\t// TODO: replace to event.code;\n\t\tswitch ( event.charCode ) {\n\t\t\tcase 44: // Comma.\n\t\t\t\tpreventDefault = handleCommaKey();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onContainerTouched( event: MouseEvent | TouchEvent ) {\n\t\t// Prevent clicking/touching the tokensAndInput container from blurring\n\t\t// the input and adding the current token.\n\t\tif ( event.target === tokensAndInput.current && isActive ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tfunction onTokenClickRemove( event: { value: string } ) {\n\t\tdeleteToken( event.value );\n\t\tfocus();\n\t}\n\n\tfunction onSuggestionHovered( suggestion: string ) {\n\t\tconst index = getMatchingSuggestions().indexOf( suggestion );\n\n\t\tif ( index >= 0 ) {\n\t\t\tsetSelectedSuggestionIndex( index );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\t}\n\n\tfunction onSuggestionSelected( suggestion: string ) {\n\t\taddNewToken( suggestion );\n\t}\n\n\tfunction onInputChangeHandler( event: { value: string } ) {\n\t\tconst text = event.value;\n\t\tconst separator = tokenizeOnSpace ? /[ ,\\t]+/ : /[,\\t]+/;\n\t\tconst items = text.split( separator );\n\t\tconst tokenValue = last( items ) || '';\n\n\t\tif ( items.length > 1 ) {\n\t\t\taddNewTokens( items.slice( 0, -1 ) );\n\t\t}\n\t\tsetIncompleteTokenValue( tokenValue );\n\t\tonInputChange( tokenValue );\n\t}\n\n\tfunction handleDeleteKey( _deleteToken: () => void ) {\n\t\tlet preventDefault = false;\n\t\tif ( hasFocus() && isInputEmpty() ) {\n\t\t\t_deleteToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleLeftArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputBeforePreviousToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleRightArrowKey() {\n\t\tlet preventDefault = false;\n\t\tif ( isInputEmpty() ) {\n\t\t\tmoveInputAfterNextToken();\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction handleUpArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index === 0\n\t\t\t\t\t? getMatchingSuggestions(\n\t\t\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\t\t\tsuggestions,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\t\t\tsaveTransform\n\t\t\t\t\t  ).length\n\t\t\t\t\t: index ) - 1\n\t\t\t);\n\t\t} );\n\t\tsetSelectedSuggestionScroll( true );\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleDownArrowKey() {\n\t\tsetSelectedSuggestionIndex( ( index ) => {\n\t\t\treturn (\n\t\t\t\t( index + 1 ) %\n\t\t\t\tgetMatchingSuggestions(\n\t\t\t\t\tincompleteTokenValue,\n\t\t\t\t\tsuggestions,\n\t\t\t\t\tvalue,\n\t\t\t\t\tmaxSuggestions,\n\t\t\t\t\tsaveTransform\n\t\t\t\t).length\n\t\t\t);\n\t\t} );\n\n\t\tsetSelectedSuggestionScroll( true );\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleEscapeKey( event: KeyboardEvent ) {\n\t\tif ( event.target instanceof HTMLInputElement ) {\n\t\t\tsetIncompleteTokenValue( event.target.value );\n\t\t\tsetIsExpanded( false );\n\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\tsetSelectedSuggestionScroll( false );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction handleCommaKey() {\n\t\tif ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t}\n\n\t\treturn true; // PreventDefault.\n\t}\n\n\tfunction moveInputToIndex( index: number ) {\n\t\tsetInputOffsetFromEnd( value.length - Math.max( index, -1 ) - 1 );\n\t}\n\n\tfunction moveInputBeforePreviousToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.min( prevInputOffsetFromEnd + 1, value.length );\n\t\t} );\n\t}\n\n\tfunction moveInputAfterNextToken() {\n\t\tsetInputOffsetFromEnd( ( prevInputOffsetFromEnd ) => {\n\t\t\treturn Math.max( prevInputOffsetFromEnd - 1, 0 );\n\t\t} );\n\t}\n\n\tfunction deleteTokenBeforeInput() {\n\t\tconst index = getIndexOfInput() - 1;\n\n\t\tif ( index > -1 ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t}\n\t}\n\n\tfunction deleteTokenAfterInput() {\n\t\tconst index = getIndexOfInput();\n\n\t\tif ( index < value.length ) {\n\t\t\tdeleteToken( value[ index ] );\n\t\t\t// Update input offset since it's the offset from the last token.\n\t\t\tmoveInputToIndex( index );\n\t\t}\n\t}\n\n\tfunction addCurrentToken() {\n\t\tlet preventDefault = false;\n\t\tconst selectedSuggestion = getSelectedSuggestion();\n\n\t\tif ( selectedSuggestion ) {\n\t\t\taddNewToken( selectedSuggestion );\n\t\t\tpreventDefault = true;\n\t\t} else if ( inputHasValidValue() ) {\n\t\t\taddNewToken( incompleteTokenValue );\n\t\t\tpreventDefault = true;\n\t\t}\n\n\t\treturn preventDefault;\n\t}\n\n\tfunction addNewTokens( tokens: string[] ) {\n\t\tconst tokensToAdd = [\n\t\t\t...new Set(\n\t\t\t\ttokens\n\t\t\t\t\t.map( saveTransform )\n\t\t\t\t\t.filter( Boolean )\n\t\t\t\t\t.filter( ( token ) => ! valueContainsToken( token ) )\n\t\t\t),\n\t\t];\n\n\t\tif ( tokensToAdd.length > 0 ) {\n\t\t\tconst newValue = clone( value );\n\t\t\tnewValue.splice( getIndexOfInput(), 0, ...tokensToAdd );\n\t\t\tonChange( newValue );\n\t\t}\n\t}\n\n\tfunction addNewToken( token: string ) {\n\t\tif ( ! __experimentalValidateInput( token ) ) {\n\t\t\tspeak( messages.__experimentalInvalid, 'assertive' );\n\t\t\treturn;\n\t\t}\n\t\taddNewTokens( [ token ] );\n\t\tspeak( messages.added, 'assertive' );\n\n\t\tsetIncompleteTokenValue( '' );\n\t\tsetSelectedSuggestionIndex( -1 );\n\t\tsetSelectedSuggestionScroll( false );\n\t\tsetIsExpanded( ! __experimentalExpandOnFocus );\n\n\t\tif ( isActive ) {\n\t\t\tfocus();\n\t\t}\n\t}\n\n\tfunction deleteToken( token: string | TokenItem ) {\n\t\tconst newTokens = value.filter( ( item ) => {\n\t\t\treturn getTokenValue( item ) !== getTokenValue( token );\n\t\t} );\n\t\tonChange( newTokens );\n\t\tspeak( messages.removed, 'assertive' );\n\t}\n\n\tfunction getTokenValue( token: { value: string } | string ) {\n\t\tif ( 'object' === typeof token ) {\n\t\t\treturn token.value;\n\t\t}\n\n\t\treturn token;\n\t}\n\n\tfunction getMatchingSuggestions(\n\t\tsearchValue = incompleteTokenValue,\n\t\t_suggestions = suggestions,\n\t\t_value = value,\n\t\t_maxSuggestions = maxSuggestions,\n\t\t_saveTransform = saveTransform\n\t) {\n\t\tlet match = _saveTransform( searchValue );\n\t\tconst startsWithMatch: string[] = [];\n\t\tconst containsMatch: string[] = [];\n\t\tconst normalizedValue = _value.map( ( item ) => {\n\t\t\tif ( typeof item === 'string' ) {\n\t\t\t\treturn item;\n\t\t\t}\n\t\t\treturn item.value;\n\t\t} );\n\n\t\tif ( match.length === 0 ) {\n\t\t\t_suggestions = _suggestions.filter(\n\t\t\t\t( suggestion ) => ! normalizedValue.includes( suggestion )\n\t\t\t);\n\t\t} else {\n\t\t\tmatch = match.toLocaleLowerCase();\n\n\t\t\t_suggestions.forEach( ( suggestion ) => {\n\t\t\t\tconst index = suggestion.toLocaleLowerCase().indexOf( match );\n\t\t\t\tif ( normalizedValue.indexOf( suggestion ) === -1 ) {\n\t\t\t\t\tif ( index === 0 ) {\n\t\t\t\t\t\tstartsWithMatch.push( suggestion );\n\t\t\t\t\t} else if ( index > 0 ) {\n\t\t\t\t\t\tcontainsMatch.push( suggestion );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\t_suggestions = startsWithMatch.concat( containsMatch );\n\t\t}\n\n\t\treturn _suggestions.slice( 0, _maxSuggestions );\n\t}\n\n\tfunction getSelectedSuggestion() {\n\t\tif ( selectedSuggestionIndex !== -1 ) {\n\t\t\treturn getMatchingSuggestions()[ selectedSuggestionIndex ];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction valueContainsToken( token: string ) {\n\t\treturn some( value, ( item ) => {\n\t\t\treturn getTokenValue( token ) === getTokenValue( item );\n\t\t} );\n\t}\n\n\tfunction getIndexOfInput() {\n\t\treturn value.length - inputOffsetFromEnd;\n\t}\n\n\tfunction isInputEmpty() {\n\t\treturn incompleteTokenValue.length === 0;\n\t}\n\n\tfunction inputHasValidValue() {\n\t\treturn saveTransform( incompleteTokenValue ).length > 0;\n\t}\n\n\tfunction updateSuggestions( resetSelectedSuggestion = true ) {\n\t\tconst inputHasMinimumChars = incompleteTokenValue.trim().length > 1;\n\t\tconst matchingSuggestions =\n\t\t\tgetMatchingSuggestions( incompleteTokenValue );\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\n\t\tconst shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;\n\t\tsetIsExpanded(\n\t\t\tshouldExpandIfFocuses ||\n\t\t\t\t( inputHasMinimumChars && hasMatchingSuggestions )\n\t\t);\n\n\t\tif ( resetSelectedSuggestion ) {\n\t\t\tif (\n\t\t\t\t__experimentalAutoSelectFirstMatch &&\n\t\t\t\tinputHasMinimumChars &&\n\t\t\t\thasMatchingSuggestions\n\t\t\t) {\n\t\t\t\tsetSelectedSuggestionIndex( 0 );\n\t\t\t\tsetSelectedSuggestionScroll( true );\n\t\t\t} else {\n\t\t\t\tsetSelectedSuggestionIndex( -1 );\n\t\t\t\tsetSelectedSuggestionScroll( false );\n\t\t\t}\n\t\t}\n\n\t\tif ( inputHasMinimumChars ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tdebouncedSpeak( message, 'assertive' );\n\t\t}\n\t}\n\n\tfunction renderTokensAndInput() {\n\t\tconst components = map( value, renderToken );\n\t\tcomponents.splice( getIndexOfInput(), 0, renderInput() );\n\n\t\treturn components;\n\t}\n\n\tfunction renderToken(\n\t\ttoken: string | TokenItem,\n\t\tindex: number,\n\t\ttokens: ( string | TokenItem )[]\n\t) {\n\t\tconst _value = getTokenValue( token );\n\t\tconst status = typeof token !== 'string' ? token.status : undefined;\n\t\tconst termPosition = index + 1;\n\t\tconst termsCount = tokens.length;\n\n\t\treturn (\n\t\t\t<FlexItem key={ 'token-' + _value }>\n\t\t\t\t<Token\n\t\t\t\t\tvalue={ _value }\n\t\t\t\t\tstatus={ status }\n\t\t\t\t\ttitle={\n\t\t\t\t\t\ttypeof token !== 'string' ? token.title : undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\tonClickRemove={ onTokenClickRemove }\n\t\t\t\t\tisBorderless={\n\t\t\t\t\t\t( typeof token !== 'string' && token.isBorderless ) ||\n\t\t\t\t\t\tisBorderless\n\t\t\t\t\t}\n\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseEnter\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\ttypeof token !== 'string'\n\t\t\t\t\t\t\t? token.onMouseLeave\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={ 'error' !== status && disabled }\n\t\t\t\t\tmessages={ messages }\n\t\t\t\t\ttermsCount={ termsCount }\n\t\t\t\t\ttermPosition={ termPosition }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t);\n\t}\n\n\tfunction renderInput() {\n\t\tconst inputProps = {\n\t\t\tinstanceId,\n\t\t\tautoCapitalize,\n\t\t\tautoComplete,\n\t\t\tplaceholder: value.length === 0 ? placeholder : '',\n\t\t\tkey: 'input',\n\t\t\tdisabled,\n\t\t\tvalue: incompleteTokenValue,\n\t\t\tonBlur,\n\t\t\tisExpanded,\n\t\t\tselectedSuggestionIndex,\n\t\t};\n\n\t\treturn (\n\t\t\t<TokenInput\n\t\t\t\t{ ...inputProps }\n\t\t\t\tonChange={\n\t\t\t\t\t! ( maxLength && value.length >= maxLength )\n\t\t\t\t\t\t? onInputChangeHandler\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tref={ input }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-form-token-field__input-container',\n\t\t{\n\t\t\t'is-active': isActive,\n\t\t\t'is-disabled': disabled,\n\t\t}\n\t);\n\n\tlet tokenFieldProps = {\n\t\tclassName: 'components-form-token-field',\n\t\ttabIndex: -1,\n\t};\n\tconst matchingSuggestions = getMatchingSuggestions();\n\n\tif ( ! disabled ) {\n\t\ttokenFieldProps = Object.assign( {}, tokenFieldProps, {\n\t\t\tonKeyDown,\n\t\t\tonKeyPress,\n\t\t\tonFocus: onFocusHandler,\n\t\t} );\n\t}\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<div { ...tokenFieldProps }>\n\t\t\t<StyledLabel\n\t\t\t\thtmlFor={ `components-form-token-input-${ instanceId }` }\n\t\t\t\tclassName=\"components-form-token-field__label\"\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</StyledLabel>\n\t\t\t<div\n\t\t\t\tref={ tokensAndInput }\n\t\t\t\tclassName={ classes }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t\tonMouseDown={ onContainerTouched }\n\t\t\t\tonTouchStart={ onContainerTouched }\n\t\t\t>\n\t\t\t\t<TokensAndInputWrapperFlex\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap={ 1 }\n\t\t\t\t\twrap={ true }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\thasTokens={ !! value.length }\n\t\t\t\t>\n\t\t\t\t\t{ renderTokensAndInput() }\n\t\t\t\t</TokensAndInputWrapperFlex>\n\t\t\t\t{ isExpanded && (\n\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\tmatch={ saveTransform( incompleteTokenValue ) }\n\t\t\t\t\t\tdisplayTransform={ displayTransform }\n\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\tselectedIndex={ selectedSuggestionIndex }\n\t\t\t\t\t\tscrollIntoView={ selectedSuggestionScroll }\n\t\t\t\t\t\tonHover={ onSuggestionHovered }\n\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t__experimentalRenderItem={ __experimentalRenderItem }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t{ __experimentalShowHowTo && (\n\t\t\t\t<p\n\t\t\t\t\tid={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t\t\t\tclassName=\"components-form-token-field__help\"\n\t\t\t\t>\n\t\t\t\t\t{ tokenizeOnSpace\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t'Separate with commas, spaces, or the Enter key.'\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Separate with commas or the Enter key.' ) }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</div>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default FormTokenField;\n"]}

package/build-module/form-token-field/suggestions-list.js

@@ -30,7 +30,8 @@ export function SuggestionsList(_ref) {
     onSelect,
     suggestions = [],
     displayTransform,
-    instanceId
+    instanceId,
+    __experimentalRenderItem
   } = _ref;
   const [scrollingIntoView, setScrollingIntoView] = useState(false);
   const listRef = useRefEffect(listNode => {
@@ -95,8 +96,24 @@ export function SuggestionsList(_ref) {
     const className = classnames('components-form-token-field__suggestion', {
       'is-selected': index === selectedIndex
     });
+    let output;
+
+    if (typeof __experimentalRenderItem === 'function') {
+      output = __experimentalRenderItem({
+        item: suggestion
+      });
+    } else if (matchText) {
+      output = createElement("span", {
+        "aria-label": displayTransform(suggestion)
+      }, matchText.suggestionBeforeMatch, createElement("strong", {
+        className: "components-form-token-field__suggestion-match"
+      }, matchText.suggestionMatch), matchText.suggestionAfterMatch);
+    } else {
+      output = displayTransform(suggestion);
+    }
     /* eslint-disable jsx-a11y/click-events-have-key-events */
 
+
     return createElement("li", {
       id: `components-form-token-suggestions-${instanceId}-${index}`,
       role: "option",
@@ -106,11 +123,7 @@ export function SuggestionsList(_ref) {
       onClick: handleClick(suggestion),
       onMouseEnter: handleHover(suggestion),
       "aria-selected": index === selectedIndex
-    }, matchText ? createElement("span", {
-      "aria-label": displayTransform(suggestion)
-    }, matchText.suggestionBeforeMatch, createElement("strong", {
-      className: "components-form-token-field__suggestion-match"
-    }, matchText.suggestionMatch), matchText.suggestionAfterMatch) : displayTransform(suggestion));
+    }, output);
     /* eslint-enable jsx-a11y/click-events-have-key-events */
   }));
 }

package/build-module/form-token-field/suggestions-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/form-token-field/suggestions-list.tsx"],"names":["map","scrollView","classnames","useState","useRefEffect","handleMouseDown","e","preventDefault","SuggestionsList","selectedIndex","scrollIntoView","match","onHover","onSelect","suggestions","displayTransform","instanceId","scrollingIntoView","setScrollingIntoView","listRef","listNode","id","children","onlyScrollIfNeeded","window","setTimeout","undefined","clearTimeout","handleHover","suggestion","handleClick","computeSuggestionMatch","matchText","toLocaleLowerCase","length","transformedSuggestion","indexOfMatch","indexOf","suggestionBeforeMatch","substring","suggestionMatch","suggestionAfterMatch","index","className","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport scrollView from 'dom-scroll-into-view';\nimport classnames from 'classnames';\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SuggestionsListProps } from './types';\n\nconst handleMouseDown: MouseEventHandler = ( e ) => {\n\t// By preventing default here, we will not lose focus of <input> when clicking a suggestion.\n\te.preventDefault();\n};\n\nexport function SuggestionsList< T extends string | { value: string } >( {\n\tselectedIndex,\n\tscrollIntoView,\n\tmatch,\n\tonHover,\n\tonSelect,\n\tsuggestions = [],\n\tdisplayTransform,\n\tinstanceId,\n}: SuggestionsListProps< T > ) {\n\tconst [ scrollingIntoView, setScrollingIntoView ] = useState( false );\n\n\tconst listRef = useRefEffect< HTMLUListElement >(\n\t\t( listNode ) => {\n\t\t\t// only have to worry about scrolling selected suggestion into view\n\t\t\t// when already expanded.\n\t\t\tlet id: number;\n\t\t\tif (\n\t\t\t\tselectedIndex > -1 &&\n\t\t\t\tscrollIntoView &&\n\t\t\t\tlistNode.children[ selectedIndex ]\n\t\t\t) {\n\t\t\t\tsetScrollingIntoView( true );\n\t\t\t\tscrollView(\n\t\t\t\t\tlistNode.children[ selectedIndex ] as HTMLLIElement,\n\t\t\t\t\tlistNode,\n\t\t\t\t\t{\n\t\t\t\t\t\tonlyScrollIfNeeded: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tid = window.setTimeout( () => {\n\t\t\t\t\tsetScrollingIntoView( false );\n\t\t\t\t}, 100 );\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif ( id !== undefined ) {\n\t\t\t\t\twindow.clearTimeout( id );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ selectedIndex, scrollIntoView ]\n\t);\n\n\tconst handleHover = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tif ( ! scrollingIntoView ) {\n\t\t\t\tonHover?.( suggestion );\n\t\t\t}\n\t\t};\n\t};\n\n\tconst handleClick = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tonSelect?.( suggestion );\n\t\t};\n\t};\n\n\tconst computeSuggestionMatch = ( suggestion: T ) => {\n\t\tconst matchText = displayTransform( match ).toLocaleLowerCase();\n\t\tif ( matchText.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst transformedSuggestion = displayTransform( suggestion );\n\t\tconst indexOfMatch = transformedSuggestion\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf( matchText );\n\n\t\treturn {\n\t\t\tsuggestionBeforeMatch: transformedSuggestion.substring(\n\t\t\t\t0,\n\t\t\t\tindexOfMatch\n\t\t\t),\n\t\t\tsuggestionMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch,\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t\tsuggestionAfterMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t};\n\t};\n\n\treturn (\n\t\t<ul\n\t\t\tref={ listRef }\n\t\t\tclassName=\"components-form-token-field__suggestions-list\"\n\t\t\tid={ `components-form-token-suggestions-${ instanceId }` }\n\t\t\trole=\"listbox\"\n\t\t>\n\t\t\t{ map( suggestions, ( suggestion, index ) => {\n\t\t\t\tconst matchText = computeSuggestionMatch( suggestion );\n\t\t\t\tconst className = classnames(\n\t\t\t\t\t'components-form-token-field__suggestion',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\t/* eslint-disable jsx-a11y/click-events-have-key-events */\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tid={ `components-form-token-suggestions-${ instanceId }-${ index }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\ttypeof suggestion === 'object' &&\n\t\t\t\t\t\t\t'value' in suggestion\n\t\t\t\t\t\t\t\t? suggestion?.value\n\t\t\t\t\t\t\t\t: displayTransform( suggestion )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseDown={ handleMouseDown }\n\t\t\t\t\t\tonClick={ handleClick( suggestion ) }\n\t\t\t\t\t\tonMouseEnter={ handleHover( suggestion ) }\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ matchText ? (\n\t\t\t\t\t\t\t<span aria-label={ displayTransform( suggestion ) }>\n\t\t\t\t\t\t\t\t{ matchText.suggestionBeforeMatch }\n\t\t\t\t\t\t\t\t<strong className=\"components-form-token-field__suggestion-match\">\n\t\t\t\t\t\t\t\t\t{ matchText.suggestionMatch }\n\t\t\t\t\t\t\t\t</strong>\n\t\t\t\t\t\t\t\t{ matchText.suggestionAfterMatch }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdisplayTransform( suggestion )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t\t/* eslint-enable jsx-a11y/click-events-have-key-events */\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n\nexport default SuggestionsList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/form-token-field/suggestions-list.tsx"],"names":["map","scrollView","classnames","useState","useRefEffect","handleMouseDown","e","preventDefault","SuggestionsList","selectedIndex","scrollIntoView","match","onHover","onSelect","suggestions","displayTransform","instanceId","__experimentalRenderItem","scrollingIntoView","setScrollingIntoView","listRef","listNode","id","children","onlyScrollIfNeeded","window","setTimeout","undefined","clearTimeout","handleHover","suggestion","handleClick","computeSuggestionMatch","matchText","toLocaleLowerCase","length","transformedSuggestion","indexOfMatch","indexOf","suggestionBeforeMatch","substring","suggestionMatch","suggestionAfterMatch","index","className","output","item","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport scrollView from 'dom-scroll-into-view';\nimport classnames from 'classnames';\nimport type { MouseEventHandler, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SuggestionsListProps } from './types';\n\nconst handleMouseDown: MouseEventHandler = ( e ) => {\n\t// By preventing default here, we will not lose focus of <input> when clicking a suggestion.\n\te.preventDefault();\n};\n\nexport function SuggestionsList< T extends string | { value: string } >( {\n\tselectedIndex,\n\tscrollIntoView,\n\tmatch,\n\tonHover,\n\tonSelect,\n\tsuggestions = [],\n\tdisplayTransform,\n\tinstanceId,\n\t__experimentalRenderItem,\n}: SuggestionsListProps< T > ) {\n\tconst [ scrollingIntoView, setScrollingIntoView ] = useState( false );\n\n\tconst listRef = useRefEffect< HTMLUListElement >(\n\t\t( listNode ) => {\n\t\t\t// only have to worry about scrolling selected suggestion into view\n\t\t\t// when already expanded.\n\t\t\tlet id: number;\n\t\t\tif (\n\t\t\t\tselectedIndex > -1 &&\n\t\t\t\tscrollIntoView &&\n\t\t\t\tlistNode.children[ selectedIndex ]\n\t\t\t) {\n\t\t\t\tsetScrollingIntoView( true );\n\t\t\t\tscrollView(\n\t\t\t\t\tlistNode.children[ selectedIndex ] as HTMLLIElement,\n\t\t\t\t\tlistNode,\n\t\t\t\t\t{\n\t\t\t\t\t\tonlyScrollIfNeeded: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tid = window.setTimeout( () => {\n\t\t\t\t\tsetScrollingIntoView( false );\n\t\t\t\t}, 100 );\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif ( id !== undefined ) {\n\t\t\t\t\twindow.clearTimeout( id );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ selectedIndex, scrollIntoView ]\n\t);\n\n\tconst handleHover = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tif ( ! scrollingIntoView ) {\n\t\t\t\tonHover?.( suggestion );\n\t\t\t}\n\t\t};\n\t};\n\n\tconst handleClick = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tonSelect?.( suggestion );\n\t\t};\n\t};\n\n\tconst computeSuggestionMatch = ( suggestion: T ) => {\n\t\tconst matchText = displayTransform( match ).toLocaleLowerCase();\n\t\tif ( matchText.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst transformedSuggestion = displayTransform( suggestion );\n\t\tconst indexOfMatch = transformedSuggestion\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf( matchText );\n\n\t\treturn {\n\t\t\tsuggestionBeforeMatch: transformedSuggestion.substring(\n\t\t\t\t0,\n\t\t\t\tindexOfMatch\n\t\t\t),\n\t\t\tsuggestionMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch,\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t\tsuggestionAfterMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t};\n\t};\n\n\treturn (\n\t\t<ul\n\t\t\tref={ listRef }\n\t\t\tclassName=\"components-form-token-field__suggestions-list\"\n\t\t\tid={ `components-form-token-suggestions-${ instanceId }` }\n\t\t\trole=\"listbox\"\n\t\t>\n\t\t\t{ map( suggestions, ( suggestion, index ) => {\n\t\t\t\tconst matchText = computeSuggestionMatch( suggestion );\n\t\t\t\tconst className = classnames(\n\t\t\t\t\t'components-form-token-field__suggestion',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tlet output: ReactNode;\n\n\t\t\t\tif ( typeof __experimentalRenderItem === 'function' ) {\n\t\t\t\t\toutput = __experimentalRenderItem( { item: suggestion } );\n\t\t\t\t} else if ( matchText ) {\n\t\t\t\t\toutput = (\n\t\t\t\t\t\t<span aria-label={ displayTransform( suggestion ) }>\n\t\t\t\t\t\t\t{ matchText.suggestionBeforeMatch }\n\t\t\t\t\t\t\t<strong className=\"components-form-token-field__suggestion-match\">\n\t\t\t\t\t\t\t\t{ matchText.suggestionMatch }\n\t\t\t\t\t\t\t</strong>\n\t\t\t\t\t\t\t{ matchText.suggestionAfterMatch }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\toutput = displayTransform( suggestion );\n\t\t\t\t}\n\n\t\t\t\t/* eslint-disable jsx-a11y/click-events-have-key-events */\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tid={ `components-form-token-suggestions-${ instanceId }-${ index }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\ttypeof suggestion === 'object' &&\n\t\t\t\t\t\t\t'value' in suggestion\n\t\t\t\t\t\t\t\t? suggestion?.value\n\t\t\t\t\t\t\t\t: displayTransform( suggestion )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseDown={ handleMouseDown }\n\t\t\t\t\t\tonClick={ handleClick( suggestion ) }\n\t\t\t\t\t\tonMouseEnter={ handleHover( suggestion ) }\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ output }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t\t/* eslint-enable jsx-a11y/click-events-have-key-events */\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n\nexport default SuggestionsList;\n"]}

package/build-module/gradient-picker/index.js

@@ -19,6 +19,7 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
+import { Spacer } from '../spacer';
 
 function SingleOrigin(_ref) {
   let {
@@ -95,6 +96,8 @@ function MultipleOrigin(_ref3) {
 
 export default function GradientPicker(_ref5) {
   let {
+    /** Start opting into the new margin-free styles that will become the default in a future version. */
+    __nextHasNoMargin = false,
     className,
     gradients,
     onChange,
@@ -105,7 +108,11 @@ export default function GradientPicker(_ref5) {
     __experimentalIsRenderedInSidebar
   } = _ref5;
   const clearGradient = useCallback(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin;
+  const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin; // Can be removed when deprecation period is over
+
+  const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
+    marginTop: 3
+  } : {};
   return createElement(Component, {
     className: className,
     clearable: clearable,
@@ -116,11 +123,15 @@ export default function GradientPicker(_ref5) {
     actions: clearable && ((gradients === null || gradients === void 0 ? void 0 : gradients.length) || !disableCustomGradients) && createElement(CircularOptionPicker.ButtonAction, {
       onClick: clearGradient
     }, __('Clear')),
-    content: !disableCustomGradients && createElement(CustomGradientPicker, {
+    content: !disableCustomGradients && createElement(Spacer, _extends({
+      marginTop: gradients !== null && gradients !== void 0 && gradients.length ? 3 : 0,
+      marginBottom: 0
+    }, deprecatedMarginSpacerProps), createElement(CustomGradientPicker, {
+      __nextHasNoMargin: __nextHasNoMargin,
       __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
       value: value,
       onChange: onChange
-    })
+    }))
   });
 }
 //# sourceMappingURL=index.js.map

package/build-module/gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["map","__","sprintf","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","index","gradientSet","length","GradientPicker","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && gradients?.length\n\t\t\t? MultipleOrigin\n\t\t\t: SingleOrigin;\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable &&\n\t\t\t\t( gradients?.length || ! disableCustomGradients ) && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["map","__","sprintf","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","Spacer","SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","index","gradientSet","length","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","deprecatedMarginSpacerProps","marginTop"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && gradients?.length\n\t\t\t? MultipleOrigin\n\t\t\t: SingleOrigin;\n\n\t// Can be removed when deprecation period is over\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? { marginTop: 3 }\n\t\t: {};\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable &&\n\t\t\t\t( gradients?.length || ! disableCustomGradients ) && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tmarginTop={ gradients?.length ? 3 : 0 }\n\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t{ ...deprecatedMarginSpacerProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t__nextHasNoMargin={ __nextHasNoMargin }\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}

package/build-module/guide/index.js

@@ -40,11 +40,13 @@ export default function Guide(_ref) {
     }
   }, [children]);
   useEffect(() => {
-    var _focus$tabbable$find, _focus$tabbable$find$;
-
     // Each time we change the current page, start from the first element of the page.
     // This also solves any focus loss that can happen.
-    (_focus$tabbable$find = focus.tabbable.find(guideContainer.current)) === null || _focus$tabbable$find === void 0 ? void 0 : (_focus$tabbable$find$ = _focus$tabbable$find[0]) === null || _focus$tabbable$find$ === void 0 ? void 0 : _focus$tabbable$find$.focus();
+    if (guideContainer.current) {
+      var _focus$tabbable$find, _focus$tabbable$find$;
+
+      (_focus$tabbable$find = focus.tabbable.find(guideContainer.current)) === null || _focus$tabbable$find === void 0 ? void 0 : (_focus$tabbable$find$ = _focus$tabbable$find[0]) === null || _focus$tabbable$find$ === void 0 ? void 0 : _focus$tabbable$find$.focus();
+    }
   }, [currentPage]);
 
   if (Children.count(children)) {

package/build-module/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","LEFT","RIGHT","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","tabbable","find","current","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","image"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,QAA9B,EAAwCC,MAAxC,QAAsD,oBAAtD;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,qBAA5B;AACA,SAASC,KAAT,QAAsB,gBAAtB;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AAEA,eAAe,SAASC,KAAT,OAOX;AAAA,MAP2B;AAC9BC,IAAAA,QAD8B;AAE9BC,IAAAA,SAF8B;AAG9BC,IAAAA,YAH8B;AAI9BC,IAAAA,gBAJ8B;AAK9BC,IAAAA,QAL8B;AAM9BC,IAAAA,KAAK,GAAG;AANsB,GAO3B;AACH,QAAMC,cAAc,GAAGhB,MAAM,EAA7B;AACA,QAAM,CAAEiB,WAAF,EAAeC,cAAf,IAAkCrB,QAAQ,CAAE,CAAF,CAAhD;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKC,QAAQ,CAACoB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AACjCT,MAAAA,UAAU,CAAE,6BAAF,EAAiC;AAC1CmB,QAAAA,KAAK,EAAE,KADmC;AAE1CC,QAAAA,WAAW,EAAE;AAF6B,OAAjC,CAAV;AAIA;AACD,GAPQ,EAON,CAAEX,QAAF,CAPM,CAAT;AASAZ,EAAAA,SAAS,CAAE,MAAM;AAAA;;AAChB;AACA;AACA,4BAAAO,KAAK,CAACiB,QAAN,CAAeC,IAAf,CAAqBP,cAAc,CAACQ,OAApC,wGAAiD,CAAjD,iFAAsDnB,KAAtD;AACA,GAJQ,EAIN,CAAEY,WAAF,CAJM,CAAT;;AAMA,MAAKlB,QAAQ,CAACoB,KAAT,CAAgBT,QAAhB,CAAL,EAAkC;AACjCK,IAAAA,KAAK,GAAGhB,QAAQ,CAAC0B,GAAT,CAAcf,QAAd,EAA0BgB,KAAF,KAAe;AAAEC,MAAAA,OAAO,EAAED;AAAX,KAAf,CAAxB,CAAR;AACA;;AAED,QAAME,SAAS,GAAGX,WAAW,GAAG,CAAhC;AACA,QAAMY,YAAY,GAAGZ,WAAW,GAAGF,KAAK,CAACe,MAAN,GAAe,CAAlD;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpB,QAAKH,SAAL,EAAiB;AAChBV,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,QAAMe,SAAS,GAAG,MAAM;AACvB,QAAKH,YAAL,EAAoB;AACnBX,MAAAA,cAAc,CAAED,WAAW,GAAG,CAAhB,CAAd;AACA;AACD,GAJD;;AAMA,MAAKF,KAAK,CAACe,MAAN,KAAiB,CAAtB,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAGlC,UAAU,CAAE,kBAAF,EAAsBe,SAAtB,CADvB;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,cAAc,EAAGE,QAHlB;AAIC,IAAA,SAAS,EAAKmB,KAAF,IAAa;AACxB,UAAKA,KAAK,CAACC,OAAN,KAAkB/B,IAAvB,EAA8B;AAC7B4B,QAAAA,MAAM;AACN,OAFD,MAEO,IAAKE,KAAK,CAACC,OAAN,KAAkB9B,KAAvB,EAA+B;AACrC4B,QAAAA,SAAS;AACT;AACD,KAVF;AAWC,IAAA,GAAG,EAAGhB;AAXP,KAaC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,KAAK,CAAEE,WAAF,CAAL,CAAqBkB,KADxB,EAGGpB,KAAK,CAACe,MAAN,GAAe,CAAf,IACD,cAAC,WAAD;AACC,IAAA,WAAW,EAAGb,WADf;AAEC,IAAA,aAAa,EAAGF,KAAK,CAACe,MAFvB;AAGC,IAAA,cAAc,EAAGZ;AAHlB,IAJF,EAWGH,KAAK,CAAEE,WAAF,CAAL,CAAqBU,OAXxB,CADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGC,SAAS,IACV,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,+BADX;AAEC,IAAA,OAAO,EAAGG;AAFX,KAIG7B,EAAE,CAAE,UAAF,CAJL,CAFF,EASG2B,YAAY,IACb,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,kCADX;AAEC,IAAA,OAAO,EAAGG;AAFX,KAIG9B,EAAE,CAAE,MAAF,CAJL,CAVF,EAiBG,CAAE2B,YAAF,IACD,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,OAAO,EAAGf;AAFX,KAIGD,gBAAgB,IAAIX,EAAE,CAAE,QAAF,CAJzB,CAlBF,CAfD,CAbD,CADD;AA0DA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst guideContainer = useRef();\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tfocus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","LEFT","RIGHT","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","current","tabbable","find","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst guideContainer = useRef();\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tif ( guideContainer.current ) {\n\t\t\tfocus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();\n\t\t}\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}