@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","options","MultiplePalettes","headingLevel","length","spacing","colorPalette","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","ButtonAction","ref","renderContent","renderToggle","isOpen","onToggle","background","ColorPalette"],"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 classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\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 '../ui/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\tactions,\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\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\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\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading 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\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport 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...( 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\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...otherProps\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\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\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/>\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={ classnames(\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{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\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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"}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","classnames","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","createElement","Option","key","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"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 classnames from 'classnames';\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={ classnames(\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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"}

package/build-module/color-palette/index.native.js

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -22,7 +22,7 @@ let contentWidth = 0;
 let scrollPosition = 0;
 let customIndicatorWidth = 0;
 function ColorPalette({
-  enableCustomColor = true,
+  enableCustomColor = false,
   setColor,
   activeColor,
   isGradientColor,
@@ -37,23 +37,27 @@ function ColorPalette({
   customIndicatorWrapperStyles,
   label
 }) {
-  var _defaultSettings$colo, _defaultSettings$allC, _defaultSettings$grad;
+  var _defaultSettings$colo, _defaultSettings$grad, _defaultSettings$allC, _defaultSettings$allG;
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = useRef();
   const isIOS = Platform.OS === 'ios';
   const isGradientSegment = currentSegment === colorsUtils.segments[1];
   const scale = useRef(new Animated.Value(1)).current;
   const opacity = useRef(new Animated.Value(1)).current;
-  const defaultColors = [...new Set(((_defaultSettings$colo = defaultSettings.colors) !== null && _defaultSettings$colo !== void 0 ? _defaultSettings$colo : []).map(({
+  const mergedColors = [...new Set(((_defaultSettings$colo = defaultSettings.colors) !== null && _defaultSettings$colo !== void 0 ? _defaultSettings$colo : []).map(({
     color
   }) => color))];
-  const mergedColors = [...new Set(((_defaultSettings$allC = defaultSettings.allColors) !== null && _defaultSettings$allC !== void 0 ? _defaultSettings$allC : []).map(({
+  const mergedGradients = [...new Set(((_defaultSettings$grad = defaultSettings.gradients) !== null && _defaultSettings$grad !== void 0 ? _defaultSettings$grad : []).map(({
+    gradient
+  }) => gradient))];
+  const allAvailableColors = [...new Set(((_defaultSettings$allC = defaultSettings.allColors) !== null && _defaultSettings$allC !== void 0 ? _defaultSettings$allC : []).map(({
     color
   }) => color))];
-  const defaultGradientColors = [...new Set(((_defaultSettings$grad = defaultSettings.gradients) !== null && _defaultSettings$grad !== void 0 ? _defaultSettings$grad : []).map(({
+  const allAvailableGradients = [...new Set(((_defaultSettings$allG = defaultSettings.allGradients) !== null && _defaultSettings$allG !== void 0 ? _defaultSettings$allG : []).map(({
     gradient
   }) => gradient))];
-  const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+  const colors = isGradientSegment ? mergedGradients : mergedColors;
+  const allColors = isGradientSegment ? allAvailableGradients : allAvailableColors;
   const customIndicatorColor = isGradientSegment ? activeColor : customSwatchGradients;
   const isCustomGradientColor = isGradientColor && isSelectedCustom();
   const shouldShowCustomIndicator = enableCustomColor && shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
@@ -75,7 +79,7 @@ function ColorPalette({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSegment]);
   function isSelectedCustom() {
-    const isWithinColors = activeColor && mergedColors && mergedColors.includes(activeColor);
+    const isWithinColors = activeColor && allColors?.includes(activeColor);
     if (enableCustomColor && activeColor) {
       if (isGradientSegment) {
         return isGradientColor && !isWithinColors;

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

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","_defaultSettings$colo","_defaultSettings$allC","_defaultSettings$grad","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","Set","colors","map","color","mergedColors","allColors","defaultGradientColors","gradients","gradient","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","createElement","Fragment","accessibilityRole","style","headerText","contentContainerStyle","contentContainer","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","disableScrollViewPanResponder","scrollEventThrottle","onScrollBeginDrag","onScrollEndDrag","ref","testID","scaleValue","colorName","key","onPress","accessibilityState","selected","accessibilityLabel","transform","colorIndicator","onLayout","withCustomPicker","toUpperCase"],"sources":["@wordpress/components/src/color-palette/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst defaultGradientColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"],"mappings":"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"}
+{"version":3,"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","_defaultSettings$colo","_defaultSettings$grad","_defaultSettings$allC","_defaultSettings$allG","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","mergedColors","Set","colors","map","color","mergedGradients","gradients","gradient","allAvailableColors","allColors","allAvailableGradients","allGradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","createElement","Fragment","accessibilityRole","style","headerText","contentContainerStyle","contentContainer","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","disableScrollViewPanResponder","scrollEventThrottle","onScrollBeginDrag","onScrollEndDrag","ref","testID","scaleValue","colorName","key","onPress","accessibilityState","selected","accessibilityLabel","transform","colorIndicator","onLayout","withCustomPicker","toUpperCase"],"sources":["@wordpress/components/src/color-palette/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = false,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst allAvailableColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst allAvailableGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allGradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\n\tconst colors = isGradientSegment ? mergedGradients : mergedColors;\n\tconst allColors = isGradientSegment\n\t\t? allAvailableGradients\n\t\t: allAvailableColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && allColors?.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"],"mappings":"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"}

package/build-module/color-palette/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A label to identify the purpose of the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t\t */\n\t\t\t\t'aria-label'?: string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t\t */\n\t\t\t\t'aria-labelledby'?: string;\n\t\t\t\t'aria-label'?: never;\n\t\t  }\n\t);\n"],"mappings":""}

package/build-module/color-picker/color-copy-button.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -11,8 +11,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { CopyButton } from './styles';
-import { Text } from '../text';
-import { Tooltip } from '../ui/tooltip';
+import Tooltip from '../tooltip';
 export const ColorCopyButton = props => {
   const {
     color,
@@ -55,12 +54,11 @@ export const ColorCopyButton = props => {
     };
   }, []);
   return createElement(Tooltip, {
-    content: createElement(Text, {
-      color: "white"
-    }, copiedColor === color.toHex() ? __('Copied!') : __('Copy')),
-    placement: "bottom"
+    delay: 0,
+    hideOnClick: false,
+    text: copiedColor === color.toHex() ? __('Copied!') : __('Copy')
   }, createElement(CopyButton, {
-    isSmall: true,
+    size: "small",
     ref: copyRef,
     icon: copy,
     showTooltip: false

package/build-module/color-picker/color-copy-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCopyToClipboard","useState","useEffect","useRef","copy","__","CopyButton","Text","Tooltip","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimer","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","createElement","content","placement","isSmall","ref","icon","showTooltip"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport { Text } from '../text';\nimport { Tooltip } from '../ui/tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t\tplacement=\"bottom\"\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tisSmall\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AAChE,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,OAAO,QAAQ,eAAe;AAIvC,OAAO,MAAMC,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAGb,QAAQ,CAAmB,IAAK,CAAC;EACzE,MAAMc,SAAS,GAAGZ,MAAM,CAAgD,CAAC;EACzE,MAAMa,OAAO,GAAGhB,kBAAkB,CACjC,MAAM;IACL,QAASY,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACM,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAON,KAAK,CAACO,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOP,KAAK,CAACQ,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKJ,SAAS,CAACK,OAAO,EAAG;MACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;IAClC;IACAN,cAAc,CAAEH,KAAK,CAACQ,KAAK,CAAC,CAAE,CAAC;IAC/BJ,SAAS,CAACK,OAAO,GAAGE,UAAU,CAAE,MAAM;MACrCR,cAAc,CAAE,IAAK,CAAC;MACtBC,SAAS,CAACK,OAAO,GAAGG,SAAS;IAC9B,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACDrB,SAAS,CAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKa,SAAS,CAACK,OAAO,EAAG;QACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;MAClC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OACCI,aAAA,CAAChB,OAAO;IACPiB,OAAO,EACND,aAAA,CAACjB,IAAI;MAACI,KAAK,EAAC;IAAO,GAChBE,WAAW,KAAKF,KAAK,CAACQ,KAAK,CAAC,CAAC,GAC5Bd,EAAE,CAAE,SAAU,CAAC,GACfA,EAAE,CAAE,MAAO,CACT,CACN;IACDqB,SAAS,EAAC;EAAQ,GAElBF,aAAA,CAAClB,UAAU;IACVqB,OAAO;IACPC,GAAG,EAAGZ,OAAS;IACfa,IAAI,EAAGzB,IAAM;IACb0B,WAAW,EAAG;EAAO,CACrB,CACO,CAAC;AAEZ,CAAC"}
+{"version":3,"names":["useCopyToClipboard","useState","useEffect","useRef","copy","__","CopyButton","Tooltip","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimer","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","createElement","delay","hideOnClick","text","size","ref","icon","showTooltip"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tdelay={ 0 }\n\t\t\thideOnClick={ false }\n\t\t\ttext={\n\t\t\t\tcopiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )\n\t\t\t}\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tsize=\"small\"\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AAChE,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,UAAU;AACrC,OAAOC,OAAO,MAAM,YAAY;AAIhC,OAAO,MAAMC,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAGZ,QAAQ,CAAmB,IAAK,CAAC;EACzE,MAAMa,SAAS,GAAGX,MAAM,CAAgD,CAAC;EACzE,MAAMY,OAAO,GAAGf,kBAAkB,CACjC,MAAM;IACL,QAASW,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACM,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAON,KAAK,CAACO,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOP,KAAK,CAACQ,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKJ,SAAS,CAACK,OAAO,EAAG;MACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;IAClC;IACAN,cAAc,CAAEH,KAAK,CAACQ,KAAK,CAAC,CAAE,CAAC;IAC/BJ,SAAS,CAACK,OAAO,GAAGE,UAAU,CAAE,MAAM;MACrCR,cAAc,CAAE,IAAK,CAAC;MACtBC,SAAS,CAACK,OAAO,GAAGG,SAAS;IAC9B,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACDpB,SAAS,CAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKY,SAAS,CAACK,OAAO,EAAG;QACxBC,YAAY,CAAEN,SAAS,CAACK,OAAQ,CAAC;MAClC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OACCI,aAAA,CAAChB,OAAO;IACPiB,KAAK,EAAG,CAAG;IACXC,WAAW,EAAG,KAAO;IACrBC,IAAI,EACHd,WAAW,KAAKF,KAAK,CAACQ,KAAK,CAAC,CAAC,GAAGb,EAAE,CAAE,SAAU,CAAC,GAAGA,EAAE,CAAE,MAAO;EAC7D,GAEDkB,aAAA,CAACjB,UAAU;IACVqB,IAAI,EAAC,OAAO;IACZC,GAAG,EAAGb,OAAS;IACfc,IAAI,EAAGzB,IAAM;IACb0B,WAAW,EAAG;EAAO,CACrB,CACO,CAAC;AAEZ,CAAC"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * Internal dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,13 +10,13 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../ui/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';
@@ -40,8 +40,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     onChange,
     defaultValue = '#fff',
     copyFormat,
+    // Context
+    onPickerDragStart,
+    onPickerDragEnd,
     ...divProps
   } = useContextSystem(props, 'ColorPicker');
+  const [containerEl, setContainerEl] = useState(null);
+  const containerRef = node => {
+    setContainerEl(node);
+  };
 
   // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = useControlledValue({
@@ -58,12 +65,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
   }, [debouncedSetColor]);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
   return createElement(ColorfulWrapper, {
-    ref: forwardedRef,
+    ref: useMergeRefs([containerRef, forwardedRef]),
     ...divProps
   }, createElement(Picker, {
+    containerEl: containerEl,
     onChange: handleChange,
     color: safeColordColor,
-    enableAlpha: enableAlpha
+    enableAlpha: enableAlpha,
+    onDragStart: onPickerDragStart,
+    onDragEnd: onPickerDragEnd
   }), createElement(AuxiliaryColorArtefactWrapper, null, createElement(AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, createElement(SelectControl, {

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

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","createElement","ref","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 { useContextSystem, contextConnect } from '../ui/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/>\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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"}
+{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","useMergeRefs","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","onPickerDragStart","onPickerDragEnd","divProps","containerEl","setContainerEl","containerRef","node","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","createElement","ref","onDragStart","onDragEnd","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, useMergeRefs } 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\n\t\t// Context\n\t\tonPickerDragStart,\n\t\tonPickerDragEnd,\n\t\t...divProps\n\t} = useContextSystem<\n\t\tColorPickerProps & {\n\t\t\tonPickerDragStart?: ( event: MouseEvent ) => void;\n\t\t\tonPickerDragEnd?: ( event: MouseEvent ) => void;\n\t\t}\n\t>( props, 'ColorPicker' );\n\n\tconst [ containerEl, setContainerEl ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\tconst containerRef = ( node: HTMLElement | null ) => {\n\t\tsetContainerEl( node );\n\t};\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\n\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t{ ...divProps }\n\t\t>\n\t\t\t<Picker\n\t\t\t\tcontainerEl={ containerEl }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\tonDragStart={ onPickerDragStart }\n\t\t\t\tonDragEnd={ onPickerDragEnd }\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/>\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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"}

package/build-module/color-picker/hex-input.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
 import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 export const HexInput = ({
   color,

package/build-module/color-picker/hex-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","__","InputControl","Text","Spacer","space","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","createElement","prefix","as","marginLeft","theme","accent","lineHeight","toHex","maxLength","label","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;IACnB,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAET,MAAM,CAAEa,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAME,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAER,UAAU,CAAE,GAAI,CAAC,GACzCE,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,OACCG,aAAA,CAACvB,YAAY;IACZwB,MAAM,EACLD,aAAA,CAACrB,MAAM;MACNuB,EAAE,EAAGxB,IAAM;MACXyB,UAAU,EAAGvB,KAAK,CAAE,CAAE,CAAG;MACzBG,KAAK,EAAGF,MAAM,CAACuB,KAAK,CAACC,MAAQ;MAC7BC,UAAU,EAAG;IAAG,GAChB,GAEO,CACR;IACDT,KAAK,EAAGd,KAAK,CAACwB,KAAK,CAAC,CAAC,CAACT,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDf,QAAQ,EAAGE,YAAc;IACzBsB,SAAS,EAAGvB,WAAW,GAAG,CAAC,GAAG,CAAG;IACjCwB,KAAK,EAAGjC,EAAE,CAAE,WAAY,CAAG;IAC3BkC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAGtB,YAAc;IACvCuB,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC"}
+{"version":3,"names":["colord","__","InputControl","Text","Spacer","space","COLORS","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","createElement","prefix","as","marginLeft","theme","accent","lineHeight","toHex","maxLength","label","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;IACnB,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAET,MAAM,CAAEa,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAME,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAER,UAAU,CAAE,GAAI,CAAC,GACzCE,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,OACCG,aAAA,CAACvB,YAAY;IACZwB,MAAM,EACLD,aAAA,CAACrB,MAAM;MACNuB,EAAE,EAAGxB,IAAM;MACXyB,UAAU,EAAGvB,KAAK,CAAE,CAAE,CAAG;MACzBG,KAAK,EAAGF,MAAM,CAACuB,KAAK,CAACC,MAAQ;MAC7BC,UAAU,EAAG;IAAG,GAChB,GAEO,CACR;IACDT,KAAK,EAAGd,KAAK,CAACwB,KAAK,CAAC,CAAC,CAACT,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDf,QAAQ,EAAGE,YAAc;IACzBsB,SAAS,EAAGvB,WAAW,GAAG,CAAC,GAAG,CAAG;IACjCwB,KAAK,EAAGjC,EAAE,CAAE,WAAY,CAAG;IAC3BkC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAGtB,YAAc;IACvCuB,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC"}

package/build-module/color-picker/hsl-input.js

@@ -1,9 +1,14 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
 import { colord } from 'colord';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -13,67 +18,84 @@ export const HslInput = ({
   onChange,
   enableAlpha
 }) => {
-  const {
-    h,
-    s,
-    l,
-    a
-  } = color.toHsl();
+  const colorPropHSLA = useMemo(() => color.toHsl(), [color]);
+  const [internalHSLA, setInternalHSLA] = useState({
+    ...colorPropHSLA
+  });
+  const isInternalColorSameAsReceivedColor = color.isEqual(colord(internalHSLA));
+  useEffect(() => {
+    if (!isInternalColorSameAsReceivedColor) {
+      // Keep internal HSLA color up to date with the received color prop
+      setInternalHSLA(colorPropHSLA);
+    }
+  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
+
+  // If the internal color is equal to the received color prop, we can use the
+  // HSLA values from the local state which, compared to the received color prop,
+  // retain more details about the actual H and S values that the user selected,
+  // and thus allow for better UX when interacting with the H and S sliders.
+  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
+  const updateHSLAValue = partialNewValue => {
+    const nextOnChangeValue = colord({
+      ...colorValue,
+      ...partialNewValue
+    });
+
+    // Fire `onChange` only if the resulting color is different from the
+    // current one.
+    // Otherwise, update the internal HSLA color to cause a re-render.
+    if (!color.isEqual(nextOnChangeValue)) {
+      onChange(nextOnChangeValue);
+    } else {
+      setInternalHSLA(prevHSLA => ({
+        ...prevHSLA,
+        ...partialNewValue
+      }));
+    }
+  };
   return createElement(Fragment, null, createElement(InputWithSlider, {
     min: 0,
     max: 359,
     label: "Hue",
     abbreviation: "H",
-    value: h,
+    value: colorValue.h,
     onChange: nextH => {
-      onChange(colord({
-        h: nextH,
-        s,
-        l,
-        a
-      }));
+      updateHSLAValue({
+        h: nextH
+      });
     }
   }), createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Saturation",
     abbreviation: "S",
-    value: s,
+    value: colorValue.s,
     onChange: nextS => {
-      onChange(colord({
-        h,
-        s: nextS,
-        l,
-        a
-      }));
+      updateHSLAValue({
+        s: nextS
+      });
     }
   }), createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Lightness",
     abbreviation: "L",
-    value: l,
+    value: colorValue.l,
     onChange: nextL => {
-      onChange(colord({
-        h,
-        s,
-        l: nextL,
-        a
-      }));
+      updateHSLAValue({
+        l: nextL
+      });
     }
   }), enableAlpha && createElement(InputWithSlider, {
     min: 0,
     max: 100,
     label: "Alpha",
     abbreviation: "A",
-    value: Math.trunc(100 * a),
+    value: Math.trunc(100 * colorValue.a),
     onChange: nextA => {
-      onChange(colord({
-        h,
-        s,
-        l,
+      updateHSLAValue({
         a: nextA / 100
-      }));
+      });
     }
   }));
 };