@wordpress/components 25.1.0 → 25.1.2

package/build/color-palette/index.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _colord = require("colord");
 
 var _names = _interopRequireDefault(require("colord/plugins/names"));
@@ -147,10 +145,11 @@ function CustomColorPickerDropdown({
     }),
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_dropdown.default, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
-    popoverProps: popoverProps
-  }, props));
+    popoverProps: popoverProps,
+    ...props
+  });
 }
 
 function UnforwardedColorPalette(props, forwardedRef) {
@@ -196,10 +195,11 @@ function UnforwardedColorPalette(props, forwardedRef) {
     }, (0, _i18n.__)('Clear')),
     headingLevel
   };
-  return (0, _element.createElement)(_vStack.VStack, (0, _extends2.default)({
+  return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
-    ref: forwardedRef
-  }, otherProps), !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
+    ref: forwardedRef,
+    ...otherProps
+  }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
     renderToggle: ({
@@ -228,11 +228,11 @@ function UnforwardedColorPalette(props, forwardedRef) {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), hasMultipleColorOrigins ? (0, _element.createElement)(MultiplePalettes, (0, _extends2.default)({}, paletteCommonProps, {
+  }), hasMultipleColorOrigins ? (0, _element.createElement)(MultiplePalettes, { ...paletteCommonProps,
     colors: colors
-  })) : (0, _element.createElement)(SinglePalette, (0, _extends2.default)({}, paletteCommonProps, {
+  }) : (0, _element.createElement)(SinglePalette, { ...paletteCommonProps,
     colors: colors
-  })));
+  }));
 }
 /**
  * Allows the user to pick a color from a list of pre-defined color entries.

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","split","join","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","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, with added hyphens e.g: \"#-f-0-0\".\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\tisHex ? displayValue.split( '' ).join( '-' ) : displayValue\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"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","split","join","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","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, with added hyphens e.g: \"#-f-0-0\".\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\tisHex ? displayValue.split( '' ).join( '-' ) : displayValue\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"]}

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

@@ -30,14 +30,17 @@ const ColorInput = ({
 
   switch (colorType) {
     case 'hsl':
-      return (0, _element.createElement)(_hslInput.HslInput, props);
+      return (0, _element.createElement)(_hslInput.HslInput, { ...props
+      });
 
     case 'rgb':
-      return (0, _element.createElement)(_rgbInput.RgbInput, props);
+      return (0, _element.createElement)(_rgbInput.RgbInput, { ...props
+      });
 
     default:
     case 'hex':
-      return (0, _element.createElement)(_hexInput.HexInput, props);
+      return (0, _element.createElement)(_hexInput.HexInput, { ...props
+      });
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMO,MAAMA,UAAU,GAAG,CAAE;AAC3BC,EAAAA,SAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA;AAJ2B,CAAF,KAKF;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,EAAeI,KAAf,CAAP;;AACD,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,EAAeA,KAAf,CAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,EAAeA,KAAf,CAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMO,MAAMA,UAAU,GAAG,CAAE;AAC3BC,EAAAA,SAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA;AAJ2B,CAAF,KAKF;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,OAAeI;AAAf,QAAP;;AACD,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,OAAeA;AAAf,QAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,4BAAC,kBAAD,OAAeA;AAAf,QAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}

package/build/color-picker/component.js

@@ -9,8 +9,6 @@ exports.default = exports.ColorPicker = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _colord = require("colord");
 
 var _names = _interopRequireDefault(require("colord/plugins/names"));
@@ -77,9 +75,10 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     debouncedSetColor(nextValue.toHex());
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, _element.useState)(copyFormat || 'hex');
-  return (0, _element.createElement)(_styles.ColorfulWrapper, (0, _extends2.default)({
-    ref: forwardedRef
-  }, divProps), (0, _element.createElement)(_picker.Picker, {
+  return (0, _element.createElement)(_styles.ColorfulWrapper, {
+    ref: forwardedRef,
+    ...divProps
+  }, (0, _element.createElement)(_picker.Picker, {
     onChange: handleChange,
     color: safeColordColor,
     enableAlpha: enableAlpha

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AA5BA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAgBA,oBAAQ,CAAEA,cAAF,CAAR;AAEA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,sBAAsB,GAAG,CAC9BC,KAD8B,EAE9BC,YAF8B,KAG1B;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,0CAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,OAAO,EAAGN,OAFX;AAGC,IAAA,KAAK,EAAGmB,SAHT;AAIC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CALd;AAOC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAPT;AAQC,IAAA,mBAAmB;AARpB,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAXD,CADD,EAiBC,4BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAjBD,CAND,CADD;AAmCA,CAxED;;AA0EO,MAAMgB,WAAW,GAAG,6BAC1BnB,sBAD0B,EAE1B,aAF0B,CAApB;;eAKQmB,W","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } 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"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":";;;;;;;;;AAUA;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AA5BA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAgBA,oBAAQ,CAAEA,cAAF,CAAR;AAEA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,sBAAsB,GAAG,CAC9BC,KAD8B,EAE9BC,YAF8B,KAG1B;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN,YAAvB;AAAA,OAA2CO;AAA3C,KACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,0CAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,OAAO,EAAGN,OAFX;AAGC,IAAA,KAAK,EAAGmB,SAHT;AAIC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CALd;AAOC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAPT;AAQC,IAAA,mBAAmB;AARpB,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAXD,CADD,EAiBC,4BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAjBD,CAND,CADD;AAmCA,CAxED;;AA0EO,MAAMgB,WAAW,GAAG,6BAC1BnB,sBAD0B,EAE1B,aAF0B,CAApB;;eAKQmB,W","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } 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"]}

package/build/color-picker/legacy-adapter.js

@@ -17,7 +17,8 @@ var _useDeprecatedProps = require("./use-deprecated-props");
  * Internal dependencies
  */
 const LegacyAdapter = props => {
-  return (0, _element.createElement)(_component.default, (0, _useDeprecatedProps.useDeprecatedProps)(props));
+  return (0, _element.createElement)(_component.default, { ...(0, _useDeprecatedProps.useDeprecatedProps)(props)
+  });
 };
 
 exports.LegacyAdapter = LegacyAdapter;

