@wordpress/components 17.0.0 → 19.0.2

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

@@ -5,6 +5,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
+import { colord } from 'colord';
 /**
  * WordPress dependencies
  */
@@ -19,18 +20,19 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  */
 
 import Button from '../button';
-import ColorPicker from '../color-picker';
+import { ColorPicker } from '../color-picker';
 import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
 import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
 import { COLOR_POPOVER_PROPS, GRADIENT_MARKERS_WIDTH, MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
 
-function ControlPointButton({
-  isOpen,
-  position,
-  color,
-  ...additionalProps
-}) {
+function ControlPointButton(_ref) {
+  let {
+    isOpen,
+    position,
+    color,
+    ...additionalProps
+  } = _ref;
   const instanceId = useInstanceId(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
   return createElement(Fragment, null, createElement(Button, _extends({
@@ -50,16 +52,17 @@ function ControlPointButton({
   }, __('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 = useRef();
 
   const onMouseMove = event => {
@@ -96,123 +99,129 @@ function ControlPoints({
     return ignoreMarkerPosition !== initialPosition && createElement(Dropdown, {
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: ({
-        isOpen,
-        onToggle
-      }) => createElement(ControlPointButton, {
-        key: index,
-        onClick: () => {
-          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
-            return;
-          }
+      renderToggle: _ref3 => {
+        let {
+          isOpen,
+          onToggle
+        } = _ref3;
+        return createElement(ControlPointButton, {
+          key: index,
+          onClick: () => {
+            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
+              return;
+            }
 
-          if (isOpen) {
-            onStopControlPointChange();
-          } else {
-            onStartControlPointChange();
-          }
+            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 === LEFT) {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
-          } else if (event.keyCode === RIGHT) {
-            // Stop propagation of the key press event to avoid focus moving
-            // to another editor area.
-            event.stopPropagation();
-            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
+            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 === LEFT) {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
+            } else if (event.keyCode === RIGHT) {
+              // Stop propagation of the key press event to avoid focus moving
+              // to another editor area.
+              event.stopPropagation();
+              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
+            }
+          },
+          isOpen: isOpen,
+          position: point.position,
+          color: point.color
+        });
+      },
+      renderContent: _ref4 => {
+        let {
+          onClose
+        } = _ref4;
+        return createElement(Fragment, null, createElement(ColorPicker, {
+          enableAlpha: !disableAlpha,
+          color: point.color,
+          onChange: color => {
+            onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
           }
-        },
-        isOpen: isOpen,
-        position: point.position,
-        color: point.color
-      }),
-      renderContent: ({
-        onClose
-      }) => createElement(Fragment, null, createElement(ColorPicker, {
-        disableAlpha: disableAlpha,
-        color: point.color,
-        onChangeComplete: ({
-          color
-        }) => {
-          onChange(updateControlPointColor(controlPoints, index, color.toRgbString()));
-        }
-      }), !disableRemove && createElement(Button, {
-        className: "components-custom-gradient-picker__remove-control-point",
-        onClick: () => {
-          onChange(removeControlPoint(controlPoints, index));
-          onClose();
-        },
-        variant: "link"
-      }, __('Remove Control Point'))),
+        }), !disableRemove && createElement(Button, {
+          className: "components-custom-gradient-picker__remove-control-point",
+          onClick: () => {
+            onChange(removeControlPoint(controlPoints, index));
+            onClose();
+          },
+          variant: "link"
+        }, __('Remove Control Point')));
+      },
       popoverProps: 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] = useState(false);
   return createElement(Dropdown, {
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(Button, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: () => {
-        if (isOpen) {
-          onCloseInserter();
-        } else {
-          setAlreadyInsertedPoint(false);
-          onOpenInserter();
-        }
+    renderToggle: _ref6 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref6;
+      return createElement(Button, {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        onClick: () => {
+          if (isOpen) {
+            onCloseInserter();
+          } else {
+            setAlreadyInsertedPoint(false);
+            onOpenInserter();
+          }
 
-        onToggle();
-      },
-      className: "components-custom-gradient-picker__insert-point",
-      icon: plus,
-      style: {
-        left: insertPosition !== null ? `${insertPosition}%` : undefined
-      }
-    }),
+          onToggle();
+        },
+        className: "components-custom-gradient-picker__insert-point",
+        icon: plus,
+        style: {
+          left: insertPosition !== null ? `${insertPosition}%` : undefined
+        }
+      });
+    },
     renderContent: () => createElement(ColorPicker, {
-      disableAlpha: disableAlpha,
-      onChangeComplete: ({
-        color
-      }) => {
+      enableAlpha: !disableAlpha,
+      onChange: color => {
         if (!alreadyInsertedPoint) {
-          onChange(addControlPoint(controlPoints, insertPosition, color.toRgbString()));
+          onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));
           setAlreadyInsertedPoint(true);
         } else {
-          onChange(updateControlPointColorByPosition(controlPoints, insertPosition, color.toRgbString()));
+          onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));
         }
       }
     }),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["classnames","useInstanceId","useEffect","useRef","useState","__","sprintf","plus","LEFT","RIGHT","Button","ColorPicker","Dropdown","VisuallyHidden","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","COLOR_POPOVER_PROPS","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","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":["classnames","colord","useInstanceId","useEffect","useRef","useState","__","sprintf","plus","LEFT","RIGHT","Button","ColorPicker","Dropdown","VisuallyHidden","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","COLOR_POPOVER_PROPS","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","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-module/custom-gradient-bar/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","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"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","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"]}

package/build-module/custom-gradient-bar/utils.js

@@ -42,13 +42,15 @@ export function clampPercent(value) {
  * @return {boolean} True if the point is overlapping.
  */
 
-export function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
+export function isOverlapping(value, initialIndex, newPosition) {
+  let minDistance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MINIMUM_DISTANCE_BETWEEN_POINTS;
   const initialPosition = value[initialIndex].position;
   const minPosition = Math.min(initialPosition, newPosition);
   const maxPosition = Math.max(initialPosition, newPosition);
-  return value.some(({
-    position
-  }, index) => {
+  return value.some((_ref, index) => {
+    let {
+      position
+    } = _ref;
     return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/utils.js"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_ABSOLUTE_LEFT_POSITION","INSERT_POINT_WIDTH","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","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","positionedElementWidth","x","width","getBoundingClientRect","absolutePositionValue","availableWidth","round"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tMINIMUM_DISTANCE_BETWEEN_POINTS,\n\tMINIMUM_ABSOLUTE_LEFT_POSITION,\n\tINSERT_POINT_WIDTH,\n} 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 * @param {number}  positionedElementWidth Width of the positioned element.\n *\n * @return {number} Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate,\n\tcontainerElement,\n\tpositionedElementWidth\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue =\n\t\tmouseXCoordinate -\n\t\tx -\n\t\tMINIMUM_ABSOLUTE_LEFT_POSITION -\n\t\tpositionedElementWidth / 2;\n\tconst availableWidth =\n\t\twidth - MINIMUM_ABSOLUTE_LEFT_POSITION - INSERT_POINT_WIDTH;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue * 100 ) / availableWidth )\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/utils.js"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_ABSOLUTE_LEFT_POSITION","INSERT_POINT_WIDTH","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","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","positionedElementWidth","x","width","getBoundingClientRect","absolutePositionValue","availableWidth","round"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tMINIMUM_DISTANCE_BETWEEN_POINTS,\n\tMINIMUM_ABSOLUTE_LEFT_POSITION,\n\tINSERT_POINT_WIDTH,\n} 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 * @param {number}  positionedElementWidth Width of the positioned element.\n *\n * @return {number} Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate,\n\tcontainerElement,\n\tpositionedElementWidth\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue =\n\t\tmouseXCoordinate -\n\t\tx -\n\t\tMINIMUM_ABSOLUTE_LEFT_POSITION -\n\t\tpositionedElementWidth / 2;\n\tconst availableWidth =\n\t\twidth - MINIMUM_ABSOLUTE_LEFT_POSITION - INSERT_POINT_WIDTH;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue * 100 ) / availableWidth )\n\t);\n}\n"]}

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

@@ -17,16 +17,17 @@ import AnglePickerControl from '../angle-picker-control';
 import CustomGradientBar from '../custom-gradient-bar';
 import { Flex } from '../flex';
 import SelectControl from '../select-control';
-import { getGradientAstWithDefault, getLinearGradientRepresentationOfARadial, getGradientAstWithControlPoints, getStopCssColor } from './utils';
+import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';
 import { serializeGradient } from './serializer';
 import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS, DEFAULT_GRADIENT } from './constants';
 import { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';
 
-const GradientAnglePicker = ({
-  gradientAST,
-  hasGradient,
-  onChange
-}) => {
+const GradientAnglePicker = _ref => {
+  let {
+    gradientAST,
+    hasGradient,
+    onChange
+  } = _ref;
   const angle = get(gradientAST, ['orientation', 'value'], DEFAULT_LINEAR_GRADIENT_ANGLE);
 
   const onAngleChange = newAngle => {
@@ -39,17 +40,18 @@ const GradientAnglePicker = ({
   };
 
   return createElement(AnglePickerControl, {
-    hideLabelFromVision: true,
     onChange: onAngleChange,
+    labelPosition: "top",
     value: hasGradient ? angle : ''
   });
 };
 
-const GradientTypePicker = ({
-  gradientAST,
-  hasGradient,
-  onChange
-}) => {
+const GradientTypePicker = _ref2 => {
+  let {
+    gradientAST,
+    hasGradient,
+    onChange
+  } = _ref2;
   const {
     type
   } = gradientAST;
@@ -82,21 +84,23 @@ const GradientTypePicker = ({
   return createElement(SelectControl, {
     className: "components-custom-gradient-picker__type-picker",
     label: __('Type'),
-    labelPosition: 'side',
+    labelPosition: "top",
     onChange: handleOnChange,
     options: GRADIENT_OPTIONS,
     value: hasGradient && type
   });
 };
 
-export default function CustomGradientPicker({
-  value,
-  onChange
-}) {
+export default function CustomGradientPicker(_ref3) {
+  let {
+    value,
+    onChange
+  } = _ref3;
   const gradientAST = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient.
   // On radial gradients the bar represents a slice of the gradient from the center until the outside.
+  // On liner gradients the bar represents the color stops from left to right independently of the angle.
 
-  const background = gradientAST.type === 'radial-gradient' ? getLinearGradientRepresentationOfARadial(gradientAST) : gradientAST.value;
+  const background = getLinearGradientRepresentation(gradientAST);
   const hasGradient = gradientAST.value !== DEFAULT_GRADIENT; // Control points color option may be hex from presets, custom colors will be rgb.
   // The position should always be a percentage.