@wordpress/components 28.4.0 → 28.5.0

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","default","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\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/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}

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

@@ -7,9 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
 var _customSelect = _interopRequireDefault(require("../custom-select-control-v2/custom-select"));
 var _item = _interopRequireDefault(require("../custom-select-control-v2/item"));
 var Styled = _interopRequireWildcard(require("../custom-select-control-v2/styles"));
+var _visuallyHidden = require("../visually-hidden");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && {}.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; }
@@ -17,6 +20,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -43,6 +50,14 @@ function applyOptionDeprecations({
     ...rest
   };
 }
+function getDescribedBy(currentValue, describedBy) {
+  if (describedBy) {
+    return describedBy;
+  }
+
+  // translators: %s: The selected option.
+  return (0, _i18n.sprintf)((0, _i18n.__)('Currently selected: %s'), currentValue);
+}
 function CustomSelectControl(props) {
   const {
     __next40pxDefaultSize = false,
@@ -55,6 +70,7 @@ function CustomSelectControl(props) {
     showSelectedHint = false,
     ...restProps
   } = useDeprecatedProps(props);
+  const descriptionId = (0, _compose.useInstanceId)(CustomSelectControl, 'custom-select-control__description');
 
   // Forward props + store from v2 implementation
   const store = Ariakit.useSelectStore({
@@ -112,10 +128,10 @@ function CustomSelectControl(props) {
       })
     }, key);
   });
+  const {
+    value: currentValue
+  } = store.getState();
   const renderSelectedValueHint = () => {
-    const {
-      value: currentValue
-    } = store.getState();
     const selectedOptionHint = options?.map(applyOptionDeprecations)?.find(({
       name
     }) => currentValue === name)?.hint;
@@ -136,17 +152,24 @@ function CustomSelectControl(props) {
     }
     return size;
   })();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
-    "aria-describedby": describedBy,
-    renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
-    size: translatedSize,
-    store: store,
-    className: (0, _clsx.default)(
-    // Keeping the classname for legacy reasons
-    'components-custom-select-control', classNameProp),
-    isLegacy: true,
-    ...restProps,
-    children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
+      "aria-describedby": descriptionId,
+      renderSelectedValue: showSelectedHint ? renderSelectedValueHint : undefined,
+      size: translatedSize,
+      store: store,
+      className: (0, _clsx.default)(
+      // Keeping the classname for legacy reasons
+      'components-custom-select-control', classNameProp),
+      isLegacy: true,
+      ...restProps,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        id: descriptionId,
+        children: getDescribedBy(currentValue, describedBy)
+      })
+    })]
   });
 }
 var _default = exports.default = CustomSelectControl;

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_customSelect","_item","Styled","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","CustomSelectControl","props","__next40pxDefaultSize","describedBy","options","onChange","size","value","className","classNameProp","restProps","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","jsxs","WithHintItemWrapper","jsx","WithHintItemHint","clsx","renderSelectedValueHint","currentValue","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","renderSelectedValue","undefined","isLegacy","_default","exports"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps } from './types';\n\nfunction useDeprecatedProps( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectProps[ 'options' ][ number ] ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction CustomSelectControl( props: CustomSelectProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange || ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<_CustomSelect\n\t\t\taria-describedby={ describedBy }\n\t\t\trenderSelectedValue={\n\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t}\n\t\t\tsize={ translatedSize }\n\t\t\tstore={ store }\n\t\t\tclassName={ clsx(\n\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassNameProp\n\t\t\t) }\n\t\t\tisLegacy\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ children }\n\t\t</_CustomSelect>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_i18n","_customSelect","_item","Styled","_visuallyHidden","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","getDescribedBy","currentValue","describedBy","sprintf","__","CustomSelectControl","props","__next40pxDefaultSize","options","onChange","size","value","className","classNameProp","restProps","descriptionId","useInstanceId","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","jsxs","WithHintItemWrapper","jsx","WithHintItemHint","clsx","renderSelectedValueHint","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","Fragment","renderSelectedValue","undefined","isLegacy","VisuallyHidden","id","_default","exports"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport * as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps, CustomSelectOption } from './types';\nimport { VisuallyHidden } from '../visually-hidden';\n\nfunction useDeprecatedProps< T extends CustomSelectOption >( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps< T > ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectOption ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction getDescribedBy( currentValue: string, describedBy?: string ) {\n\tif ( describedBy ) {\n\t\treturn describedBy;\n\t}\n\n\t// translators: %s: The selected option.\n\treturn sprintf( __( 'Currently selected: %s' ), currentValue );\n}\n\nfunction CustomSelectControl< T extends CustomSelectOption >(\n\tprops: CustomSelectProps< T >\n) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\tconst descriptionId = useInstanceId(\n\t\tCustomSelectControl,\n\t\t'custom-select-control__description'\n\t);\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore< string >( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange || ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\tconst { value: currentValue } = store.getState();\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<>\n\t\t\t<_CustomSelect\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\trenderSelectedValue={\n\t\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t\t}\n\t\t\t\tsize={ translatedSize }\n\t\t\t\tstore={ store }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t'components-custom-select-control',\n\t\t\t\t\tclassNameProp\n\t\t\t\t) }\n\t\t\t\tisLegacy\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_CustomSelect>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<span id={ descriptionId }>\n\t\t\t\t\t{ getDescribedBy( currentValue, describedBy ) }\n\t\t\t\t</span>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}

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

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