package/build/color-picker/legacy-adapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["LegacyAdapter","props"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AAKO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,4BAAC,kBAAD,EAAkB,4CAAoBA,KAApB,CAAlB,CAAP;AACA,CAFM","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["LegacyAdapter","props"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AAKO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,4BAAC,kBAAD,OAAkB,4CAAoBA,KAApB;AAAlB,IAAP;AACA,CAFM","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}

package/build/confirm-dialog/component.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _modal = _interopRequireDefault(require("../modal"));
@@ -56,6 +54,8 @@ function ConfirmDialog(props, forwardedRef) {
   } = (0, _context.useContextSystem)(props, 'ConfirmDialog');
   const cx = (0, _useCx.useCx)();
   const wrapperClassName = cx(styles.wrapper);
+  const cancelButtonRef = (0, _element.useRef)();
+  const confirmButtonRef = (0, _element.useRef)();
   const [isOpen, setIsOpen] = (0, _element.useState)();
   const [shouldSelfClose, setShouldSelfClose] = (0, _element.useState)();
   (0, _element.useEffect)(() => {
@@ -75,29 +75,36 @@ function ConfirmDialog(props, forwardedRef) {
     }
   }, [shouldSelfClose, setIsOpen]);
   const handleEnter = (0, _element.useCallback)(event => {
-    if (event.key === 'Enter') {
+    // Avoid triggering the 'confirm' action when a button is focused,
+    // as this can cause a double submission.
+    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;
+
+    if (!isConfirmOrCancelButton && event.key === 'Enter') {
       handleEvent(onConfirm)(event);
     }
   }, [handleEvent, onConfirm]);
   const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0, _i18n.__)('Cancel');
   const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0, _i18n.__)('OK');
