@wordpress/components 19.14.0 → 19.17.0

package/build/box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The typeof === 'number' check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * typeof === 'number' is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( typeof commonQuantity === 'number' ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\t! isEmpty(\n\t\t\tObject.values( values ).filter(\n\t\t\t\t// Switching units when input is empty causes values only\n\t\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t\t// unless filtered.\n\t\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t\t)\n\t\t)\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides","applyValueToSides","currentValues","newValue","newValues","forEach"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The typeof === 'number' check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * typeof === 'number' is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( typeof commonQuantity === 'number' ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\tObject.values( values ).filter(\n\t\t\t// Switching units when input is empty causes values only\n\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t// unless filtered.\n\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t).length > 0\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n\n/**\n * Applies a value to an object representing top, right, bottom and left sides\n * while taking into account any custom side configuration.\n *\n * @param {Object}        currentValues The current values for each side.\n * @param {string|number} newValue      The value to apply to the sides object.\n * @param {string[]}      sides         Array defining valid sides.\n *\n * @return {Object} Object containing the updated values for each side.\n */\nexport function applyValueToSides( currentValues, newValue, sides ) {\n\tconst newValues = { ...currentValues };\n\n\tif ( sides?.length ) {\n\t\tsides.forEach( ( side ) => {\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewValues.top = newValue;\n\t\t\t\tnewValues.bottom = newValue;\n\t\t\t} else if ( side === 'horizontal' ) {\n\t\t\t\tnewValues.left = newValue;\n\t\t\t\tnewValues.right = newValue;\n\t\t\t} else {\n\t\t\t\tnewValues[ side ] = newValue;\n\t\t\t}\n\t\t} );\n\t} else {\n\t\tALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );\n\t}\n\n\treturn newValues;\n}\n"]}

package/build/color-palette/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
 exports.default = ColorPalette;
-exports.extractColorNameFromCurrentValue = void 0;
+exports.showTransparentBackground = exports.extractColorNameFromCurrentValue = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -175,6 +175,16 @@ const extractColorNameFromCurrentValue = function (currentValue) {
 
 exports.extractColorNameFromCurrentValue = extractColorNameFromCurrentValue;
 
+const showTransparentBackground = currentValue => {
+  if (typeof currentValue === 'undefined') {
+    return true;
+  }
+
+  return (0, _colord.colord)(currentValue).alpha() === 0;
+};
+
+exports.showTransparentBackground = showTransparentBackground;
+
 function ColorPalette(_ref6) {
   let {
     clearable = true,
@@ -222,7 +232,9 @@ function ColorPalette(_ref6) {
         "aria-haspopup": "true",
         onClick: onToggle,
         "aria-label": customColorAccessibleLabel,
-        style: {
+        style: showTransparentBackground(value) ? {
+          color: '#000'
+        } : {
           background: value,
           color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","__unstableShift","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\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} ) {\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>{ name }</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={ onChange }\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\t\toffset: 20,\n\t\t\t\t\t\t\t__unstableShift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","__unstableShift","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\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} ) {\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>{ name }</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={ onChange }\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\t\toffset: 20,\n\t\t\t\t\t\t\t__unstableShift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

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

@@ -11,14 +11,14 @@ var _colord = require("colord");
 
 var _i18n = require("@wordpress/i18n");
 
+var _inputControl = require("../input-control");
+
 var _text = require("../text");
 
 var _spacer = require("../spacer");
 
 var _space = require("../ui/utils/space");
 
-var _styles = require("./styles");
-
 var _colorsValues = require("../utils/colors-values");
 
 /**
@@ -61,10 +61,10 @@ const HexInput = _ref => {
     };
   };
 
-  return (0, _element.createElement)(_styles.ColorHexInputControl, {
+  return (0, _element.createElement)(_inputControl.InputControl, {
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
-      marginLeft: (0, _space.space)(3.5),
+      marginLeft: (0, _space.space)(4),
       color: _colorsValues.COLORS.ui.theme,
       lineHeight: 1
     }, "#"),
@@ -73,7 +73,9 @@ const HexInput = _ref => {
     maxLength: enableAlpha ? 9 : 7,
     label: (0, _i18n.__)('Hex color'),
     hideLabelFromVision: true,
-    __unstableStateReducer: stateReducer
+    size: "__unstable-large",
+    __unstableStateReducer: stateReducer,
+    __unstableInputWidth: "9em"
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","Text","COLORS","ui","theme","toHex"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAcO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAE,oBAAQI,QAAR,CAAF,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAAA;;AACvD,UAAMC,WAAW,sBAAGD,MAAM,CAACE,OAAV,6EAAG,gBAAgBC,KAAnB,0DAAG,sBAAuBF,WAA3C;;AAEA,QAAK,uBAAsBA,WAAtB,aAAsBA,WAAtB,uBAAsBA,WAAW,CAAEG,SAAnC,CAAL,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAG,gBAAAN,KAAK,CAACM,KAAN,sDAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,oBAEXR,KAAK,CAACM,KAFK,kDAEX,cAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,4BAAC,4BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,GAAP,CAFd;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGpB,KAAK,CAACqB,KAAN,GAAcN,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAdT;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,sBAAsB,EAAGK;AAhB1B,IADD;AAoBA,CA5CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\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<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\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\t__unstableStateReducer={ stateReducer }\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","Text","COLORS","ui","theme","toHex"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAcO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAE,oBAAQI,QAAR,CAAF,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAAA;;AACvD,UAAMC,WAAW,sBAAGD,MAAM,CAACE,OAAV,6EAAG,gBAAgBC,KAAnB,0DAAG,sBAAuBF,WAA3C;;AAEA,QAAK,uBAAsBA,WAAtB,aAAsBA,WAAtB,uBAAsBA,WAAW,CAAEG,SAAnC,CAAL,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAG,gBAAAN,KAAK,CAACM,KAAN,sDAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,oBAEXR,KAAK,CAACM,KAFK,kDAEX,cAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,4BAAC,0BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,CAAP,CAFd;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGpB,KAAK,CAACqB,KAAN,GAAcN,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAdT;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,IAAI,EAAC,kBAhBN;AAiBC,IAAA,sBAAsB,EAAGK,YAjB1B;AAkBC,IAAA,oBAAoB,EAAC;AAlBtB,IADD;AAsBA,CA9CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, 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';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\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.ui.theme }\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"]}

package/build/color-picker/index.native.js

@@ -54,7 +54,6 @@ function ColorPicker(_ref) {
     onHandleHardwareButtonPress,
     bottomLabelText
   } = _ref;
-  const didMount = (0, _element.useRef)(false);
   const isIOS = _reactNative.Platform.OS === 'ios';
   const hitSlop = {
     top: 22,
@@ -89,19 +88,32 @@ function ColorPicker(_ref) {
   const colorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
   const selectColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.selectColorText, _style.default.selectColorTextDark);
   const footerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.footer, _style.default.footerDark);
-  const currentColor = (0, _colord.colord)({
-    h: hue,
-    s: sat * 100,
-    v: val * 100
-  }).toHex();
-  (0, _element.useEffect)(() => {
-    if (!didMount.current) {
-      didMount.current = true;
-      return;
-    }
 
-    setColor(currentColor);
-  }, [currentColor]);
+  const combineToHex = function () {
+    let h = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : hue;
+    let s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : sat;
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : val;
+    return (0, _colord.colord)({
+      h,
+      s: s * 100,
+      v: v * 100
+    }).toHex();
+  };
+
+  const currentColor = combineToHex();
+
+  const updateColor = _ref2 => {
+    let {
+      hue: h,
+      saturation: s,
+      value: v
+    } = _ref2;
+    if (h !== undefined) setHue(h);
+    if (s !== undefined) setSaturation(s);
+    if (v !== undefined) setValue(v);
+    setColor(combineToHex(h, s, v));
+  };
+
   (0, _element.useEffect)(() => {
     shouldEnableBottomSheetMaxHeight(false);
     onHandleClosingBottomSheet(() => {
@@ -116,24 +128,13 @@ function ColorPicker(_ref) {
 
     if (onHandleHardwareButtonPress) {
       onHandleHardwareButtonPress(onButtonPress);
-    }
-  }, []);
-
-  function onHuePickerChange(_ref2) {
-    let {
-      hue: h
-    } = _ref2;
-    setHue(h);
-  }
+    } // TODO: Revisit this to discover if there's a good reason for omitting
+    // the hook’s dependencies and running it a single time. Ideally there
+    // may be a way to refactor and obviate the disabled lint rule. If not,
+    // this comment should be replaced by one that explains the reasoning.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  function onSatValPickerChange(_ref3) {
-    let {
-      saturation: s,
-      value: v
-    } = _ref3;
-    setSaturation(s);
-    setValue(v);
-  }
+  }, []);
 
   function onButtonPress(action) {
     onNavigationBack();
@@ -148,13 +149,13 @@ function ColorPicker(_ref) {
 
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNativeHsvColorPicker.default, {
     huePickerHue: hue,
-    onHuePickerDragMove: onHuePickerChange,
-    onHuePickerPress: !isBottomSheetContentScrolling && onHuePickerChange,
+    onHuePickerDragMove: updateColor,
+    onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
     satValPickerHue: hue,
     satValPickerSaturation: sat,
     satValPickerValue: val,
-    onSatValPickerDragMove: onSatValPickerChange,
-    onSatValPickerPress: !isBottomSheetContentScrolling && onSatValPickerChange,
+    onSatValPickerDragMove: updateColor,
+    onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
     onSatValPickerDragStart: () => {
       shouldEnableBottomSheetScroll(false);
     },

package/build/color-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/index.native.js"],"names":["namesPlugin","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","didMount","isIOS","Platform","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","styles","picker","pickerPointerSize","pickerPointer","pickerWidth","BottomSheet","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","currentColor","toHex","current","onButtonPress","onHuePickerChange","onSatValPickerChange","saturation","value","action","width","close","toUpperCase","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst didMount = useRef( false );\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst currentColor = colord( {\n\t\th: hue,\n\t\ts: sat * 100,\n\t\tv: val * 100,\n\t} ).toHex();\n\n\tuseEffect( () => {\n\t\tif ( ! didMount.current ) {\n\t\t\tdidMount.current = true;\n\t\t\treturn;\n\t\t}\n\t\tsetColor( currentColor );\n\t}, [ currentColor ] );\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t}, [] );\n\n\tfunction onHuePickerChange( { hue: h } ) {\n\t\tsetHue( h );\n\t}\n\n\tfunction onSatValPickerChange( { saturation: s, value: v } ) {\n\t\tsetSaturation( s );\n\t\tsetValue( v );\n\t}\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ onHuePickerChange }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onHuePickerChange\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ onSatValPickerChange }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && onSatValPickerChange\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/index.native.js"],"names":["namesPlugin","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","Platform","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","toHsv","hue","setHue","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","styles","picker","pickerPointerSize","pickerPointer","pickerWidth","BottomSheet","getWidth","applyButtonStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","onButtonPress","action","width","close","toUpperCase","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) setHue( h );\n\t\tif ( s !== undefined ) setSaturation( s );\n\t\tif ( v !== undefined ) setValue( v );\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"]}

package/build/color-picker/input-with-slider.js

@@ -42,17 +42,20 @@ const InputWithSlider = _ref => {
     onChange: onChange,
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
-      paddingLeft: (0, _space.space)(3.5),
+      paddingLeft: (0, _space.space)(4),
       color: _colorsValues.COLORS.ui.theme,
       lineHeight: 1
     }, abbreviation),
-    hideHTMLArrows: true
+    hideHTMLArrows: true,
+    size: "__unstable-large"
   }), (0, _element.createElement)(_styles.RangeControl, {
     label: label,
     hideLabelFromVision: true,
     min: min,
     max: max,
-    value: value,
+    value: value // @ts-expect-error
+    // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
+    ,
     onChange: onChange,
     withInputField: false
   }));

package/build/color-picker/input-with-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGL,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGE,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,GAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGN,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGL,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGE,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGN,YANH,CARF;AAiBC,IAAA,cAAc,MAjBf;AAkBC,IAAA,IAAI,EAAC;AAlBN,IADD,EAqBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT,CAMC;AACA;AAPD;AAQC,IAAA,QAAQ,EAAGD,QARZ;AASC,IAAA,cAAc,EAAG;AATlB,IArBD,CADD;AAmCA,CA3CM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}