npm - @wordpress/components - Versions diffs - 26.0.4 → 27.1.0 - Mend

@wordpress/components 26.0.4 → 27.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (382) hide show

package/build/combobox-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_a11y","_icons","_styles","_tokenInput","_suggestionsList","_baseControl","_button","_flex","_withFocusOutside","_hooks","_strings","_useDeprecatedProps","noop","DetectOutside","withFocusOutside","Component","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","useDeprecated36pxDefaultSizeProp","setValue","useControlledValue","currentOption","find","option","currentLabel","instanceId","useInstanceId","setSelectedSuggestion","useState","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","useRef","useMemo","startsWithMatch","containsMatch","match","normalizeTextString","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","speak","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","nativeEvent","isComposing","keyCode","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","useEffect","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","sprintf","_n","_react","createElement","default","classnames","id","tabIndex","InputWrapperFlex","FlexBlock","ref","selectedSuggestionIndex","FlexItem","icon","closeSmall","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView","_default","exports"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\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';\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},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\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} = 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\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\tevent\n\t) => {\n\t\tlet preventDefault = false;\n\n\t\tif (\n\t\t\tevent.defaultPrevented \|\|\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing \|\|\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\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\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\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={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\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\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\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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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_a11y","_icons","_styles","_tokenInput","_suggestionsList","_baseControl","_button","_flex","_withFocusOutside","_hooks","_strings","_useDeprecatedProps","_withIgnoreImeEvents","noop","DetectOutside","withFocusOutside","Component","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","useDeprecated36pxDefaultSizeProp","setValue","useControlledValue","currentOption","find","option","currentLabel","instanceId","useInstanceId","setSelectedSuggestion","useState","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","useRef","useMemo","startsWithMatch","containsMatch","match","normalizeTextString","forEach","index","push","concat","onSuggestionSelected","newSelectedSuggestion","speak","handleArrowNavigation","offset","nextIndex","length","onKeyDown","withIgnoreIMEEvents","preventDefault","defaultPrevented","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","useEffect","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","sprintf","_n","_react","createElement","default","classnames","id","tabIndex","InputWrapperFlex","FlexBlock","ref","selectedSuggestionIndex","FlexItem","icon","closeSmall","disabled","onClick","displayTransform","suggestion","suggestions","selectedIndex","onHover","onSelect","scrollIntoView","_default","exports"],"sources":["@wordpress/components/src/combobox-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\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},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\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} = 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\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\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\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={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\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\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\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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"}

