@wordpress/components 28.2.0 → 28.4.0

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","jsx","_jsx","jsxs","_jsxs","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","children","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","jsx","_jsx","jsxs","_jsxs","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","children","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       __nextHasNoMarginBottom\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/color-picker/component.js

@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect, ContextSystemProvider } from '../context';
+import { useContextSystem, contextConnect } from '../context';
 import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';
 import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
@@ -34,13 +34,6 @@ const options = [{
   label: 'Hex',
   value: 'hex'
 }];
-
-// `isBorderless` is still experimental and not a public prop for InputControl yet.
-const BORDERLESS_SELECT_CONTROL_CONTEXT = {
-  InputBase: {
-    isBorderless: true
-  }
-};
 const UnconnectedColorPicker = (props, forwardedRef) => {
   const {
     enableAlpha = false,
@@ -75,16 +68,14 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {
       children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {
         justify: "space-between",
-        children: [/*#__PURE__*/_jsx(ContextSystemProvider, {
-          value: BORDERLESS_SELECT_CONTROL_CONTEXT,
-          children: /*#__PURE__*/_jsx(SelectControl, {
-            __nextHasNoMarginBottom: true,
-            options: options,
-            value: colorType,
-            onChange: nextColorType => setColorType(nextColorType),
-            label: __('Color format'),
-            hideLabelFromVision: true
-          })
+        children: [/*#__PURE__*/_jsx(SelectControl, {
+          __nextHasNoMarginBottom: true,
+          options: options,
+          value: colorType,
+          onChange: nextColorType => setColorType(nextColorType),
+          label: __('Color format'),
+          hideLabelFromVision: true,
+          variant: "minimal"
         }), /*#__PURE__*/_jsx(ColorCopyButton, {
           color: safeColordColor,
           colorType: copyFormat || colorType

package/build-module/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ContextSystemProvider","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","jsx","_jsx","jsxs","_jsxs","options","label","value","BORDERLESS_SELECT_CONTROL_CONTEXT","InputBase","isBorderless","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","ref","children","justify","__nextHasNoMarginBottom","nextColorType","hideLabelFromVision","direction","gap","ColorPicker"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tContextSystemProvider,\n} from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\n// `isBorderless` is still experimental and not a public prop for InputControl yet.\nconst BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<ContextSystemProvider\n\t\t\t\t\t\tvalue={ BORDERLESS_SELECT_CONTROL_CONTEXT }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ContextSystemProvider>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","jsx","_jsx","jsxs","_jsxs","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","ref","children","justify","__nextHasNoMarginBottom","nextColorType","hideLabelFromVision","variant","direction","gap","ColorPicker"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}

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

@@ -69,6 +69,7 @@ const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) =
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }
@@ -219,6 +220,13 @@ function ComboboxControl(props) {
     inputContainer.current?.focus();
   };
 
+  // Stop propagation of the keydown event when pressing Enter on the Reset
+  // button to prevent calling the onKeydown callback on the container div
+  // element which actually sets the selected suggestion.
+  const handleResetStopPropagation = event => {
+    event.stopPropagation();
+  };
+
   // Update current selections when the filter input changes.
   useEffect(() => {
     const hasMatchingSuggestions = matchingSuggestions.length > 0;
@@ -274,9 +282,13 @@ function ComboboxControl(props) {
           }), allowReset && /*#__PURE__*/_jsx(FlexItem, {
             children: /*#__PURE__*/_jsx(Button, {
               className: "components-combobox-control__reset",
-              icon: closeSmall,
+              icon: closeSmall
+              // Disable reason: Focus returns to input field when reset is clicked.
+              // eslint-disable-next-line no-restricted-syntax
+              ,
               disabled: !value,
               onClick: handleOnReset,
+              onKeyDown: handleResetStopPropagation,
               label: __('Reset')
             })
           })]

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\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/composite/current/index.js

@@ -8,8 +8,5 @@
  * @see https://ariakit.org/components/composite
  */
 
-/* eslint-disable-next-line no-restricted-imports */
 export { Composite, CompositeGroup, CompositeGroupLabel, CompositeItem, CompositeRow, useCompositeStore } from '@ariakit/react';
-
-/* eslint-disable-next-line no-restricted-imports */
 //# sourceMappingURL=index.js.map

package/build-module/composite/current/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Composite","CompositeGroup","CompositeGroupLabel","CompositeItem","CompositeRow","useCompositeStore"],"sources":["@wordpress/components/src/composite/current/index.ts"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\n/* eslint-disable-next-line no-restricted-imports */\nexport {\n\tComposite,\n\tCompositeGroup,\n\tCompositeGroupLabel,\n\tCompositeItem,\n\tCompositeRow,\n\tuseCompositeStore,\n} from '@ariakit/react';\n\n/* eslint-disable-next-line no-restricted-imports */\nexport type { CompositeStore, CompositeStoreProps } from '@ariakit/react';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SACCA,SAAS,EACTC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,YAAY,EACZC,iBAAiB,QACX,gBAAgB;;AAEvB","ignoreList":[]}
+{"version":3,"names":["Composite","CompositeGroup","CompositeGroupLabel","CompositeItem","CompositeRow","useCompositeStore"],"sources":["@wordpress/components/src/composite/current/index.ts"],"sourcesContent":["/**\n * Composite is a component that may contain navigable items represented by\n * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements\n * all the keyboard navigation mechanisms to ensure that there's only one\n * tab stop for the whole Composite element. This means that it can behave as\n * a roving tabindex or aria-activedescendant container.\n *\n * @see https://ariakit.org/components/composite\n */\n\nexport {\n\tComposite,\n\tCompositeGroup,\n\tCompositeGroupLabel,\n\tCompositeItem,\n\tCompositeRow,\n\tuseCompositeStore,\n} from '@ariakit/react';\n\nexport type { CompositeStore, CompositeStoreProps } from '@ariakit/react';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACCA,SAAS,EACTC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,YAAY,EACZC,iBAAiB,QACX,gBAAgB","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