-  return (0, _element.createElement)(_element.Fragment, null, isOpen && (0, _element.createElement)(_modal.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_element.Fragment, null, isOpen && (0, _element.createElement)(_modal.default, {
     onRequestClose: handleEvent(onCancel),
     onKeyDown: handleEnter,
     closeButtonLabel: cancelLabel,
     isDismissible: true,
     ref: forwardedRef,
     overlayClassName: wrapperClassName,
-    __experimentalHideHeader: true
-  }, otherProps), (0, _element.createElement)(_vStack.VStack, {
+    __experimentalHideHeader: true,
+    ...otherProps
+  }, (0, _element.createElement)(_vStack.VStack, {
     spacing: 8
   }, (0, _element.createElement)(_text.Text, null, children), (0, _element.createElement)(_flex.Flex, {
     direction: "row",
     justify: "flex-end"
   }, (0, _element.createElement)(_button.default, {
+    ref: cancelButtonRef,
     variant: "tertiary",
     onClick: handleEvent(onCancel)
   }, cancelLabel), (0, _element.createElement)(_button.default, {
+    ref: confirmButtonRef,
     variant: "primary",
     onClick: handleEvent(onConfirm)
   }, confirmLabel)))));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","styles","wrapper","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":";;;;;;;;;AASA;;;;AADA;;AAMA;;AAEA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AA1BA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAeA,SAASA,aAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,MAAM,EAAEC,UADH;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,iBALK;AAMLC,IAAAA,gBANK;AAOL,OAAGC;AAPE,MAQF,+BAAkBT,KAAlB,EAAyB,eAAzB,CARJ;AAUA,QAAMU,EAAE,GAAG,mBAAX;AACA,QAAMC,gBAAgB,GAAGD,EAAE,CAAEE,MAAM,CAACC,OAAT,CAA3B;AAEA,QAAM,CAAEX,MAAF,EAAUY,SAAV,IAAwB,wBAA9B;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,wBAAhD;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACA;AACA,UAAMC,WAAW,GAAG,OAAOd,UAAP,KAAsB,WAA1C;AACAW,IAAAA,SAAS,CAAEG,WAAW,GAAGd,UAAH,GAAgB,IAA7B,CAAT;AACAa,IAAAA,kBAAkB,CAAE,CAAEC,WAAJ,CAAlB;AACA,GARD,EAQG,CAAEd,UAAF,CARH;AAUA,QAAMe,WAAW,GAAG,0BACjBC,QAAF,IACGC,KAAF,IAA+B;AAC9BD,IAAAA,QAAQ,GAAIC,KAAJ,CAAR;;AACA,QAAKL,eAAL,EAAuB;AACtBD,MAAAA,SAAS,CAAE,KAAF,CAAT;AACA;AACD,GAPiB,EAQnB,CAAEC,eAAF,EAAmBD,SAAnB,CARmB,CAApB;AAWA,QAAMO,WAAW,GAAG,0BACjBD,KAAF,IAA8C;AAC7C,QAAKA,KAAK,CAACE,GAAN,KAAc,OAAnB,EAA6B;AAC5BJ,MAAAA,WAAW,CAAEd,SAAF,CAAX,CAA0BgB,KAA1B;AACA;AACD,GALkB,EAMnB,CAAEF,WAAF,EAAed,SAAf,CANmB,CAApB;AASA,QAAMmB,WAAW,GAAGf,gBAAH,aAAGA,gBAAH,cAAGA,gBAAH,GAAuB,cAAI,QAAJ,CAAxC;AACA,QAAMgB,YAAY,GAAGjB,iBAAH,aAAGA,iBAAH,cAAGA,iBAAH,GAAwB,cAAI,IAAJ,CAA1C;AAEA,SACC,qDACGL,MAAM,IACP,4BAAC,cAAD;AACC,IAAA,cAAc,EAAGgB,WAAW,CAAEb,QAAF,CAD7B;AAEC,IAAA,SAAS,EAAGgB,WAFb;AAGC,IAAA,gBAAgB,EAAGE,WAHpB;AAIC,IAAA,aAAa,EAAG,IAJjB;AAKC,IAAA,GAAG,EAAGtB,YALP;AAMC,IAAA,gBAAgB,EAAGU,gBANpB;AAOC,IAAA,wBAAwB;AAPzB,KAQMF,UARN,GAUC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,UAAD,QAAQH,QAAR,CADD,EAEC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAC,KAAhB;AAAsB,IAAA,OAAO,EAAC;AAA9B,KACC,4BAAC,eAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAGY,WAAW,CAAEb,QAAF;AAFtB,KAIGkB,WAJH,CADD,EAOC,4BAAC,eAAD;AACC,IAAA,OAAO,EAAC,SADT;AAEC,IAAA,OAAO,EAAGL,WAAW,CAAEd,SAAF;AAFtB,KAIGoB,YAJH,CAPD,CAFD,CAVD,CAFF,CADD;AAkCA;;eAEc,6BAAgBzB,aAAhB,EAA+B,eAA/B,C","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","styles","wrapper","cancelButtonRef","confirmButtonRef","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","isConfirmOrCancelButton","target","current","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}

package/build/custom-gradient-picker/gradient-bar/control-points.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _colord = require("colord");
@@ -54,7 +52,7 @@ function ControlPointButton({
 }) {
   const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
     "aria-label": (0, _i18n.sprintf)( // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
     (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
     "aria-describedby": descriptionId,
@@ -62,8 +60,9 @@ function ControlPointButton({
     "aria-expanded": isOpen,
     className: (0, _classnames.default)('components-custom-gradient-picker__control-point-button', {
       'is-active': isOpen
-    })
-  }, additionalProps)), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+    }),
+    ...additionalProps
+  }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
     id: descriptionId
   }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
 }
@@ -79,11 +78,12 @@ function GradientColorPickerDropdown({
     offset: 8
   }), []);
   const mergedClassName = (0, _classnames.default)('components-custom-gradient-picker__control-point-dropdown', className);