package/build/confirm-dialog/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","__","confirmLabel","_react","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog","exports","contextConnect","_default"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Modal from '../modal';\nimport type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is not set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current \|\|\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\n/*\n `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n \n `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n \n UnControlled:\n \n Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * - It will be automatically open (displayed) upon mounting;\n * - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n \n Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n \n ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n \n \n * Controlled mode:\n * Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * - It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * - You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n \n ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n \n \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n \n \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n \n \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnconnectedConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","__","confirmLabel","_react","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","__next40pxDefaultSize","variant","onClick","ConfirmDialog","exports","contextConnect","_default"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Modal from '../modal';\nimport type { ConfirmDialogProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nconst UnconnectedConfirmDialog = (\n\tprops: WordPressComponentProps< ConfirmDialogProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is not set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current \|\|\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\n/*\n `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n \n `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n \n UnControlled:\n \n Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * - It will be automatically open (displayed) upon mounting;\n * - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n \n Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n \n ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n \n \n * Controlled mode:\n * Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * - It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * - You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n \n ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n \n \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n \n \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n \n \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(\n\tUnconnectedConfirmDialog,\n\t'ConfirmDialog'\n);\nexport default ConfirmDialog;\n"],"mappings":"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"}

package/build/custom-select-control/index.js CHANGED Viewed

@@ -12,13 +12,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
-var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _visuallyHidden = require("../visually-hidden");
 var _selectControlStyles = require("../select-control/styles/select-control-styles");
 var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
-var _styles = require("./styles");
 var _baseControlStyles = require("../base-control/styles/base-control-styles");
 var _useDeprecatedProps = require("../utils/use-deprecated-props");
+var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
 // @ts-nocheck
 /**
  * External dependencies
@@ -67,8 +66,6 @@ function CustomSelectControl(props) {
   const {
     /** Start opting into the larger default height that will become the default size in a future version. */
     __next40pxDefaultSize = false,
-    /** Start opting into the unconstrained width that will become the default in a future version. */
-    __nextUnconstrainedWidth = false,
     className,
     hideLabelFromVision,
     label,
@@ -111,13 +108,6 @@ function CustomSelectControl(props) {
     setIsFocused(false);
     onBlur?.(e);
   }
-  if (!__nextUnconstrainedWidth) {
-    (0, _deprecated.default)('Constrained width styles for wp.components.CustomSelectControl', {
-      since: '6.1',
-      version: '6.4',
-      hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
-    });
-  }
   function getDescribedBy() {
     if (describedBy) {
       return describedBy;
@@ -152,12 +142,9 @@ function CustomSelectControl(props) {
     ...getLabelProps({
       className: 'components-custom-select-control__label'
     })
-  }, label), (0, _react.createElement)(_styles.InputBaseWithBackCompatMinWidth, {
+  }, label), (0, _react.createElement)(_inputBase.default, {
     __next40pxDefaultSize: __next40pxDefaultSize,
-    __nextUnconstrainedWidth: __nextUnconstrainedWidth,
     isFocused: isOpen || isFocused,
-    __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
-    labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
     size: size,
     suffix: (0, _react.createElement)(_chevronDown.default, null)
   }, (0, _react.createElement)(_selectControlStyles.Select, {

package/build/custom-select-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_downshift","require","_classnames","_interopRequireDefault","_icons","_i18n","_element","_deprecated","_visuallyHidden","_selectControlStyles","_chevronDown","_styles","_baseControlStyles","_useDeprecatedProps","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next40pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","onMouseOver","onMouseOut","onFocus","onBlur","__experimentalShowSelectedHint","useDeprecated36pxDefaultSizeProp","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","useState","handleOnFocus","e","handleOnBlur","deprecated","since","version","hint","getDescribedBy","__","sprintf","menuProps","onKeyDownHandler","useCallback","stopPropagation","onKeyDown","startsWith","_react","createElement","classnames","VisuallyHidden","as","StyledLabel","InputBaseWithBackCompatMinWidth","__unstableInputWidth","labelPosition","suffix","default","Select","selectSize","__experimentalHint","map","index","key","style","Icon","icon","check","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\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 { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\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\t/* Start opting into the unconstrained width that will become the default in a future version. /\n\t\t__nextUnconstrainedWidth = 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\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\n\t}\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\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\tconst 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\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\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<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen \|\| isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\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={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\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</InputBaseWithBackCompatMinWidth>\n\t\t\t{ / eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\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__next40pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\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{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\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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"}
1	+ {"version":3,"names":["_downshift","require","_classnames","_interopRequireDefault","_icons","_i18n","_element","_visuallyHidden","_selectControlStyles","_chevronDown","_baseControlStyles","_useDeprecatedProps","_inputBase","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","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","useDeprecated36pxDefaultSizeProp","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","useState","handleOnFocus","e","handleOnBlur","getDescribedBy","__","sprintf","menuProps","onKeyDownHandler","useCallback","stopPropagation","onKeyDown","startsWith","_react","createElement","classnames","VisuallyHidden","as","StyledLabel","default","suffix","Select","selectSize","__experimentalHint","map","index","key","style","Icon","icon","check","StableCustomSelectControl"],"sources":["@wordpress/components/src/custom-select-control/index.js"],"sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } 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\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tfunction handleOnFocus( e ) {\n\t\tsetIsFocused( true );\n\t\tonFocus?.( e );\n\t}\n\n\tfunction handleOnBlur( e ) {\n\t\tsetIsFocused( false );\n\t\tonBlur?.( e );\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\tconst 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\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\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\tisFocused={ isOpen \|\| isFocused }\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={ handleOnFocus }\n\t\t\t\t\tonBlur={ handleOnBlur }\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</InputBase>\n\t\t\t{ / eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\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__next40pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\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{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\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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"}

package/build/custom-select-control-v2/custom-select-item.js ADDED Viewed

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSelectItem = CustomSelectItem;
+exports.default = void 0;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var Styled = _interopRequireWildcard(require("./styles"));
+var _customSelect = require("./custom-select");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * WordPress dependencies
+ */
+function CustomSelectItem({
+  children,
+  ...props
+}) {
+  const customSelectContext = (0, _element.useContext)(_customSelect.CustomSelectContext);
+  return (0, _react.createElement)(Styled.SelectItem, {
+    store: customSelectContext?.store,
+    ...props
+  }, children !== null && children !== void 0 ? children : props.value, (0, _react.createElement)(Styled.SelectedItemCheck, null, (0, _react.createElement)(_icons.Icon, {
+    icon: _icons.check
+  })));
+}
+var _default = exports.default = CustomSelectItem;
+//# sourceMappingURL=custom-select-item.js.map

package/build/custom-select-control-v2/custom-select-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_element","require","_icons","Styled","_interopRequireWildcard","_customSelect","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectItem","children","props","customSelectContext","useContext","CustomSelectContext","_react","createElement","SelectItem","store","value","SelectedItemCheck","Icon","icon","check","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select-item.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport type { CustomSelectItemProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport * as Styled from './styles';\nimport { CustomSelectContext } from './custom-select';\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.SelectItem store={ customSelectContext?.store } { ...props }>\n\t\t\t{ children ?? props.value }\n\t\t\t<Styled.SelectedItemCheck>\n\t\t\t\t<Icon icon={ check } />\n\t\t\t</Styled.SelectedItemCheck>\n\t\t</Styled.SelectItem>\n\t);\n}\n\nexport default CustomSelectItem;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAXtD;AACA;AACA;;AAWO,SAASY,gBAAgBA,CAAE;EACjCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,mBAAmB,GAAG,IAAAC,mBAAU,EAAEC,iCAAoB,CAAC;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACgC,UAAU;IAACC,KAAK,EAAGN,mBAAmB,EAAEM,KAAO;IAAA,GAAMP;EAAK,GAC/DD,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,KAAK,CAACQ,KAAK,EACzB,IAAAJ,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACmC,iBAAiB,QACxB,IAAAL,MAAA,CAAAC,aAAA,EAAChC,MAAA,CAAAqC,IAAI;IAACC,IAAI,EAAGC;EAAO,CAAE,CACG,CACR,CAAC;AAEtB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEce,gBAAgB"}

package/build/custom-select-control-v2/custom-select.js ADDED Viewed

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomSelectContext = void 0;
+var _react = require("react");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _ = require("..");
+var Styled = _interopRequireWildcard(require("./styles"));
+var _context = require("../context");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+const CustomSelectContext = exports.CustomSelectContext = (0, _element.createContext)(undefined);
+function defaultRenderSelectedValue(value) {
+  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
+  if (isValueEmpty) {
+    return (0, _i18n.__)('Select an item');
+  }
+  if (Array.isArray(value)) {
+    return value.length === 1 ? value[0] :
+    // translators: %s: number of items selected (it will always be 2 or more items)
+    (0, _i18n.sprintf)((0, _i18n.__)('%s items selected'), value.length);
+  }
+  return value;
+}
+const UnconnectedCustomSelectButton = props => {
+  const {
+    renderSelectedValue,
+    size = 'default',
+    store,
+    ...restProps
+  } = (0, _context.useContextSystem)(props, 'CustomSelectControlButton');
+  const {
+    value: currentValue
+  } = store.useState();
+  const computedRenderSelectedValue = (0, _element.useMemo)(() => renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue, [renderSelectedValue]);
+  return (0, _react.createElement)(Styled.Select, {
+    ...restProps,
+    size: size,
+    hasCustomRenderProp: !!renderSelectedValue,
+    store: store
+    // to match legacy behavior where using arrow keys
+    // move selection rather than open the popover
+    ,
+    showOnKeyDown: false
+  }, (0, _react.createElement)("div", null, computedRenderSelectedValue(currentValue)), (0, _react.createElement)(_icons.Icon, {
+    icon: _icons.chevronDown,
+    size: 18
+  }));
+};
+const CustomSelectButton = (0, _context.contextConnectWithoutRef)(UnconnectedCustomSelectButton, 'CustomSelectControlButton');
+function _CustomSelect(props) {
+  const {
+    children,
+    hideLabelFromVision = false,
+    label,
+    store,
+    ...restProps
+  } = props;
+  return (0, _react.createElement)(_react.Fragment, null, hideLabelFromVision ?
+  // TODO: Replace with BaseControl
+  (0, _react.createElement)(_.VisuallyHidden, {
+    as: "label"
+  }, label) : (0, _react.createElement)(Styled.SelectLabel, {
+    store: store
+  }, label), (0, _react.createElement)(CustomSelectButton, {
+    ...restProps,
+    store: store
+  }), (0, _react.createElement)(Styled.SelectPopover, {
+    gutter: 12,
+    store: store,
+    sameWidth: true
+  }, (0, _react.createElement)(CustomSelectContext.Provider, {
+    value: {
+      store
+    }
+  }, children)));
+}
+var _default = exports.default = _CustomSelect;
+//# sourceMappingURL=custom-select.js.map

package/build/custom-select-control-v2/custom-select.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_element","require","_i18n","_icons","_","Styled","_interopRequireWildcard","_context","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectContext","exports","createContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","__","sprintf","UnconnectedCustomSelectButton","props","renderSelectedValue","size","store","restProps","useContextSystem","currentValue","useState","computedRenderSelectedValue","useMemo","_react","createElement","Select","hasCustomRenderProp","showOnKeyDown","Icon","icon","chevronDown","CustomSelectButton","contextConnectWithoutRef","_CustomSelect","children","hideLabelFromVision","label","Fragment","VisuallyHidden","as","SelectLabel","SelectPopover","gutter","sameWidth","Provider","_default"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, chevronDown } from '@wordpress/icons';\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\t_CustomSelectProps,\n} from './types';\nimport {\n\tcontextConnectWithoutRef,\n\tuseContextSystem,\n\ttype WordPressComponentProps,\n} from '../context';\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 UnconnectedCustomSelectButton = (\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tCustomSelectButtonProps & CustomSelectStore,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t'onChange'\n\t>\n) => {\n\tconst {\n\t\trenderSelectedValue,\n\t\tsize = 'default',\n\t\tstore,\n\t\t...restProps\n\t} = useContextSystem( props, 'CustomSelectControlButton' );\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\t// to match legacy behavior where using arrow keys\n\t\t\t// move selection rather than open the popover\n\t\t\tshowOnKeyDown={ false }\n\t\t>\n\t\t\t<div>{ computedRenderSelectedValue( currentValue ) }</div>\n\t\t\t<Icon icon={ chevronDown } size={ 18 } />\n\t\t</Styled.Select>\n\t);\n};\n\nconst CustomSelectButton = contextConnectWithoutRef(\n\tUnconnectedCustomSelectButton,\n\t'CustomSelectControlButton'\n);\n\nfunction _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {\n\tconst {\n\t\tchildren,\n\t\thideLabelFromVision = false,\n\t\tlabel,\n\t\tstore,\n\t\t...restProps\n\t} = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ hideLabelFromVision ? ( // TODO: Replace with BaseControl\n\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t<Styled.SelectLabel store={ store }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Styled.SelectLabel>\n\t\t\t) }\n\t\t\t<CustomSelectButton { ...restProps } store={ store } />\n\t\t\t<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.SelectPopover>\n\t\t</>\n\t);\n}\n\nexport default _CustomSelect;\n"],"mappings":"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"}

package/build/custom-select-control-v2/default-component/index.js ADDED Viewed

@@ -0,0 +1,41 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
+var _customSelect = _interopRequireDefault(require("../custom-select"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+/**
+ * Internal dependencies
+ */
+function CustomSelect(props) {
+  const {
+    defaultValue,
+    onChange,
+    value,
+    ...restProps
+  } = props;
+  // Forward props + store from v2 implementation
+  const store = Ariakit.useSelectStore({
+    setValue: nextValue => onChange?.(nextValue),
+    defaultValue,
+    value
+  });
+  return (0, _react.createElement)(_customSelect.default, {
+    ...restProps,
+    store: store
+  });
+}
+var _default = exports.default = CustomSelect;
+//# sourceMappingURL=index.js.map

package/build/custom-select-control-v2/default-component/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_customSelect","_interopRequireDefault","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelect","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue","_react","createElement","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/default-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\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';\n\nfunction CustomSelect(\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\nexport default CustomSelect;\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA6C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAR7C;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAKA,SAASY,YAAYA,CACpBC,KAAoE,EACnE;EACD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGhC,OAAO,CAACiC,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAAClC,aAAA,CAAAQ,OAAa;IAAA,GAAMoB,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEce,YAAY"}

package/build/custom-select-control-v2/index.js CHANGED Viewed

@@ -1,90 +1,21 @@
 "use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CustomSelect = CustomSelect;
-exports.CustomSelectContext = void 0;
-exports.CustomSelectItem = CustomSelectItem;
-var _react = require("react");
-var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var Styled = _interopRequireWildcard(require("./styles"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-/**
- * WordPress dependencies
- */
-/**
- * Internal dependencies
- */
-const CustomSelectContext = exports.CustomSelectContext = (0, _element.createContext)(undefined);
-function defaultRenderSelectedValue(value) {
-  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
-  if (isValueEmpty) {
-    return (0, _i18n.__)('Select an item');
+Object.defineProperty(exports, "CustomSelect", {
+  enumerable: true,
+  get: function () {
+    return _defaultComponent.default;
   }
-  if (Array.isArray(value)) {
-    return value.length === 1 ? value[0] :
-    // translators: %s: number of items selected (it will always be 2 or more items)
-    (0, _i18n.sprintf)((0, _i18n.__)('%s items selected'), value.length);
+});
+Object.defineProperty(exports, "CustomSelectItem", {
+  enumerable: true,
+  get: function () {
+    return _customSelectItem.default;
   }
-  return value;
-}
-function CustomSelect({
-  children,
-  defaultValue,
-  label,
-  onChange,
-  size = 'default',
-  value,
-  renderSelectedValue,
-  ...props
-}) {
-  const store = Ariakit.useSelectStore({
-    setValue: nextValue => onChange?.(nextValue),
-    defaultValue,
-    value,
-    // fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
-    virtualFocus: false
-  });
-  const {
-    value: currentValue
-  } = store.useState();
-  const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(Styled.CustomSelectLabel, {
-    store: store
-  }, label), (0, _react.createElement)(Styled.CustomSelectButton, {
-    ...props,
-    size: size,
-    hasCustomRenderProp: !!renderSelectedValue,
-    store: store
-  }, computedRenderSelectedValue(currentValue), (0, _react.createElement)(Ariakit.SelectArrow, null)), (0, _react.createElement)(Styled.CustomSelectPopover, {
-    gutter: 12,
-    store: store,
-    sameWidth: true
-  }, (0, _react.createElement)(CustomSelectContext.Provider, {
-    value: {
-      store
-    }
-  }, children)));
-}
-function CustomSelectItem({
-  children,
-  ...props
-}) {
-  const customSelectContext = (0, _element.useContext)(CustomSelectContext);
-  return (0, _react.createElement)(Styled.CustomSelectItem, {
-    store: customSelectContext?.store,
-    ...props
-  }, children !== null && children !== void 0 ? children : props.value, (0, _react.createElement)(Ariakit.SelectItemCheck, null));
-}
+});
+var _defaultComponent = _interopRequireDefault(require("./default-component"));
+var _customSelectItem = _interopRequireDefault(require("./custom-select-item"));
 //# sourceMappingURL=index.js.map