@wordpress/components 19.15.0 → 20.0.0

package/build/combobox-control/index.js

@@ -11,14 +11,10 @@ var _element = require("@wordpress/element");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _removeAccents = _interopRequireDefault(require("remove-accents"));
-
 var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
 
-var _keycodes = require("@wordpress/keycodes");
-
 var _a11y = require("@wordpress/a11y");
 
 var _icons = require("@wordpress/icons");
@@ -37,6 +33,10 @@ var _flex = require("../flex");
 
 var _withFocusOutside = _interopRequireDefault(require("../higher-order/with-focus-outside"));
 
+var _hooks = require("../utils/hooks");
+
+var _strings = require("../utils/strings");
+
 /**
  * External dependencies
  */
@@ -65,11 +65,13 @@ function ComboboxControl(_ref) {
   var _currentOption$label;
 
   let {
+    /** Start opting into the new margin-free styles that will become the default in a future version. */
+    __nextHasNoMarginBottom = false,
     __next36pxDefaultSize,
-    value,
+    value: valueProp,
     label,
     options,
-    onChange,
+    onChange: onChangeProp,
     onFilterValueChange = noop,
     hideLabelFromVision,
     help,
@@ -77,8 +79,13 @@ function ComboboxControl(_ref) {
     className,
     messages = {
       selected: (0, _i18n.__)('Item selected.')
-    }
+    },
+    __experimentalRenderItem
   } = _ref;
+  const [value, setValue] = (0, _hooks.useControlledValue)({
+    value: valueProp,
+    onChange: onChangeProp
+  });
   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 : ''; // Use a custom prefix when generating the `instanceId` to avoid having
   // duplicate input IDs when rendering this component and `FormTokenField`
@@ -93,9 +100,9 @@ function ComboboxControl(_ref) {
   const matchingSuggestions = (0, _element.useMemo)(() => {
     const startsWithMatch = [];
     const containsMatch = [];
-    const match = (0, _removeAccents.default)(inputValue.toLocaleLowerCase());
+    const match = (0, _strings.normalizeTextString)(inputValue);
     options.forEach(option => {
-      const index = (0, _removeAccents.default)(option.label).toLocaleLowerCase().indexOf(match);
+      const index = (0, _strings.normalizeTextString)(option.label).indexOf(match);
 
       if (index === 0) {
         startsWithMatch.push(option);
@@ -107,7 +114,7 @@ function ComboboxControl(_ref) {
   }, [inputValue, options, value]);
 
   const onSuggestionSelected = newSelectedSuggestion => {
-    onChange(newSelectedSuggestion.value);
+    setValue(newSelectedSuggestion.value);
     (0, _a11y.speak)(messages.selected, 'assertive');
     setSelectedSuggestion(newSelectedSuggestion);
     setInputValue('');
@@ -136,8 +143,8 @@ function ComboboxControl(_ref) {
       return;
     }
 
-    switch (event.keyCode) {
-      case _keycodes.ENTER:
+    switch (event.code) {
+      case 'Enter':
         if (selectedSuggestion) {
           onSuggestionSelected(selectedSuggestion);
           preventDefault = true;
@@ -145,17 +152,17 @@ function ComboboxControl(_ref) {
 
         break;
 
-      case _keycodes.UP:
+      case 'ArrowUp':
         handleArrowNavigation(-1);
         preventDefault = true;
         break;
 
-      case _keycodes.DOWN:
+      case 'ArrowDown':
         handleArrowNavigation(1);
         preventDefault = true;
         break;
 
-      case _keycodes.ESCAPE:
+      case 'Escape':
         setIsExpanded(false);
         setSelectedSuggestion(null);
         preventDefault = true;
@@ -196,7 +203,7 @@ function ComboboxControl(_ref) {
   };
 
   const handleOnReset = () => {
-    onChange(null);
+    setValue(null);
     inputContainer.current.focus();
   }; // Update current selections when the filter input changes.
 
@@ -229,6 +236,7 @@ function ComboboxControl(_ref) {
   return (0, _element.createElement)(DetectOutside, {
     onFocusOutside: onFocusOutside
   }, (0, _element.createElement)(_baseControl.default, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: (0, _classnames.default)(className, 'components-combobox-control'),
     tabIndex: "-1",
     label: label,
@@ -268,7 +276,8 @@ function ComboboxControl(_ref) {
     selectedIndex: matchingSuggestions.indexOf(selectedSuggestion),
     onHover: setSelectedSuggestion,
     onSelect: onSuggestionSelected,
-    scrollIntoView: true
+    scrollIntoView: true,
+    __experimentalRenderItem: __experimentalRenderItem
   }))));
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/combobox-control/index.js"],"names":["noop","DetectOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","__next36pxDefaultSize","value","label","options","onChange","onFilterValueChange","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","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","closeSmall","suggestion"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport removeAccents from 'remove-accents';\n\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 { InputWrapperFlex } from './styles';\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 { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\n\nconst noop = () => {};\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\t__next36pxDefaultSize,\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\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\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 = removeAccents( inputValue.toLocaleLowerCase() );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = removeAccents( 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.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<InputWrapperFlex\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t>\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</InputWrapperFlex>\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":["noop","DetectOutside","Component","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","__nextHasNoMarginBottom","__next36pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","setValue","currentOption","find","option","currentLabel","instanceId","selectedSuggestion","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","matchingSuggestions","startsWithMatch","containsMatch","match","forEach","index","indexOf","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","closeSmall","suggestion"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\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 { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { InputWrapperFlex } from './styles';\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 { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\n\nconst noop = () => {};\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\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\t__next36pxDefaultSize,\n\tvalue: valueProp,\n\tlabel,\n\toptions,\n\tonChange: onChangeProp,\n\tonFilterValueChange = noop,\n\thideLabelFromVision,\n\thelp,\n\tallowReset = true,\n\tclassName,\n\tmessages = {\n\t\tselected: __( 'Item selected.' ),\n\t},\n\t__experimentalRenderItem,\n} ) {\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\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 = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).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\tsetValue( 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.code ) {\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 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\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\tsetValue( null );\n\t\tinputContainer.current.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\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\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<InputWrapperFlex\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t>\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</InputWrapperFlex>\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\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\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</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-picker/gradient-bar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.js"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","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,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAC5CH,2CADM;;AAEA,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\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 =\n\tMINIMUM_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 → custom-gradient-picker/gradient-bar}/control-points.js

@@ -21,15 +21,15 @@ var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _keycodes = require("@wordpress/keycodes");
+var _button = _interopRequireDefault(require("../../button"));
 
-var _button = _interopRequireDefault(require("../button"));
+var _hStack = require("../../h-stack");
 
-var _colorPicker = require("../color-picker");
+var _colorPicker = require("../../color-picker");
 
-var _visuallyHidden = require("../visually-hidden");
+var _visuallyHidden = require("../../visually-hidden");
 
-var _colorPalette = require("../color-palette");
+var _colorPalette = require("../../color-palette");
 
 var _utils = require("./utils");
 
@@ -63,11 +63,7 @@ function ControlPointButton(_ref) {
     "aria-expanded": isOpen,
     className: (0, _classnames.default)('components-custom-gradient-picker__control-point-button', {
       'is-active': isOpen
-    }),
-    style: {
-      left: `${position}%`,
-      transform: 'translateX( -50% )'
-    }
+    })
   }, 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.')));
@@ -76,25 +72,19 @@ function ControlPointButton(_ref) {
 function GradientColorPickerDropdown(_ref2) {
   let {
     isRenderedInSidebar,
-    gradientPickerDomRef,
+    className,
     ...props
   } = _ref2;
-  const popoverProps = (0, _element.useMemo)(() => {
-    const result = {
-      className: 'components-custom-gradient-picker__color-picker-popover',
-      position: 'top'
-    };
-
-    if (isRenderedInSidebar) {
-      result.anchorRef = gradientPickerDomRef.current;
-      result.position = 'bottom left';
-    }
-
-    return result;
-  }, [gradientPickerDomRef, isRenderedInSidebar]);
+  // Open the popover below the gradient control/insertion point
+  const popoverProps = (0, _element.useMemo)(() => ({
+    placement: 'bottom',
+    offset: 8
+  }), []);
+  const mergedClassName = (0, _classnames.default)('components-custom-gradient-picker__control-point-dropdown', className);
   return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, (0, _extends2.default)({
     isRenderedInSidebar: isRenderedInSidebar,
-    popoverProps: popoverProps
+    popoverProps: popoverProps,
+    className: mergedClassName
   }, props));
 }
 
@@ -149,7 +139,6 @@ function ControlPoints(_ref3) {
   return controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
     return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(GradientColorPickerDropdown, {
-      gradientPickerDomRef: gradientPickerDomRef,
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
@@ -187,12 +176,12 @@ function ControlPoints(_ref3) {
             }
           },
           onKeyDown: event => {
-            if (event.keyCode === _keycodes.LEFT) {
+            if (event.code === 'ArrowLeft') {
               // 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) {
+            } else if (event.code === 'ArrowRight') {
               // Stop propagation of the key press event to avoid focus moving
               // to another editor area.
               event.stopPropagation();
@@ -214,14 +203,20 @@ function ControlPoints(_ref3) {
           onChange: color => {
             onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
           }
-        }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_button.default, {
-          className: "components-custom-gradient-picker__remove-control-point",
+        }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_hStack.HStack, {
+          className: "components-custom-gradient-picker__remove-control-point-wrapper",
+          alignment: "center"
+        }, (0, _element.createElement)(_button.default, {
           onClick: () => {
             onChange((0, _utils.removeControlPoint)(controlPoints, index));
             onClose();
           },
           variant: "link"
-        }, (0, _i18n.__)('Remove Control Point')));
+        }, (0, _i18n.__)('Remove Control Point'))));
+      },
+      style: {
+        left: `${point.position}%`,
+        transform: 'translateX( -50% )'
       }
     });
   });
@@ -235,12 +230,10 @@ function InsertPoint(_ref6) {
     onCloseInserter,
     insertPosition,
     disableAlpha,
-    __experimentalIsRenderedInSidebar,
-    gradientPickerDomRef
+    __experimentalIsRenderedInSidebar
   } = _ref6;
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
   return (0, _element.createElement)(GradientColorPickerDropdown, {
-    gradientPickerDomRef: gradientPickerDomRef,
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
@@ -264,12 +257,8 @@ function InsertPoint(_ref6) {
 
           onToggle();
         },
-        className: "components-custom-gradient-picker__insert-point",
-        icon: _icons.plus,
-        style: insertPosition !== null ? {
-          left: `${insertPosition}%`,
-          transform: 'translateX( -50% )'
-        } : undefined
+        className: "components-custom-gradient-picker__insert-point-dropdown",
+        icon: _icons.plus
       });
     },
     renderContent: () => (0, _element.createElement)(_colorPicker.ColorPicker, {
@@ -282,7 +271,11 @@ function InsertPoint(_ref6) {
           onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
         }
       }
-    })
+    }),
+    style: insertPosition !== null ? {
+      left: `${insertPosition}%`,
+      transform: 'translateX( -50% )'
+    } : undefined
   });
 }
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.js"],"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","relativePosition","clientX","current","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","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, 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';\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\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} ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tplacement: 'bottom',\n\t\t\toffset: 8,\n\t\t} ),\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} ) {\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);\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.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\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();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current();\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<GradientColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\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.code === 'ArrowLeft' ) {\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.code === 'ArrowRight' ) {\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 && controlPoints.length > 2 && (\n\t\t\t\t\t\t\t\t<HStack\n\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\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\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\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)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</HStack>\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\tstyle={ {\n\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\ttransform: 'translateX( -50% )',\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} ) {\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-gradient-bar → custom-gradient-picker/gradient-bar}/index.js

