@wordpress/components 17.0.0 → 19.0.2

package/build/combobox-control/index.js

@@ -57,22 +57,23 @@ const DetectOutside = (0, _withFocusOutside.default)(class extends _element.Comp
 
 });
 
-function ComboboxControl({
-  value,
-  label,
-  options,
-  onChange,
-  onFilterValueChange = _lodash.noop,
-  hideLabelFromVision,
-  help,
-  allowReset = true,
-  className,
-  messages = {
-    selected: (0, _i18n.__)('Item selected.')
-  }
-}) {
+function ComboboxControl(_ref) {
   var _currentOption$label;
 
+  let {
+    value,
+    label,
+    options,
+    onChange,
+    onFilterValueChange = _lodash.noop,
+    hideLabelFromVision,
+    help,
+    allowReset = true,
+    className,
+    messages = {
+      selected: (0, _i18n.__)('Item selected.')
+    }
+  } = _ref;
   const currentOption = options.find(option => option.value === value);
   const currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
   const instanceId = (0, _compose.useInstanceId)(ComboboxControl);
@@ -105,7 +106,8 @@ function ComboboxControl({
     setIsExpanded(false);
   };
 
-  const handleArrowNavigation = (offset = 1) => {
+  const handleArrowNavigation = function () {
+    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     const index = matchingSuggestions.indexOf(selectedSuggestion);
     let nextIndex = index + offset;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/combobox-control/index.js"],"names":["DetectOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","value","label","options","onChange","onFilterValueChange","noop","hideLabelFromVision","help","allowReset","className","messages","selected","currentOption","find","option","currentLabel","instanceId","selectedSuggestion","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","matchingSuggestions","startsWithMatch","containsMatch","match","toLocaleLowerCase","forEach","index","indexOf","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","keyCode","ENTER","UP","DOWN","ESCAPE","onBlur","onFocus","onInputChange","text","handleOnReset","current","input","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","closeSmall","suggestion"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, deburr } from 'lodash';\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { Flex, FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component {\n\t\thandleFocusOutside( event ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nfunction ComboboxControl( {\n\tvalue,\n\tlabel,\n\toptions,\n\tonChange,\n\tonFilterValueChange = noop,\n\thideLabelFromVision,\n\thelp,\n\tallowReset = true,\n\tclassName,\n\tmessages = {\n\t\tselected: __( 'Item selected.' ),\n\t},\n} ) {\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\tconst instanceId = useInstanceId( ComboboxControl );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef();\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch = [];\n\t\tconst containsMatch = [];\n\t\tconst match = deburr( inputValue.toLocaleLowerCase() );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = deburr( option.label )\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options, value ] );\n\n\tconst onSuggestionSelected = ( newSelectedSuggestion ) => {\n\t\tonChange( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = matchingSuggestions.indexOf( selectedSuggestion );\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown = ( event ) => {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase ENTER:\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase UP:\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase DOWN:\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase ESCAPE:\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( null );\n\t\tinputContainer.current.input.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tmatchingSuggestions.indexOf( selectedSuggestion ) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<Flex>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcurrentLabel\n\t\t\t\t\t\t\t\t\t\t? `${ currentLabel }, ${ label }`\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tmatch={ { label: inputValue } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/combobox-control/index.js"],"names":["DetectOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","value","label","options","onChange","onFilterValueChange","noop","hideLabelFromVision","help","allowReset","className","messages","selected","currentOption","find","option","currentLabel","instanceId","selectedSuggestion","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","matchingSuggestions","startsWithMatch","containsMatch","match","toLocaleLowerCase","forEach","index","indexOf","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","keyCode","ENTER","UP","DOWN","ESCAPE","onBlur","onFocus","onInputChange","text","handleOnReset","current","input","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","closeSmall","suggestion"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAIA;;AAQA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA7BA;AACA;AACA;;AAGA;AACA;AACA;;AAcA;AACA;AACA;AAQA,MAAMA,aAAa,GAAG,+BACrB,cAAcC,kBAAd,CAAwB;AACvBC,EAAAA,kBAAkB,CAAEC,KAAF,EAAU;AAC3B,SAAKC,KAAL,CAAWC,cAAX,CAA2BF,KAA3B;AACA;;AAEDG,EAAAA,MAAM,GAAG;AACR,WAAO,KAAKF,KAAL,CAAWG,QAAlB;AACA;;AAPsB,CADH,CAAtB;;AAYA,SAASC,eAAT,OAaI;AAAA;;AAAA,MAbsB;AACzBC,IAAAA,KADyB;AAEzBC,IAAAA,KAFyB;AAGzBC,IAAAA,OAHyB;AAIzBC,IAAAA,QAJyB;AAKzBC,IAAAA,mBAAmB,GAAGC,YALG;AAMzBC,IAAAA,mBANyB;AAOzBC,IAAAA,IAPyB;AAQzBC,IAAAA,UAAU,GAAG,IARY;AASzBC,IAAAA,SATyB;AAUzBC,IAAAA,QAAQ,GAAG;AACVC,MAAAA,QAAQ,EAAE,cAAI,gBAAJ;AADA;AAVc,GAatB;AACH,QAAMC,aAAa,GAAGV,OAAO,CAACW,IAAR,CAAgBC,MAAF,IAAcA,MAAM,CAACd,KAAP,KAAiBA,KAA7C,CAAtB;AACA,QAAMe,YAAY,2BAAGH,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAEX,KAAlB,uEAA2B,EAA7C;AACA,QAAMe,UAAU,GAAG,4BAAejB,eAAf,CAAnB;AACA,QAAM,CAAEkB,kBAAF,EAAsBC,qBAAtB,IAAgD,uBACrDN,aAAa,IAAI,IADoC,CAAtD;AAGA,QAAM,CAAEO,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAU,KAAV,CAA5C;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,EAAV,CAAtC;AACA,QAAMC,cAAc,GAAG,sBAAvB;AAEA,QAAMC,mBAAmB,GAAG,sBAAS,MAAM;AAC1C,UAAMC,eAAe,GAAG,EAAxB;AACA,UAAMC,aAAa,GAAG,EAAtB;AACA,UAAMC,KAAK,GAAG,oBAAQN,UAAU,CAACO,iBAAX,EAAR,CAAd;AACA5B,IAAAA,OAAO,CAAC6B,OAAR,CAAmBjB,MAAF,IAAc;AAC9B,YAAMkB,KAAK,GAAG,oBAAQlB,MAAM,CAACb,KAAf,EACZ6B,iBADY,GAEZG,OAFY,CAEHJ,KAFG,CAAd;;AAGA,UAAKG,KAAK,KAAK,CAAf,EAAmB;AAClBL,QAAAA,eAAe,CAACO,IAAhB,CAAsBpB,MAAtB;AACA,OAFD,MAEO,IAAKkB,KAAK,GAAG,CAAb,EAAiB;AACvBJ,QAAAA,aAAa,CAACM,IAAd,CAAoBpB,MAApB;AACA;AACD,KATD;AAWA,WAAOa,eAAe,CAACQ,MAAhB,CAAwBP,aAAxB,CAAP;AACA,GAhB2B,EAgBzB,CAAEL,UAAF,EAAcrB,OAAd,EAAuBF,KAAvB,CAhByB,CAA5B;;AAkBA,QAAMoC,oBAAoB,GAAKC,qBAAF,IAA6B;AACzDlC,IAAAA,QAAQ,CAAEkC,qBAAqB,CAACrC,KAAxB,CAAR;AACA,qBAAOU,QAAQ,CAACC,QAAhB,EAA0B,WAA1B;AACAO,IAAAA,qBAAqB,CAAEmB,qBAAF,CAArB;AACAb,IAAAA,aAAa,CAAE,EAAF,CAAb;AACAJ,IAAAA,aAAa,CAAE,KAAF,CAAb;AACA,GAND;;AAQA,QAAMkB,qBAAqB,GAAG,YAAkB;AAAA,QAAhBC,MAAgB,uEAAP,CAAO;AAC/C,UAAMP,KAAK,GAAGN,mBAAmB,CAACO,OAApB,CAA6BhB,kBAA7B,CAAd;AACA,QAAIuB,SAAS,GAAGR,KAAK,GAAGO,MAAxB;;AACA,QAAKC,SAAS,GAAG,CAAjB,EAAqB;AACpBA,MAAAA,SAAS,GAAGd,mBAAmB,CAACe,MAApB,GAA6B,CAAzC;AACA,KAFD,MAEO,IAAKD,SAAS,IAAId,mBAAmB,CAACe,MAAtC,EAA+C;AACrDD,MAAAA,SAAS,GAAG,CAAZ;AACA;;AACDtB,IAAAA,qBAAqB,CAAEQ,mBAAmB,CAAEc,SAAF,CAArB,CAArB;AACApB,IAAAA,aAAa,CAAE,IAAF,CAAb;AACA,GAVD;;AAYA,QAAMsB,SAAS,GAAKhD,KAAF,IAAa;AAC9B,QAAIiD,cAAc,GAAG,KAArB;;AAEA,QAAKjD,KAAK,CAACkD,gBAAX,EAA8B;AAC7B;AACA;;AAED,YAASlD,KAAK,CAACmD,OAAf;AACC,WAAKC,eAAL;AACC,YAAK7B,kBAAL,EAA0B;AACzBmB,UAAAA,oBAAoB,CAAEnB,kBAAF,CAApB;AACA0B,UAAAA,cAAc,GAAG,IAAjB;AACA;;AACD;;AACD,WAAKI,YAAL;AACCT,QAAAA,qBAAqB,CAAE,CAAC,CAAH,CAArB;AACAK,QAAAA,cAAc,GAAG,IAAjB;AACA;;AACD,WAAKK,cAAL;AACCV,QAAAA,qBAAqB,CAAE,CAAF,CAArB;AACAK,QAAAA,cAAc,GAAG,IAAjB;AACA;;AACD,WAAKM,gBAAL;AACC7B,QAAAA,aAAa,CAAE,KAAF,CAAb;AACAF,QAAAA,qBAAqB,CAAE,IAAF,CAArB;AACAyB,QAAAA,cAAc,GAAG,IAAjB;AACA;;AACD;AACC;AArBF;;AAwBA,QAAKA,cAAL,EAAsB;AACrBjD,MAAAA,KAAK,CAACiD,cAAN;AACA;AACD,GAlCD;;AAoCA,QAAMO,MAAM,GAAG,MAAM;AACpB5B,IAAAA,gBAAgB,CAAE,KAAF,CAAhB;AACA,GAFD;;AAIA,QAAM6B,OAAO,GAAG,MAAM;AACrB7B,IAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACAF,IAAAA,aAAa,CAAE,IAAF,CAAb;AACAhB,IAAAA,mBAAmB,CAAE,EAAF,CAAnB;AACAoB,IAAAA,aAAa,CAAE,EAAF,CAAb;AACA,GALD;;AAOA,QAAM5B,cAAc,GAAG,MAAM;AAC5BwB,IAAAA,aAAa,CAAE,KAAF,CAAb;AACA,GAFD;;AAIA,QAAMgC,aAAa,GAAK1D,KAAF,IAAa;AAClC,UAAM2D,IAAI,GAAG3D,KAAK,CAACM,KAAnB;AACAwB,IAAAA,aAAa,CAAE6B,IAAF,CAAb;AACAjD,IAAAA,mBAAmB,CAAEiD,IAAF,CAAnB;;AACA,QAAKhC,aAAL,EAAqB;AACpBD,MAAAA,aAAa,CAAE,IAAF,CAAb;AACA;AACD,GAPD;;AASA,QAAMkC,aAAa,GAAG,MAAM;AAC3BnD,IAAAA,QAAQ,CAAE,IAAF,CAAR;AACAsB,IAAAA,cAAc,CAAC8B,OAAf,CAAuBC,KAAvB,CAA6BC,KAA7B;AACA,GAHD,CA9GG,CAmHH;;;AACA,0BAAW,MAAM;AAChB,UAAMC,sBAAsB,GAAGhC,mBAAmB,CAACe,MAApB,GAA6B,CAA5D;AACA,UAAMkB,8BAA8B,GACnCjC,mBAAmB,CAACO,OAApB,CAA6BhB,kBAA7B,IAAoD,CADrD;;AAGA,QAAKyC,sBAAsB,IAAI,CAAEC,8BAAjC,EAAkE;AACjE;AACAzC,MAAAA,qBAAqB,CAAEQ,mBAAmB,CAAE,CAAF,CAArB,CAArB;AACA;AACD,GATD,EASG,CAAEA,mBAAF,EAAuBT,kBAAvB,CATH,EApHG,CA+HH;;AACA,0BAAW,MAAM;AAChB,UAAMyC,sBAAsB,GAAGhC,mBAAmB,CAACe,MAApB,GAA6B,CAA5D;;AACA,QAAKtB,UAAL,EAAkB;AACjB,YAAMyC,OAAO,GAAGF,sBAAsB,GACnC;AACA;AACA,oBACC,0DADD,EAEC,2DAFD,EAGChC,mBAAmB,CAACe,MAHrB,CAFA,EAOAf,mBAAmB,CAACe,MAPpB,CADmC,GAUnC,cAAI,aAAJ,CAVH;AAYA,uBAAOmB,OAAP,EAAgB,QAAhB;AACA;AACD,GAjBD,EAiBG,CAAElC,mBAAF,EAAuBP,UAAvB,CAjBH,EAhIG,CAmJH;AACA;AACA;;AACA;;AACA,SACC,4BAAC,aAAD;AAAe,IAAA,cAAc,EAAGvB;AAAhC,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAG,yBACXa,SADW,EAEX,6BAFW,CADb;AAKC,IAAA,QAAQ,EAAC,IALV;AAMC,IAAA,KAAK,EAAGR,KANT;AAOC,IAAA,EAAE,EAAI,+BAA+Be,UAAY,EAPlD;AAQC,IAAA,mBAAmB,EAAGV,mBARvB;AASC,IAAA,IAAI,EAAGC;AATR,KAWC;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,QAAQ,EAAC,IAFV;AAGC,IAAA,SAAS,EAAGmC;AAHb,KAKC,4BAAC,UAAD,QACC,4BAAC,eAAD,QACC,4BAAC,mBAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,UAAU,EAAG1B,UAFd;AAGC,IAAA,GAAG,EAAGS,cAHP;AAIC,IAAA,KAAK,EAAGN,UAAU,GAAGI,UAAH,GAAgBR,YAJnC;AAKC,kBACCA,YAAY,GACR,GAAGA,YAAc,KAAKd,KAAO,EADrB,GAET,IARL;AAUC,IAAA,OAAO,EAAGkD,OAVX;AAWC,IAAA,MAAM,EAAGD,MAXV;AAYC,IAAA,UAAU,EAAG/B,UAZd;AAaC,IAAA,uBAAuB,EAAGO,mBAAmB,CAACO,OAApB,CACzBhB,kBADyB,CAb3B;AAgBC,IAAA,QAAQ,EAAGmC;AAhBZ,IADD,CADD,EAqBG5C,UAAU,IACX,4BAAC,cAAD,QACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,IAAI,EAAGqD,iBAFR;AAGC,IAAA,QAAQ,EAAG,CAAE7D,KAHd;AAIC,IAAA,OAAO,EAAGsD,aAJX;AAKC,IAAA,KAAK,EAAG,cAAI,OAAJ;AALT,IADD,CAtBF,CALD,EAsCGnC,UAAU,IACX,4BAAC,wBAAD;AACC,IAAA,UAAU,EAAGH,UADd;AAEC,IAAA,KAAK,EAAG;AAAEf,MAAAA,KAAK,EAAEsB;AAAT,KAFT;AAGC,IAAA,gBAAgB,EAAKuC,UAAF,IAClBA,UAAU,CAAC7D,KAJb;AAMC,IAAA,WAAW,EAAGyB,mBANf;AAOC,IAAA,aAAa,EAAGA,mBAAmB,CAACO,OAApB,CACfhB,kBADe,CAPjB;AAUC,IAAA,OAAO,EAAGC,qBAVX;AAWC,IAAA,QAAQ,EAAGkB,oBAXZ;AAYC,IAAA,cAAc;AAZf,IAvCF,CAXD,CADD,CADD;AAuEA;AACA;;eAEcrC,e","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, deburr } from 'lodash';\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { Flex, FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component {\n\t\thandleFocusOutside( event ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nfunction ComboboxControl( {\n\tvalue,\n\tlabel,\n\toptions,\n\tonChange,\n\tonFilterValueChange = noop,\n\thideLabelFromVision,\n\thelp,\n\tallowReset = true,\n\tclassName,\n\tmessages = {\n\t\tselected: __( 'Item selected.' ),\n\t},\n} ) {\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\tconst instanceId = useInstanceId( ComboboxControl );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption || null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef();\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch = [];\n\t\tconst containsMatch = [];\n\t\tconst match = deburr( inputValue.toLocaleLowerCase() );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = deburr( option.label )\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options, value ] );\n\n\tconst onSuggestionSelected = ( newSelectedSuggestion ) => {\n\t\tonChange( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = matchingSuggestions.indexOf( selectedSuggestion );\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown = ( event ) => {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase ENTER:\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase UP:\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase DOWN:\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase ESCAPE:\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( null );\n\t\tinputContainer.current.input.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tmatchingSuggestions.indexOf( selectedSuggestion ) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t  )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<Flex>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcurrentLabel\n\t\t\t\t\t\t\t\t\t\t? `${ currentLabel }, ${ label }`\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tmatch={ { label: inputValue } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"]}

package/build/custom-gradient-bar/constants.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_ABSOLUTE_LEFT_POSITION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = exports.COLOR_POPOVER_PROPS = void 0;
+exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.MINIMUM_ABSOLUTE_LEFT_POSITION = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = exports.COLOR_POPOVER_PROPS = void 0;
 const COLOR_POPOVER_PROPS = {
   className: 'components-custom-gradient-picker__color-picker-popover',
   position: 'top'
 };
 exports.COLOR_POPOVER_PROPS = COLOR_POPOVER_PROPS;
-const GRADIENT_MARKERS_WIDTH = 18;
+const GRADIENT_MARKERS_WIDTH = 16;
 exports.GRADIENT_MARKERS_WIDTH = GRADIENT_MARKERS_WIDTH;
-const INSERT_POINT_WIDTH = 23;
+const INSERT_POINT_WIDTH = 16;
 exports.INSERT_POINT_WIDTH = INSERT_POINT_WIDTH;
 const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;
 exports.MINIMUM_ABSOLUTE_LEFT_POSITION = MINIMUM_ABSOLUTE_LEFT_POSITION;

package/build/custom-gradient-bar/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["COLOR_POPOVER_PROPS","className","position","GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG;AAClCC,EAAAA,SAAS,EAAE,yDADuB;AAElCC,EAAAA,QAAQ,EAAE;AAFwB,CAA5B;;AAKA,MAAMC,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,8BAA8B,GAAG,CAAvC;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAAGH,2CAAzC;;AACA,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const COLOR_POPOVER_PROPS = {\n\tclassName: 'components-custom-gradient-picker__color-picker-popover',\n\tposition: 'top',\n};\n\nexport const GRADIENT_MARKERS_WIDTH = 18;\nexport const INSERT_POINT_WIDTH = 23;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["COLOR_POPOVER_PROPS","className","position","GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG;AAClCC,EAAAA,SAAS,EAAE,yDADuB;AAElCC,EAAAA,QAAQ,EAAE;AAFwB,CAA5B;;AAKA,MAAMC,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,8BAA8B,GAAG,CAAvC;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAAGH,2CAAzC;;AACA,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const COLOR_POPOVER_PROPS = {\n\tclassName: 'components-custom-gradient-picker__color-picker-popover',\n\tposition: 'top',\n};\n\nexport const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}

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

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _colord = require("colord");
+
 var _compose = require("@wordpress/compose");
 
 var _i18n = require("@wordpress/i18n");
@@ -23,7 +25,7 @@ var _keycodes = require("@wordpress/keycodes");
 
 var _button = _interopRequireDefault(require("../button"));
 
-var _colorPicker = _interopRequireDefault(require("../color-picker"));
+var _colorPicker = require("../color-picker");
 
 var _dropdown = _interopRequireDefault(require("../dropdown"));
 
@@ -44,12 +46,13 @@ var _constants = require("./constants");
 /**
  * Internal dependencies
  */
-function ControlPointButton({
-  isOpen,
-  position,
-  color,
-  ...additionalProps
-}) {
+function ControlPointButton(_ref) {
+  let {
+    isOpen,
+    position,
+    color,
+    ...additionalProps
+  } = _ref;
   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)({
@@ -69,16 +72,17 @@ function ControlPointButton({
   }, (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.')));
 }
 
-function ControlPoints({
-  disableRemove,
-  disableAlpha,
-  gradientPickerDomRef,
-  ignoreMarkerPosition,
-  value: controlPoints,
-  onChange,
-  onStartControlPointChange,
-  onStopControlPointChange
-}) {
+function ControlPoints(_ref2) {
+  let {
+    disableRemove,
+    disableAlpha,
+    gradientPickerDomRef,
+    ignoreMarkerPosition,
+    value: controlPoints,
+    onChange,
+    onStartControlPointChange,
+    onStopControlPointChange
+  } = _ref2;
   const controlPointMoveState = (0, _element.useRef)();
 
   const onMouseMove = event => {
@@ -115,123 +119,129 @@ function ControlPoints({
     return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(_dropdown.default, {
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: ({
-        isOpen,
-        onToggle
-      }) => (0, _element.createElement)(ControlPointButton, {
-        key: index,
-        onClick: () => {
-          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
-            return;
-          }
-
-          if (isOpen) {
-            onStopControlPointChange();
-          } else {
-            onStartControlPointChange();
-          }
-
-          onToggle();
-        },
-        onMouseDown: () => {
-          if (window && window.addEventListener) {
-            controlPointMoveState.current = {
-              initialPosition,
-              index,
-              significantMoveHappened: false,
-              listenersActivated: true
-            };
-            onStartControlPointChange();
-            window.addEventListener('mousemove', onMouseMove);
-            window.addEventListener('mouseup', cleanEventListeners);
-          }
-        },
-        onKeyDown: event => {
-          if (event.keyCode === _keycodes.LEFT) {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
-          } else if (event.keyCode === _keycodes.RIGHT) {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+      renderToggle: _ref3 => {
+        let {
+          isOpen,
+          onToggle
+        } = _ref3;
+        return (0, _element.createElement)(ControlPointButton, {
+          key: index,
+          onClick: () => {
+            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
+              return;
+            }
+
+            if (isOpen) {
+              onStopControlPointChange();
+            } else {
+              onStartControlPointChange();
+            }
+
+            onToggle();
+          },
+          onMouseDown: () => {
+            if (window && window.addEventListener) {
+              controlPointMoveState.current = {
+                initialPosition,
+                index,
+                significantMoveHappened: false,
+                listenersActivated: true
+              };
+              onStartControlPointChange();
+              window.addEventListener('mousemove', onMouseMove);
+              window.addEventListener('mouseup', cleanEventListeners);
+            }
+          },
+          onKeyDown: event => {
+            if (event.keyCode === _keycodes.LEFT) {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+            } else if (event.keyCode === _keycodes.RIGHT) {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
+            }
+          },
+          isOpen: isOpen,
+          position: point.position,
+          color: point.color
+        });
+      },
+      renderContent: _ref4 => {
+        let {
+          onClose
+        } = _ref4;
+        return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.ColorPicker, {
+          enableAlpha: !disableAlpha,
+          color: point.color,
+          onChange: color => {
+            onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
           }
-        },
-        isOpen: isOpen,
-        position: point.position,
-        color: point.color
-      }),
-      renderContent: ({
-        onClose
-      }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.default, {
-        disableAlpha: disableAlpha,
-        color: point.color,
-        onChangeComplete: ({
-          color
-        }) => {
-          onChange((0, _utils.updateControlPointColor)(controlPoints, index, color.toRgbString()));
-        }
-      }), !disableRemove && (0, _element.createElement)(_button.default, {
-        className: "components-custom-gradient-picker__remove-control-point",
-        onClick: () => {
-          onChange((0, _utils.removeControlPoint)(controlPoints, index));
-          onClose();
-        },
-        variant: "link"
-      }, (0, _i18n.__)('Remove Control Point'))),
+        }), !disableRemove && (0, _element.createElement)(_button.default, {
+          className: "components-custom-gradient-picker__remove-control-point",
+          onClick: () => {
+            onChange((0, _utils.removeControlPoint)(controlPoints, index));
+            onClose();
+          },
+          variant: "link"
+        }, (0, _i18n.__)('Remove Control Point')));
+      },
       popoverProps: _constants.COLOR_POPOVER_PROPS
     });
   });
 }
 
-function InsertPoint({
-  value: controlPoints,
-  onChange,
-  onOpenInserter,
-  onCloseInserter,
-  insertPosition,
-  disableAlpha
-}) {
+function InsertPoint(_ref5) {
+  let {
+    value: controlPoints,
+    onChange,
+    onOpenInserter,
+    onCloseInserter,
+    insertPosition,
+    disableAlpha
+  } = _ref5;
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
   return (0, _element.createElement)(_dropdown.default, {
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _element.createElement)(_button.default, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: () => {
-        if (isOpen) {
-          onCloseInserter();
-        } else {
-          setAlreadyInsertedPoint(false);
-          onOpenInserter();
-        }
+    renderToggle: _ref6 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref6;
+      return (0, _element.createElement)(_button.default, {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onClick: () => {
+          if (isOpen) {
+            onCloseInserter();
+          } else {
+            setAlreadyInsertedPoint(false);
+            onOpenInserter();
+          }
 
-        onToggle();
-      },
-      className: "components-custom-gradient-picker__insert-point",
-      icon: _icons.plus,
-      style: {
-        left: insertPosition !== null ? `${insertPosition}%` : undefined
-      }
-    }),
-    renderContent: () => (0, _element.createElement)(_colorPicker.default, {
-      disableAlpha: disableAlpha,
-      onChangeComplete: ({
-        color
-      }) => {
+          onToggle();
+        },
+        className: "components-custom-gradient-picker__insert-point",
+        icon: _icons.plus,
+        style: {
+          left: insertPosition !== null ? `${insertPosition}%` : undefined
+        }
+      });
+    },
+    renderContent: () => (0, _element.createElement)(_colorPicker.ColorPicker, {
+      enableAlpha: !disableAlpha,
+      onChange: color => {
         if (!alreadyInsertedPoint) {
-          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, color.toRgbString()));
+          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
           setAlreadyInsertedPoint(true);
         } else {
-          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, color.toRgbString()));
+          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
         }
       }
     }),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","GRADIENT_MARKERS_WIDTH","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","LEFT","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","RIGHT","onClose","toRgbString","COLOR_POPOVER_PROPS","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPicker from '../color-picker';\nimport Dropdown from '../dropdown';\nimport { VisuallyHidden } from '../visually-hidden';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tCOLOR_POPOVER_PROPS,\n\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\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\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\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 ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\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\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\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// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\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\tKEYBOARD_CONTROL_POINT_VARIATION\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} else if ( event.keyCode === RIGHT ) {\n\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// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\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\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChangeComplete={ ( { color } ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolor.toRgbString()\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/>\n\t\t\t\t\t\t\t{ ! disableRemove && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\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)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\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\tpopoverProps={ COLOR_POPOVER_PROPS }\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} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<Dropdown\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\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tonChangeComplete={ ( { 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\tcolor.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\tcolor.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\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","GRADIENT_MARKERS_WIDTH","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","LEFT","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","RIGHT","onClose","toRgbString","COLOR_POPOVER_PROPS","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"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 } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport Dropdown from '../dropdown';\nimport { VisuallyHidden } from '../visually-hidden';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tCOLOR_POPOVER_PROPS,\n\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\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\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\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 ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\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\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\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} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\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// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\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\tKEYBOARD_CONTROL_POINT_VARIATION\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} else if ( event.keyCode === RIGHT ) {\n\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// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\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\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\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/>\n\t\t\t\t\t\t\t{ ! disableRemove && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\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)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\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\tpopoverProps={ COLOR_POPOVER_PROPS }\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} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<Dropdown\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\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\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\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

package/build/custom-gradient-bar/index.js

@@ -96,23 +96,25 @@ const customGradientBarReducerInitialState = {
   id: 'IDLE'
 };
 
-function CustomGradientBar({
-  background,
-  hasGradient,
-  value: controlPoints,
-  onChange,
-  disableInserter = false,
-  disableAlpha = false
-}) {
+function CustomGradientBar(_ref) {
+  let {
+    background,
+    hasGradient,
+    value: controlPoints,
+    onChange,
+    disableInserter = false,
+    disableAlpha = false
+  } = _ref;
   const gradientPickerDomRef = (0, _element.useRef)();
   const [gradientBarState, gradientBarStateDispatch] = (0, _element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
 
   const onMouseEnterAndMove = event => {
     const insertPosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current, _constants.INSERT_POINT_WIDTH); // If the insert point is close to an existing control point don't show it.
 
-    if ((0, _lodash.some)(controlPoints, ({
-      position
-    }) => {
+    if ((0, _lodash.some)(controlPoints, _ref2 => {
+      let {
+        position
+      } = _ref2;
       return Math.abs(insertPosition - position) < _constants.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
     })) {
       if (gradientBarState.id === 'MOVING_INSERTER') {

package/build/custom-gradient-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","INSERT_POINT_WIDTH","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":";;;;;;;;;AAUA;;AANA;;AACA;;AAUA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AAQA,SAASA,wBAAT,CAAmCC,KAAnC,EAA0CC,MAA1C,EAAmD;AAClD,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,eAAL;AACC,UAAKF,KAAK,CAACG,EAAN,KAAa,MAAb,IAAuBH,KAAK,CAACG,EAAN,KAAa,iBAAzC,EAA6D;AAC5D,eAAO;AACNA,UAAAA,EAAE,EAAE,iBADE;AAENC,UAAAA,cAAc,EAAEH,MAAM,CAACG;AAFjB,SAAP;AAIA;;AACD;;AACD,SAAK,oBAAL;AACC,UAAKJ,KAAK,CAACG,EAAN,KAAa,iBAAlB,EAAsC;AACrC,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,eAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,iBAAlB,EAAsC;AACrC,eAAO;AACNA,UAAAA,EAAE,EAAE,yBADE;AAENC,UAAAA,cAAc,EAAEJ,KAAK,CAACI;AAFhB,SAAP;AAIA;;AACD;;AACD,SAAK,gBAAL;AACC,UAAKJ,KAAK,CAACG,EAAN,KAAa,yBAAlB,EAA8C;AAC7C,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,sBAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,MAAlB,EAA2B;AAC1B,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,qBAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,sBAAlB,EAA2C;AAC1C,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;AA5CF;;AA8CA,SAAOH,KAAP;AACA;;AACD,MAAMK,oCAAoC,GAAG;AAAEF,EAAAA,EAAE,EAAE;AAAN,CAA7C;;AAEe,SAASG,iBAAT,CAA4B;AAC1CC,EAAAA,UAD0C;AAE1CC,EAAAA,WAF0C;AAG1CC,EAAAA,KAAK,EAAEC,aAHmC;AAI1CC,EAAAA,QAJ0C;AAK1CC,EAAAA,eAAe,GAAG,KALwB;AAM1CC,EAAAA,YAAY,GAAG;AAN2B,CAA5B,EAOX;AACH,QAAMC,oBAAoB,GAAG,sBAA7B;AAEA,QAAM,CAAEC,gBAAF,EAAoBC,wBAApB,IAAiD,yBACtDjB,wBADsD,EAEtDM,oCAFsD,CAAvD;;AAIA,QAAMY,mBAAmB,GAAKC,KAAF,IAAa;AACxC,UAAMd,cAAc,GAAG,kDACtBc,KAAK,CAACC,OADgB,EAEtBL,oBAAoB,CAACM,OAFC,EAGtBC,6BAHsB,CAAvB,CADwC,CAOxC;;AACA,QACC,kBAAMX,aAAN,EAAqB,CAAE;AAAEY,MAAAA;AAAF,KAAF,KAAoB;AACxC,aACCC,IAAI,CAACC,GAAL,CAAUpB,cAAc,GAAGkB,QAA3B,IACAG,sDAFD;AAIA,KALD,CADD,EAOE;AACD,UAAKV,gBAAgB,CAACZ,EAAjB,KAAwB,iBAA7B,EAAiD;AAChDa,QAAAA,wBAAwB,CAAE;AAAEd,UAAAA,IAAI,EAAE;AAAR,SAAF,CAAxB;AACA;;AACD;AACA;;AAEDc,IAAAA,wBAAwB,CAAE;AAAEd,MAAAA,IAAI,EAAE,eAAR;AAAyBE,MAAAA;AAAzB,KAAF,CAAxB;AACA,GAvBD;;AAyBA,QAAMsB,YAAY,GAAG,MAAM;AAC1BV,IAAAA,wBAAwB,CAAE;AAAEd,MAAAA,IAAI,EAAE;AAAR,KAAF,CAAxB;AACA,GAFD;;AAIA,QAAMyB,gBAAgB,GAAGZ,gBAAgB,CAACZ,EAAjB,KAAwB,iBAAjD;AACA,QAAMyB,uBAAuB,GAC5Bb,gBAAgB,CAACZ,EAAjB,KAAwB,yBADzB;AAGA,SACC;AACC,IAAA,GAAG,EAAGW,oBADP;AAEC,IAAA,SAAS,EAAG,yBACX,iDADW,EAEX;AAAE,sBAAgBN;AAAlB,KAFW,CAFb;AAMC,IAAA,YAAY,EAAGS,mBANhB;AAOC,IAAA,WAAW,EAAGA,mBAPf;AAQC,IAAA,KAAK,EAAG;AAAEV,MAAAA;AAAF,KART;AASC,IAAA,YAAY,EAAGmB;AAThB,KAWC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAAEd,eAAF,KACCe,gBAAgB,IAAIC,uBADrB,KAEA,4BAAC,sBAAD,CAAe,WAAf;AACC,IAAA,YAAY,EAAGf,YADhB;AAEC,IAAA,cAAc,EAAGE,gBAAgB,CAACX,cAFnC;AAGC,IAAA,KAAK,EAAGM,aAHT;AAIC,IAAA,QAAQ,EAAGC,QAJZ;AAKC,IAAA,cAAc,EAAG,MAAM;AACtBK,MAAAA,wBAAwB,CAAE;AACzBd,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA,KATF;AAUC,IAAA,eAAe,EAAG,MAAM;AACvBc,MAAAA,wBAAwB,CAAE;AACzBd,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA;AAdF,IAHH,EAoBC,4BAAC,sBAAD;AACC,IAAA,YAAY,EAAGW,YADhB;AAEC,IAAA,aAAa,EAAGD,eAFjB;AAGC,IAAA,oBAAoB,EAAGE,oBAHxB;AAIC,IAAA,oBAAoB,EACnBc,uBAAuB,GACpBb,gBAAgB,CAACX,cADG,GAEpByB,SAPL;AASC,IAAA,KAAK,EAAGnB,aATT;AAUC,IAAA,QAAQ,EAAGC,QAVZ;AAWC,IAAA,yBAAyB,EAAG,MAAM;AACjCK,MAAAA,wBAAwB,CAAE;AACzBd,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA,KAfF;AAgBC,IAAA,wBAAwB,EAAG,MAAM;AAChCc,MAAAA,wBAAwB,CAAE;AACzBd,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA;AApBF,IApBD,CAXD,CADD;AAyDA","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\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<ControlPoints\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","INSERT_POINT_WIDTH","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\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<ControlPoints\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}