-  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, (0, _extends2.default)({
+  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, {
     isRenderedInSidebar: isRenderedInSidebar,
     popoverProps: popoverProps,
-    className: mergedClassName
-  }, props));
+    className: mergedClassName,
+    ...props
+  });
 }
 
 function ControlPoints({

package/build/custom-gradient-picker/gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} as const ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\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\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\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\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\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) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} as const ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\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\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\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\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\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) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

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

@@ -10,8 +10,6 @@ exports.default = CustomSelectControl;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _downshift = require("downshift");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -169,13 +167,15 @@ function CustomSelectControl(props) {
 
   return (0, _element.createElement)("div", {
     className: (0, _classnames.default)('components-custom-select-control', className)
-  }, hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.VisuallyHidden, (0, _extends2.default)({
-    as: "label"
-  }, getLabelProps()), label) :
+  }, hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+    as: "label",
+    ...getLabelProps()
+  }, label) :
   /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-  (0, _element.createElement)(_baseControlStyles.StyledLabel, getLabelProps({
-    className: 'components-custom-select-control__label'
-  }), label), (0, _element.createElement)(_styles.InputBaseWithBackCompatMinWidth, {
+  (0, _element.createElement)(_baseControlStyles.StyledLabel, { ...getLabelProps({
+      className: 'components-custom-select-control__label'
+    })
+  }, label), (0, _element.createElement)(_styles.InputBaseWithBackCompatMinWidth, {
     __next36pxDefaultSize: __next36pxDefaultSize,
     __nextUnconstrainedWidth: __nextUnconstrainedWidth,
     isFocused: isOpen || isFocused,
@@ -183,36 +183,38 @@ function CustomSelectControl(props) {
     labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
     size: size,
     suffix: (0, _element.createElement)(_chevronDown.default, null)
-  }, (0, _element.createElement)(_selectControlStyles.Select, (0, _extends2.default)({
+  }, (0, _element.createElement)(_selectControlStyles.Select, {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     as: "button",
     onFocus: handleOnFocus,
     onBlur: handleOnBlur,
     selectSize: size,
-    __next36pxDefaultSize: __next36pxDefaultSize
-  }, getToggleButtonProps({
-    // This is needed because some speech recognition software don't support `aria-labelledby`.
-    'aria-label': label,
-    'aria-labelledby': undefined,
-    className: 'components-custom-select-control__button',
-    describedBy: getDescribedBy()
-  })), itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0, _element.createElement)("span", {
+    __next36pxDefaultSize: __next36pxDefaultSize,
+    ...getToggleButtonProps({
+      // This is needed because some speech recognition software don't support `aria-labelledby`.
+      'aria-label': label,
+      'aria-labelledby': undefined,
+      className: 'components-custom-select-control__button',
+      describedBy: getDescribedBy()
+    })
+  }, itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0, _element.createElement)("span", {
     className: "components-custom-select-control__hint"
-  }, selectedItem.__experimentalHint))), (0, _element.createElement)("ul", (0, _extends2.default)({}, menuProps, {
+  }, selectedItem.__experimentalHint))), (0, _element.createElement)("ul", { ...menuProps,
     onKeyDown: onKeyDownHandler
-  }), isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key
-  (0, _element.createElement)("li", getItemProps({
-    item,
-    index,
-    key: item.key,
-    className: (0, _classnames.default)(item.className, 'components-custom-select-control__item', {
-      'is-highlighted': index === highlightedIndex,
-      'has-hint': !!item.__experimentalHint,
-      'is-next-36px-default-size': __next36pxDefaultSize
-    }),
-    style: item.style
-  }), item.name, item.__experimentalHint && (0, _element.createElement)("span", {
+  }, isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key
+  (0, _element.createElement)("li", { ...getItemProps({
+      item,
+      index,
+      key: item.key,
+      className: (0, _classnames.default)(item.className, 'components-custom-select-control__item', {
+        'is-highlighted': index === highlightedIndex,
+        'has-hint': !!item.__experimentalHint,
+        'is-next-36px-default-size': __next36pxDefaultSize
+      }),
+      style: item.style
+    })
+  }, item.name, item.__experimentalHint && (0, _element.createElement)("span", {
     className: "components-custom-select-control__item-hint"
   }, item.__experimentalHint), item === selectedItem && (0, _element.createElement)(_icons.Icon, {
     icon: _icons.check,
@@ -221,8 +223,8 @@ function CustomSelectControl(props) {
 }
 
 function StableCustomSelectControl(props) {
-  return (0, _element.createElement)(CustomSelectControl, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(CustomSelectControl, { ...props,
     __experimentalShowSelectedHint: false
-  }));
+  });
 }
 //# sourceMappingURL=index.js.map