@@ -156,7 +156,6 @@ function CustomGradientBar(_ref) {
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    gradientPickerDomRef: gradientMarkersContainerDomRef,
     disableAlpha: disableAlpha,
     insertPosition: gradientBarState.insertPosition,
     value: controlPoints,

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","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 { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } 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\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientMarkersContainerDomRef = 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\tgradientMarkersContainerDomRef.current\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\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\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\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\t__experimentalIsRenderedInSidebar={\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\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\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\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"]}

package/build/custom-gradient-picker/gradient-bar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.js"],"names":["clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","MINIMUM_DISTANCE_BETWEEN_POINTS","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\n\n/**\n * Control point for the gradient bar.\n *\n * @typedef {Object} ControlPoint\n * @property {string} color    Color of the control point.\n * @property {number} position Integer position of the control point as a percentage.\n */\n\n/**\n * Color as parsed from the gradient by gradient-parser.\n *\n * @typedef {Object} Color\n * @property {string} r   Red component.\n * @property {string} g   Green component.\n * @property {string} b   Green component.\n * @property {string} [a] Optional alpha component.\n */\n\n/**\n * Clamps a number between 0 and 100.\n *\n * @param {number} value Value to clamp.\n *\n * @return {number} Value clamped between 0 and 100.\n */\nexport function clampPercent( value ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/**\n * Check if a control point is overlapping with another.\n *\n * @param {ControlPoint[]} value        Array of control points.\n * @param {number}         initialIndex Index of the position to test.\n * @param {number}         newPosition  New position of the control point.\n * @param {number}         minDistance  Distance considered to be overlapping.\n *\n * @return {boolean} True if the point is overlapping.\n */\nexport function isOverlapping(\n\tvalue,\n\tinitialIndex,\n\tnewPosition,\n\tminDistance = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance ||\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/**\n * Adds a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points   Array of control points.\n * @param {number}         position Position to insert the new point.\n * @param {Color}          color    Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function addControlPoint( points, position, color ) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/**\n * Removes a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points Array of control points.\n * @param {number}         index  Index to remove.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function removeControlPoint( points, index ) {\n\treturn points.filter( ( point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points   Array of control points.\n * @param {number}         index    Index to update.\n * @param {ControlPoint[]} newPoint New control point to replace the index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPoint( points, index, newPoint ) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points      Array of control points.\n * @param {number}         index       Index to update.\n * @param {number}         newPosition Position to move the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointPosition( points, index, newPosition ) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points   Array of control points.\n * @param {number}         index    Index to update.\n * @param {Color}          newColor Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointColor( points, index, newColor ) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/**\n * Updates the position of a control point from an array and returns the new array.\n *\n * @param {ControlPoint[]} points   Array of control points.\n * @param {number}         position Position of the color stop.\n * @param {string}         newColor Color to update the control point at index.\n *\n * @return {ControlPoint[]} New array of control points.\n */\nexport function updateControlPointColorByPosition(\n\tpoints,\n\tposition,\n\tnewColor\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/**\n * Gets the horizontal coordinate when dragging a control point with the mouse.\n *\n * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.\n * @param {Element} containerElement Container for the gradient picker.\n *\n * @return {number} Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate,\n\tcontainerElement\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue * 100 ) / width )\n\t);\n}\n"]}

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

@@ -9,16 +9,20 @@ exports.default = CustomGradientPicker;
 
 var _element = require("@wordpress/element");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _anglePickerControl = _interopRequireDefault(require("../angle-picker-control"));
 
-var _customGradientBar = _interopRequireDefault(require("../custom-gradient-bar"));
+var _gradientBar = _interopRequireDefault(require("./gradient-bar"));
 
 var _flex = require("../flex");
 
 var _selectControl = _interopRequireDefault(require("../select-control"));
 
+var _vStack = require("../v-stack");
+
 var _utils = require("./utils");
 
 var _serializer = require("./serializer");
@@ -27,6 +31,10 @@ var _constants = require("./constants");
 
 var _customGradientPickerStyles = require("./styles/custom-gradient-picker-styles");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -54,6 +62,7 @@ const GradientAnglePicker = _ref => {
   };
 
   return (0, _element.createElement)(_anglePickerControl.default, {
+    __nextHasNoMarginBottom: true,
     onChange: onAngleChange,
     labelPosition: "top",
     value: hasGradient ? angle : ''
@@ -100,6 +109,7 @@ const GradientTypePicker = _ref2 => {
   };
 
   return (0, _element.createElement)(_selectControl.default, {
+    __nextHasNoMarginBottom: true,
     className: "components-custom-gradient-picker__type-picker",
     label: (0, _i18n.__)('Type'),
     labelPosition: "top",
@@ -112,6 +122,8 @@ const GradientTypePicker = _ref2 => {
 
 function CustomGradientPicker(_ref3) {
   let {
+    /** Start opting into the new margin-free styles that will become the default in a future version. */
+    __nextHasNoMargin = false,
     value,
     onChange,
     __experimentalIsRenderedInSidebar
@@ -128,9 +140,12 @@ function CustomGradientPicker(_ref3) {
     color: (0, _utils.getStopCssColor)(colorStop),
     position: parseInt(colorStop.length.value)
   }));
-  return (0, _element.createElement)("div", {
-    className: "components-custom-gradient-picker"
-  }, (0, _element.createElement)(_customGradientBar.default, {
+  return (0, _element.createElement)(_vStack.VStack, {
+    spacing: 5,
+    className: (0, _classnames.default)('components-custom-gradient-picker', {
+      'is-next-has-no-margin': __nextHasNoMargin
+    })
+  }, (0, _element.createElement)(_gradientBar.default, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,
     hasGradient: hasGradient,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 5 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n"]}