@wordpress/components 28.3.0 → 28.4.0

package/build-module/combobox-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","normalizeTextString","useDeprecated36pxDefaultSizeProp","withIgnoreIMEEvents","jsx","_jsx","jsxs","_jsxs","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","expandOnFocus","setValue","currentOption","find","option","currentLabel","instanceId","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","startsWithMatch","containsMatch","match","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","disabled","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","code","onBlur","onFocus","onClick","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","id","tabIndex","ref","selectedSuggestionIndex","icon","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nconst noop = () => {};\n\ninterface DetectOutsideComponentProps {\n\tonFocusOutside: ( event: React.FocusEvent ) => void;\n\tchildren?: React.ReactNode;\n}\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component< DetectOutsideComponentProps > {\n\t\thandleFocusOutside( event: React.FocusEvent ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t\texpandOnFocus = true,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tif ( newSelectedSuggestion.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\twithIgnoreIMEEvents( ( event ) => {\n\t\t\tlet preventDefault = false;\n\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch ( event.code ) {\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Escape':\n\t\t\t\t\tsetIsExpanded( false );\n\t\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif ( preventDefault ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t} );\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tif ( expandOnFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onClick = () => {\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\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\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\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<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx( className, 'components-combobox-control' ) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t// Disable reason: Focus returns to input field when reset is clicked.\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","normalizeTextString","useDeprecated36pxDefaultSizeProp","withIgnoreIMEEvents","jsx","_jsx","jsxs","_jsxs","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","getIndexOfMatchingSuggestion","selectedSuggestion","matchingSuggestions","indexOf","ComboboxControl","_currentOption$label","__nextHasNoMarginBottom","__next40pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","expandOnFocus","setValue","currentOption","find","option","currentLabel","instanceId","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","startsWithMatch","containsMatch","match","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","disabled","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","code","onBlur","onFocus","onClick","onInputChange","text","handleOnReset","current","focus","handleResetStopPropagation","stopPropagation","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","id","tabIndex","ref","selectedSuggestionIndex","icon","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport type { ComboboxControlOption, ComboboxControlProps } from './types';\nimport type { TokenInputProps } from '../form-token-field/types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nconst noop = () => {};\n\ninterface DetectOutsideComponentProps {\n\tonFocusOutside: ( event: React.FocusEvent ) => void;\n\tchildren?: React.ReactNode;\n}\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component< DetectOutsideComponentProps > {\n\t\thandleFocusOutside( event: React.FocusEvent ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nconst getIndexOfMatchingSuggestion = (\n\tselectedSuggestion: ComboboxControlOption | null,\n\tmatchingSuggestions: ComboboxControlOption[]\n) =>\n\tselectedSuggestion === null\n\t\t? -1\n\t\t: matchingSuggestions.indexOf( selectedSuggestion );\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\t__nextHasNoMarginBottom\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl( props: ComboboxControlProps ) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tvalue: valueProp,\n\t\tlabel,\n\t\toptions,\n\t\tonChange: onChangeProp,\n\t\tonFilterValueChange = noop,\n\t\thideLabelFromVision,\n\t\thelp,\n\t\tallowReset = true,\n\t\tclassName,\n\t\tmessages = {\n\t\t\tselected: __( 'Item selected.' ),\n\t\t},\n\t\t__experimentalRenderItem,\n\t\texpandOnFocus = true,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef< HTMLInputElement >( null );\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch: ComboboxControlOption[] = [];\n\t\tconst containsMatch: ComboboxControlOption[] = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options ] );\n\n\tconst onSuggestionSelected = (\n\t\tnewSelectedSuggestion: ComboboxControlOption\n\t) => {\n\t\tif ( newSelectedSuggestion.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = getIndexOfMatchingSuggestion(\n\t\t\tselectedSuggestion,\n\t\t\tmatchingSuggestions\n\t\t);\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\twithIgnoreIMEEvents( ( event ) => {\n\t\t\tlet preventDefault = false;\n\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch ( event.code ) {\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Escape':\n\t\t\t\t\tsetIsExpanded( false );\n\t\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif ( preventDefault ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t} );\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tif ( expandOnFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onClick = () => {\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current?.focus();\n\t};\n\n\t// Stop propagation of the keydown event when pressing Enter on the Reset\n\t// button to prevent calling the onKeydown callback on the container div\n\t// element which actually sets the selected suggestion.\n\tconst handleResetStopPropagation: React.KeyboardEventHandler<\n\t\tHTMLButtonElement\n\t> = ( event ) => {\n\t\tevent.stopPropagation();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tgetIndexOfMatchingSuggestion(\n\t\t\t\tselectedSuggestion,\n\t\t\t\tmatchingSuggestions\n\t\t\t) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\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\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\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<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ clsx( className, 'components-combobox-control' ) }\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t// Disable reason: Focus returns to input field when reset is clicked.\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tonKeyDown={ handleResetStopPropagation }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t// The empty string for `value` here is not actually used, but is\n\t\t\t\t\t\t\t// just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n\t\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n\t\t\t\t\t\t\tmatch={ { label: inputValue, value: '' } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ getIndexOfMatchingSuggestion(\n\t\t\t\t\t\t\t\tselectedSuggestion,\n\t\t\t\t\t\t\t\tmatchingSuggestions\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-select-control/index.js

@@ -1,194 +1,144 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
-import { useSelect } from 'downshift';
+import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
 
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../visually-hidden';
-import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
-import SelectControlChevronDown from '../select-control/chevron-down';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import InputBase from '../input-control/input-base';
+import _CustomSelect from '../custom-select-control-v2/custom-select';
+import CustomSelectItem from '../custom-select-control-v2/item';
+import * as Styled from '../custom-select-control-v2/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const itemToString = item => item?.name;
-// This is needed so that in Windows, where
-// the menu does not necessarily open on
-// key up/down, you can still switch between
-// options with the menu closed.
-const stateReducer = ({
-  selectedItem
-}, {
-  type,
-  changes,
-  props: {
-    items
-  }
-}) => {
-  switch (type) {
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
-      // If we already have a selected item, try to select the next one,
-      // without circular navigation. Otherwise, select the first item.
-      return {
-        selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
-      };
-    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-      // If we already have a selected item, try to select the previous one,
-      // without circular navigation. Otherwise, select the last item.
-      return {
-        selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
-      };
-    default:
-      return changes;
-  }
-};
-export default function CustomSelectControl(props) {
+function useDeprecatedProps({
+  __experimentalShowSelectedHint,
+  ...otherProps
+}) {
+  return {
+    showSelectedHint: __experimentalShowSelectedHint,
+    ...otherProps
+  };
+}
+
+// The removal of `__experimentalHint` in favour of `hint` doesn't happen in
+// the `useDeprecatedProps` hook in order not to break consumers that rely
+// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)
+function applyOptionDeprecations({
+  __experimentalHint,
+  ...rest
+}) {
+  return {
+    hint: __experimentalHint,
+    ...rest
+  };
+}
+function CustomSelectControl(props) {
   const {
-    /** Start opting into the larger default height that will become the default size in a future version. */
     __next40pxDefaultSize = false,
-    className,
-    hideLabelFromVision,
-    label,
     describedBy,
-    options: items,
-    onChange: onSelectedItemChange,
-    /** @type {import('../select-control/types').SelectControlProps.size} */
+    options,
+    onChange,
     size = 'default',
-    value: _selectedItem,
-    onMouseOver,
-    onMouseOut,
-    onFocus,
-    onBlur,
-    __experimentalShowSelectedHint = false
-  } = useDeprecated36pxDefaultSizeProp(props);
-  const {
-    getLabelProps,
-    getToggleButtonProps,
-    getMenuProps,
-    getItemProps,
-    isOpen,
-    highlightedIndex,
-    selectedItem
-  } = useSelect({
-    initialSelectedItem: items[0],
-    items,
-    itemToString,
-    onSelectedItemChange,
-    ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
-      selectedItem: _selectedItem
-    } : undefined),
-    stateReducer
-  });
-  function getDescribedBy() {
-    if (describedBy) {
-      return describedBy;
-    }
-    if (!selectedItem) {
-      return __('No selection');
-    }
+    value,
+    className: classNameProp,
+    showSelectedHint = false,
+    ...restProps
+  } = useDeprecatedProps(props);
 
-    // translators: %s: The selected option.
-    return sprintf(__('Currently selected: %s'), selectedItem.name);
-  }
-  let menuProps = getMenuProps({
-    className: 'components-custom-select-control__menu',
-    'aria-hidden': !isOpen
-  });
-  const onKeyDownHandler = useCallback(e => {
-    e.stopPropagation();
-    menuProps?.onKeyDown?.(e);
-  }, [menuProps]);
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    async setValue(nextValue) {
+      const nextOption = options.find(item => item.name === nextValue);
+      if (!onChange || !nextOption) {
+        return;
+      }
 
-  // We need this here, because the null active descendant is not fully ARIA compliant.
-  if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
-    const {
-      'aria-activedescendant': ariaActivedescendant,
-      ...restMenuProps
-    } = menuProps;
-    menuProps = restMenuProps;
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    className: clsx('components-custom-select-control', className),
-    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {
-      as: "label",
-      ...getLabelProps(),
-      children: label
-    }) :
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-    _jsx(StyledLabel, {
-      ...getLabelProps({
-        className: 'components-custom-select-control__label'
-      }),
-      children: label
-    }), /*#__PURE__*/_jsxs(InputBase, {
-      __next40pxDefaultSize: __next40pxDefaultSize,
-      size: size,
-      suffix: /*#__PURE__*/_jsx(SelectControlChevronDown, {}),
-      children: [/*#__PURE__*/_jsxs(SelectControlSelect, {
-        onMouseOver: onMouseOver,
-        onMouseOut: onMouseOut,
-        as: "button",
-        onFocus: onFocus,
-        onBlur: onBlur,
-        selectSize: size,
-        __next40pxDefaultSize: __next40pxDefaultSize,
-        ...getToggleButtonProps({
-          // This is needed because some speech recognition software don't support `aria-labelledby`.
-          'aria-label': label,
-          'aria-labelledby': undefined,
-          className: 'components-custom-select-control__button',
-          describedBy: getDescribedBy()
-        }),
-        children: [itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && /*#__PURE__*/_jsx("span", {
-          className: "components-custom-select-control__hint",
-          children: selectedItem.__experimentalHint
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "components-custom-select-control__menu-wrapper",
-        children: /*#__PURE__*/_jsx("ul", {
-          ...menuProps,
-          onKeyDown: onKeyDownHandler,
-          children: isOpen && items.map((item, index) => /*#__PURE__*/_jsxs("li", {
-            ...getItemProps({
-              item,
-              index,
-              className: clsx(item.className, 'components-custom-select-control__item', {
-                'is-highlighted': index === highlightedIndex,
-                'has-hint': !!item.__experimentalHint,
-                'is-next-40px-default-size': __next40pxDefaultSize
-              }),
-              style: item.style
-            }),
-            children: [item.name, item.__experimentalHint && /*#__PURE__*/_jsx("span", {
-              className: "components-custom-select-control__item-hint",
-              children: item.__experimentalHint
-            }), item === selectedItem && /*#__PURE__*/_jsx(Icon, {
-              icon: check,
-              className: "components-custom-select-control__item-icon"
-            })]
-          }, item.key))
-        })
+      // Executes the logic in a microtask after the popup is closed.
+      // This is simply to ensure the isOpen state matches the one from the
+      // previous legacy implementation.
+      await Promise.resolve();
+      const state = store.getState();
+      const changeObject = {
+        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),
+        inputValue: '',
+        isOpen: state.open,
+        selectedItem: nextOption,
+        type: ''
+      };
+      onChange(changeObject);
+    },
+    value: value?.name,
+    // Setting the first option as a default value when no value is provided
+    // is already done natively by the underlying Ariakit component,
+    // but doing this explicitly avoids the `onChange` callback from firing
+    // on initial render, thus making this implementation closer to the v1.
+    defaultValue: options[0]?.name
+  });
+  const children = options.map(applyOptionDeprecations).map(({
+    name,
+    key,
+    hint,
+    style,
+    className
+  }) => {
+    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: name
+      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {
+        // Keeping the classname for legacy reasons
+        className: "components-custom-select-control__item-hint",
+        children: hint
       })]
-    })]
+    });
+    return /*#__PURE__*/_jsx(CustomSelectItem, {
+      value: name,
+      children: hint ? withHint : name,
+      style: style,
+      className: clsx(className,
+      // Keeping the classnames for legacy reasons
+      'components-custom-select-control__item', {
+        'has-hint': hint
+      })
+    }, key);
   });
-}
-export function StableCustomSelectControl(props) {
-  return /*#__PURE__*/_jsx(CustomSelectControl, {
-    ...props,
-    __experimentalShowSelectedHint: false
+  const renderSelectedValueHint = () => {
+    const {
+      value: currentValue
+    } = store.getState();
+    const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
+      name
+    }) => currentValue === name)?.hint;
+    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {
+      children: [currentValue, selectedOptionHint && /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {
+        // Keeping the classname for legacy reasons
+        className: "components-custom-select-control__hint",
+        children: selectedOptionHint
+      })]
+    });
+  };
+  const translatedSize = (() => {
+    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {
+      return 'default';
+    }
+    if (!__next40pxDefaultSize && size === 'default') {
+      return 'compact';
+    }
+    return size;
+  })();
+  return /*#__PURE__*/_jsx(_CustomSelect, {
+    "aria-describedby": describedBy,
+    renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
+    size: translatedSize,
+    store: store,
+    className: clsx(
+    // Keeping the classname for legacy reasons
+    'components-custom-select-control', classNameProp),
+    isLegacy: true,
+    ...restProps,
+    children: children
   });
 }
+export default CustomSelectControl;
 //# sourceMappingURL=index.js.map

package/build-module/custom-select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","clsx","Icon","check","__","sprintf","useCallback","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","StyledLabel","useDeprecated36pxDefaultSizeProp","InputBase","jsx","_jsx","jsxs","_jsxs","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","ariaActivedescendant","restMenuProps","children","as","suffix","selectSize","__experimentalHint","map","index","style","icon","key","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport InputBase from '../input-control/input-base';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\n\nexport default function CustomSelectControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tdescribedBy,\n\t\toptions: items,\n\t\tonChange: onSelectedItemChange,\n\t\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\t\tsize = 'default',\n\t\tvalue: _selectedItem,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\tonFocus,\n\t\tonBlur,\n\t\t__experimentalShowSelectedHint = false,\n\t} = useDeprecated36pxDefaultSizeProp( props );\n\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tlet menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tconst {\n\t\t\t'aria-activedescendant': ariaActivedescendant,\n\t\t\t...restMenuProps\n\t\t} = menuProps;\n\t\tmenuProps = restMenuProps;\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'components-custom-select-control', className ) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tonMouseOver={ onMouseOver }\n\t\t\t\t\tonMouseOut={ onMouseOut }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t\t{ __experimentalShowSelectedHint &&\n\t\t\t\t\t\tselectedItem.__experimentalHint && (\n\t\t\t\t\t\t\t<span className=\"components-custom-select-control__hint\">\n\t\t\t\t\t\t\t\t{ selectedItem.__experimentalHint }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t\t<div className=\"components-custom-select-control__menu-wrapper\">\n\t\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t\t\t{ isOpen &&\n\t\t\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tkey={ item.key }\n\t\t\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t\t\t'has-hint':\n\t\t\t\t\t\t\t\t\t\t\t\t\t!! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t\t\t'is-next-40px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize,\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport function StableCustomSelectControl( props ) {\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t{ ...props }\n\t\t\t__experimentalShowSelectedHint={ false }\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","clsx","_CustomSelect","CustomSelectItem","Styled","jsx","_jsx","jsxs","_jsxs","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","CustomSelectControl","props","__next40pxDefaultSize","describedBy","options","onChange","size","value","className","classNameProp","restProps","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","WithHintItemWrapper","WithHintItemHint","renderSelectedValueHint","currentValue","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","renderSelectedValue","undefined","isLegacy"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps } from './types';\n\nfunction useDeprecatedProps( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectProps[ 'options' ][ number ] ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction CustomSelectControl( props: CustomSelectProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange || ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<_CustomSelect\n\t\t\taria-describedby={ describedBy }\n\t\t\trenderSelectedValue={\n\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t}\n\t\t\tsize={ translatedSize }\n\t\t\tstore={ store }\n\t\t\tclassName={ clsx(\n\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassNameProp\n\t\t\t) }\n\t\t\tisLegacy\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ children }\n\t\t</_CustomSelect>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-select-control/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/custom-select-control/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\n/**\n * The object structure for the options array.\n */\ntype Option = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\thint?: string;\n\t/**\n\t * Use the `hint` property instead\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/**\n * The object returned from the onChange event.\n */\ntype ChangeObject = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: Option;\n};\n\nexport type CustomSelectProps = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Hide the label visually, while keeping available to assistive technology.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Description for the select trigger button used by assistive technology.\n\t * If no value is passed, the text \"Currently selected: selectedItem.name\"\n\t * will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: ChangeObject ) => void;\n\t/**\n\t * A handler for `blur` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `focus` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseout` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `mouseover` events on the trigger button.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The list of options that can be chosen from.\n\t */\n\toptions: Array< Option >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: Option;\n\t/**\n\t * Use the `showSelectedHint` property instead.\n\t * @deprecated\n\t * @ignore\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Show the hint of the selected item in the trigger button.\n\t *\n\t * @default false\n\t */\n\tshowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/custom-select-control-v2/custom-select.js

@@ -103,7 +103,10 @@ function _CustomSelect(props) {
           store: store,
           sameWidth: true,
           slide: false,
-          onKeyDown: onSelectPopoverKeyDown,
+          onKeyDown: onSelectPopoverKeyDown
+          // Match legacy behavior
+          ,
+          flip: !isLegacy,
           children: /*#__PURE__*/_jsx(CustomSelectContext.Provider, {
             value: contextValue,
             children: children

package/build-module/custom-select-control-v2/custom-select.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","createContext","useCallback","useMemo","__","sprintf","VisuallyHidden","Styled","InputBase","SelectControlChevronDown","BaseControl","jsx","_jsx","jsxs","_jsxs","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelectButton","renderSelectedValue","size","store","restProps","currentValue","useState","computedRenderSelectedValue","Select","hasCustomRenderProp","children","_CustomSelect","props","hideLabelFromVision","label","className","isLegacy","onSelectPopoverKeyDown","e","stopPropagation","contextValue","SelectLabel","render","VisualLabel","as","__next40pxDefaultSize","suffix","showOnKeyDown","SelectPopover","gutter","sameWidth","slide","onKeyDown","flip","Provider"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '..';\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectContext as CustomSelectContextType,\n\tCustomSelectStore,\n\tCustomSelectButtonProps,\n\tCustomSelectButtonSize,\n\t_CustomSelectInternalProps,\n\t_CustomSelectProps,\n} from './types';\nimport InputBase from '../input-control/input-base';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport BaseControl from '../base-control';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue(\n\tvalue: CustomSelectButtonProps[ 'value' ]\n) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nconst CustomSelectButton = ( {\n\trenderSelectedValue,\n\tsize = 'default',\n\tstore,\n\t...restProps\n}: Omit<\n\tReact.ComponentProps< typeof Ariakit.Select > &\n\t\tCustomSelectButtonProps &\n\t\tCustomSelectButtonSize &\n\t\tCustomSelectStore,\n\t'onChange'\n> ) => {\n\tconst { value: currentValue } = store.useState();\n\n\tconst computedRenderSelectedValue = useMemo(\n\t\t() => renderSelectedValue ?? defaultRenderSelectedValue,\n\t\t[ renderSelectedValue ]\n\t);\n\n\treturn (\n\t\t<Styled.Select\n\t\t\t{ ...restProps }\n\t\t\tsize={ size }\n\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ computedRenderSelectedValue( currentValue ) }\n\t\t</Styled.Select>\n\t);\n};\n\nfunction _CustomSelect(\n\tprops: _CustomSelectInternalProps &\n\t\t_CustomSelectProps &\n\t\tCustomSelectStore &\n\t\tCustomSelectButtonSize\n) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tsize,\n\t\tstore,\n\t\tclassName,\n\t\tisLegacy = false,\n\t\t...restProps\n\t} = props;\n\n\tconst onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\tif ( isLegacy ) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ isLegacy ]\n\t\t);\n\n\tconst contextValue = useMemo( () => ( { store, size } ), [ store, size ] );\n\n\treturn (\n\t\t// Where should `restProps` be forwarded to?\n\t\t<div className={ className }>\n\t\t\t<Ariakit.SelectLabel\n\t\t\t\tstore={ store }\n\t\t\t\trender={\n\t\t\t\t\thideLabelFromVision ? (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<VisuallyHidden />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t// @ts-expect-error `children` are passed via the render prop\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"div\" />\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</Ariakit.SelectLabel>\n\t\t\t<InputBase\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<CustomSelectButton\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tsize={ size }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\t// Match legacy behavior (move selection rather than open the popover)\n\t\t\t\t\tshowOnKeyDown={ ! isLegacy }\n\t\t\t\t/>\n\t\t\t\t<Styled.SelectPopover\n\t\t\t\t\tgutter={ 12 }\n\t\t\t\t\tstore={ store }\n\t\t\t\t\tsameWidth\n\t\t\t\t\tslide={ false }\n\t\t\t\t\tonKeyDown={ onSelectPopoverKeyDown }\n\t\t\t\t\t// Match legacy behavior\n\t\t\t\t\tflip={ ! isLegacy }\n\t\t\t\t>\n\t\t\t\t\t<CustomSelectContext.Provider value={ contextValue }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t\t</Styled.SelectPopover>\n\t\t\t</InputBase>\n\t\t</div>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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","ignoreList":[]}

package/build-module/custom-select-control-v2/index.js

@@ -1,5 +1,31 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-export { default } from './default-component';
+import _CustomSelect from './custom-select';
+import Item from './item';
+import { jsx as _jsx } from "react/jsx-runtime";
+function CustomSelectControlV2(props) {
+  const {
+    defaultValue,
+    onChange,
+    value,
+    ...restProps
+  } = props;
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    setValue: nextValue => onChange?.(nextValue),
+    defaultValue,
+    value
+  });
+  return /*#__PURE__*/_jsx(_CustomSelect, {
+    ...restProps,
+    store: store
+  });
+}
+CustomSelectControlV2.Item = Item;
+export default CustomSelectControlV2;
 //# sourceMappingURL=index.js.map

package/build-module/custom-select-control-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { default } from './default-component';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,qBAAqB","ignoreList":[]}
+{"version":3,"names":["Ariakit","_CustomSelect","Item","jsx","_jsx","CustomSelectControlV2","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from './custom-select';\nimport type { CustomSelectProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Item from './item';\n\nfunction CustomSelectControlV2(\n\tprops: WordPressComponentProps< CustomSelectProps, 'button', false >\n) {\n\tconst { defaultValue, onChange, value, ...restProps } = props;\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\treturn <_CustomSelect { ...restProps } store={ store } />;\n}\n\nCustomSelectControlV2.Item = Item;\n\nexport default CustomSelectControlV2;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,iBAAiB;AAG3C,OAAOC,IAAI,MAAM,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1B,SAASC,qBAAqBA,CAC7BC,KAAoE,EACnE;EACD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGX,OAAO,CAACY,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,oBAAOL,IAAA,CAACH,aAAa;IAAA,GAAMS,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAEAN,qBAAqB,CAACH,IAAI,GAAGA,IAAI;AAEjC,eAAeG,qBAAqB","ignoreList":[]}