@wordpress/components 25.5.0 → 25.6.0

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

@@ -1,22 +1,21 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
 import { colord } from 'colord';
+
 /**
  * WordPress dependencies
  */
-
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
-
 import Button from '../../button';
 import { HStack } from '../../h-stack';
 import { ColorPicker } from '../../color-picker';
@@ -24,7 +23,6 @@ import { VisuallyHidden } from '../../visually-hidden';
 import { CustomColorPickerDropdown } from '../../color-palette';
 import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
-
 function ControlPointButton({
   isOpen,
   position,
@@ -34,7 +32,8 @@ function ControlPointButton({
   const instanceId = useInstanceId(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
   return createElement(Fragment, null, createElement(Button, {
-    "aria-label": sprintf( // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+    "aria-label": sprintf(
+    // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
     __('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
     "aria-describedby": descriptionId,
     "aria-haspopup": "true",
@@ -47,7 +46,6 @@ function ControlPointButton({
     id: descriptionId
   }, __('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 GradientColorPickerDropdown({
   isRenderedInSidebar,
   className,
@@ -66,7 +64,6 @@ function GradientColorPickerDropdown({
     ...props
   });
 }
-
 function ControlPoints({
   disableRemove,
   disableAlpha,
@@ -79,26 +76,21 @@ function ControlPoints({
   __experimentalIsRenderedInSidebar
 }) {
   const controlPointMoveState = useRef();
-
   const onMouseMove = event => {
     if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
       return;
     }
-
     const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);
     const {
       initialPosition,
       index,
       significantMoveHappened
     } = controlPointMoveState.current;
-
     if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {
       controlPointMoveState.current.significantMoveHappened = true;
     }
-
     onChange(updateControlPointPosition(controlPoints, index, relativePosition));
   };
-
   const cleanEventListeners = () => {
     if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
       window.removeEventListener('mousemove', onMouseMove);
@@ -106,11 +98,11 @@ function ControlPoints({
       onStopControlPointChange();
       controlPointMoveState.current.listenersActivated = false;
     }
-  }; // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
+  };
+
+  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
   // This memoization would prevent the event listeners from being properly cleaned.
   // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
-
-
   const cleanEventListenersRef = useRef();
   cleanEventListenersRef.current = cleanEventListeners;
   useEffect(() => {
@@ -133,13 +125,11 @@ function ControlPoints({
           if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
             return;
           }
-
           if (isOpen) {
             onStopControlPointChange();
           } else {
             onStartControlPointChange();
           }
-
           onToggle();
         },
         onMouseDown: () => {
@@ -197,7 +187,6 @@ function ControlPoints({
     });
   }));
 }
-
 function InsertPoint({
   value: controlPoints,
   onChange,
@@ -227,7 +216,6 @@ function InsertPoint({
           setAlreadyInsertedPoint(false);
           onOpenInserter();
         }
-
         onToggle();
       },
       className: "components-custom-gradient-picker__insert-point-dropdown",
@@ -250,7 +238,6 @@ function InsertPoint({
     } : undefined
   });
 }
-
 ControlPoints.InsertPoint = InsertPoint;
 export default ControlPoints;
 //# sourceMappingURL=control-points.js.map

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

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

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

@@ -1,22 +1,20 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { useRef, useReducer } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
-
 const customGradientBarReducer = (state, action) => {
   switch (action.type) {
     case 'MOVE_INSERTER':
@@ -26,18 +24,14 @@ const customGradientBarReducer = (state, action) => {
           insertPosition: action.insertPosition
         };
       }
-
       break;
-
     case 'STOP_INSERTER_MOVE':
       if (state.id === 'MOVING_INSERTER') {
         return {
           id: 'IDLE'
         };
       }
-
       break;
-
     case 'OPEN_INSERTER':
       if (state.id === 'MOVING_INSERTER') {
         return {
@@ -45,40 +39,31 @@ const customGradientBarReducer = (state, action) => {
           insertPosition: state.insertPosition
         };
       }
-
       break;
-
     case 'CLOSE_INSERTER':
       if (state.id === 'INSERTING_CONTROL_POINT') {
         return {
           id: 'IDLE'
         };
       }
-
       break;
-
     case 'START_CONTROL_CHANGE':
       if (state.id === 'IDLE') {
         return {
           id: 'MOVING_CONTROL_POINT'
         };
       }
-
       break;
-
     case 'STOP_CONTROL_CHANGE':
       if (state.id === 'MOVING_CONTROL_POINT') {
         return {
           id: 'IDLE'
         };
       }
-
       break;
   }
-
   return state;
 };
-
 const customGradientBarReducerInitialState = {
   id: 'IDLE'
 };
@@ -93,14 +78,13 @@ export default function CustomGradientBar({
 }) {
   const gradientMarkersContainerDomRef = useRef(null);
   const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
-
   const onMouseEnterAndMove = event => {
     if (!gradientMarkersContainerDomRef.current) {
       return;
     }
+    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);
 
-    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current); // If the insert point is close to an existing control point don't show it.
-
+    // If the insert point is close to an existing control point don't show it.
     if (controlPoints.some(({
       position
     }) => {
@@ -111,22 +95,18 @@ export default function CustomGradientBar({
           type: 'STOP_INSERTER_MOVE'
         });
       }
-
       return;
     }
-
     gradientBarStateDispatch({
       type: 'MOVE_INSERTER',
       insertPosition
     });
   };
-
   const onMouseLeave = () => {
     gradientBarStateDispatch({
       type: 'STOP_INSERTER_MOVE'
     });
   };
-
   const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
   const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
   return createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.tsx"],"names":["classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","current","clientX","some","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","opacity","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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';\nimport type {\n\tCustomGradientBarProps,\n\tCustomGradientBarReducerState,\n\tCustomGradientBarReducerAction,\n\tCustomGradientBarIdleState,\n} from '../types';\nimport type { MouseEventHandler } from 'react';\n\nconst customGradientBarReducer = (\n\tstate: CustomGradientBarReducerState,\n\taction: CustomGradientBarReducerAction\n): CustomGradientBarReducerState => {\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: CustomGradientBarIdleState = {\n\tid: 'IDLE',\n};\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientBarProps ) {\n\tconst gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tif ( ! gradientMarkersContainerDomRef.current ) {\n\t\t\treturn;\n\t\t}\n\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\tcontrolPoints.some( ( { 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\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"components-custom-gradient-picker__gradient-bar-background\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackground,\n\t\t\t\t\topacity: hasGradient ? 1 : 0.4,\n\t\t\t\t} }\n\t\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"]}
+{"version":3,"names":["classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","current","clientX","some","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","createElement","className","onMouseEnter","onMouseMove","style","opacity","ref","InsertPoint","onOpenInserter","onCloseInserter","disableRemove","gradientPickerDomRef","ignoreMarkerPosition","undefined","onStartControlPointChange","onStopControlPointChange"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\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';\nimport type {\n\tCustomGradientBarProps,\n\tCustomGradientBarReducerState,\n\tCustomGradientBarReducerAction,\n\tCustomGradientBarIdleState,\n} from '../types';\nimport type { MouseEventHandler } from 'react';\n\nconst customGradientBarReducer = (\n\tstate: CustomGradientBarReducerState,\n\taction: CustomGradientBarReducerAction\n): CustomGradientBarReducerState => {\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: CustomGradientBarIdleState = {\n\tid: 'IDLE',\n};\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientBarProps ) {\n\tconst gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tif ( ! gradientMarkersContainerDomRef.current ) {\n\t\t\treturn;\n\t\t}\n\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\tcontrolPoints.some( ( { 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\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"components-custom-gradient-picker__gradient-bar-background\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackground,\n\t\t\t\t\topacity: hasGradient ? 1 : 0.4,\n\t\t\t\t} }\n\t\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"],"mappings":"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"}

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

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-
 /**
  * Clamps a number between 0 and 100.
  *
@@ -13,6 +12,7 @@ import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
 export function clampPercent(value) {
   return Math.max(0, Math.min(100, value));
 }
+
 /**
  * Check if a control point is overlapping with another.
  *
@@ -23,7 +23,6 @@ export function clampPercent(value) {
  *
  * @return True if the point is overlapping.
  */
-
 export function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
   const initialPosition = value[initialIndex].position;
   const minPosition = Math.min(initialPosition, newPosition);
@@ -34,6 +33,7 @@ export function isOverlapping(value, initialIndex, newPosition, minDistance = MI
     return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
   });
 }
+
 /**
  * Adds a control point from an array and returns the new array.
  *
@@ -43,7 +43,6 @@ export function isOverlapping(value, initialIndex, newPosition, minDistance = MI
  *
  * @return New array of control points.
  */
-
 export function addControlPoint(points, position, color) {
   const nextIndex = points.findIndex(point => point.position > position);
   const newPoint = {
@@ -54,6 +53,7 @@ export function addControlPoint(points, position, color) {
   newPoints.splice(nextIndex - 1, 0, newPoint);
   return newPoints;
 }
+
 /**
  * Removes a control point from an array and returns the new array.
  *
@@ -62,7 +62,6 @@ export function addControlPoint(points, position, color) {
  *
  * @return New array of control points.
  */
-
 export function removeControlPoint(points, index) {
   return points.filter((_point, pointIndex) => {
     return pointIndex !== index;
@@ -77,12 +76,12 @@ export function removeControlPoint(points, index) {
  *
  * @return New array of control points.
  */
-
 export function updateControlPoint(points, index, newPoint) {
   const newValue = points.slice();
   newValue[index] = newPoint;
   return newValue;
 }
+
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
@@ -92,17 +91,17 @@ export function updateControlPoint(points, index, newPoint) {
  *
  * @return New array of control points.
  */
-
 export function updateControlPointPosition(points, index, newPosition) {
   if (isOverlapping(points, index, newPosition)) {
     return points;
   }
-
-  const newPoint = { ...points[index],
+  const newPoint = {
+    ...points[index],
     position: newPosition
   };
   return updateControlPoint(points, index, newPoint);
 }
+
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
@@ -112,13 +111,14 @@ export function updateControlPointPosition(points, index, newPosition) {
  *
  * @return New array of control points.
  */
-
 export function updateControlPointColor(points, index, newColor) {
-  const newPoint = { ...points[index],
+  const newPoint = {
+    ...points[index],
     color: newColor
   };
   return updateControlPoint(points, index, newPoint);
 }
+
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
@@ -128,11 +128,11 @@ export function updateControlPointColor(points, index, newColor) {
  *
  * @return New array of control points.
  */
-
 export function updateControlPointColorByPosition(points, position, newColor) {
   const index = points.findIndex(point => point.position === position);
   return updateControlPointColor(points, index, newColor);
 }
+
 /**
  * Gets the horizontal coordinate when dragging a control point with the mouse.
  *
@@ -146,7 +146,6 @@ export function getHorizontalRelativeGradientPosition(mouseXCoordinate, containe
   if (!containerElement) {
     return;
   }
-
   const {
     x,
     width

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.ts"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","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","_point","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';\nimport type { ControlPoint } from '../types';\n\n/**\n * Clamps a number between 0 and 100.\n *\n * @param value Value to clamp.\n *\n * @return Value clamped between 0 and 100.\n */\nexport function clampPercent( value: number ) {\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 value        Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition  New position of the control point.\n * @param minDistance  Distance considered to be overlapping.\n *\n * @return True if the point is overlapping.\n */\nexport function isOverlapping(\n\tvalue: ControlPoint[],\n\tinitialIndex: number,\n\tnewPosition: number,\n\tminDistance: number = 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 points   Array of control points.\n * @param position Position to insert the new point.\n * @param color    Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function addControlPoint(\n\tpoints: ControlPoint[],\n\tposition: number,\n\tcolor: ControlPoint[ 'color' ]\n) {\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 points Array of control points.\n * @param index  Index to remove.\n *\n * @return New array of control points.\n */\nexport function removeControlPoint( points: ControlPoint[], index: number ) {\n\treturn points.filter( ( _point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newPoint New control point to replace the index.\n *\n * @return New array of control points.\n */\nexport function updateControlPoint(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPoint: ControlPoint\n) {\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 points      Array of control points.\n * @param index       Index to update.\n * @param newPosition Position to move the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointPosition(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPosition: ControlPoint[ 'position' ]\n) {\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 points   Array of control points.\n * @param index    Index to update.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColor(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewColor: ControlPoint[ 'color' ]\n) {\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 points   Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColorByPosition(\n\tpoints: ControlPoint[],\n\tposition: ControlPoint[ 'position' ],\n\tnewColor: ControlPoint[ 'color' ]\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 mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n *\n * @return Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: HTMLDivElement\n): number;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: null\n): undefined;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate: number,\n\tcontainerElement: HTMLDivElement | null\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"]}
+{"version":3,"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","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","_point","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\nimport type { ControlPoint } from '../types';\n\n/**\n * Clamps a number between 0 and 100.\n *\n * @param value Value to clamp.\n *\n * @return Value clamped between 0 and 100.\n */\nexport function clampPercent( value: number ) {\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 value        Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition  New position of the control point.\n * @param minDistance  Distance considered to be overlapping.\n *\n * @return True if the point is overlapping.\n */\nexport function isOverlapping(\n\tvalue: ControlPoint[],\n\tinitialIndex: number,\n\tnewPosition: number,\n\tminDistance: number = 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 points   Array of control points.\n * @param position Position to insert the new point.\n * @param color    Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function addControlPoint(\n\tpoints: ControlPoint[],\n\tposition: number,\n\tcolor: ControlPoint[ 'color' ]\n) {\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 points Array of control points.\n * @param index  Index to remove.\n *\n * @return New array of control points.\n */\nexport function removeControlPoint( points: ControlPoint[], index: number ) {\n\treturn points.filter( ( _point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n/**\n * Updates a control point from an array and returns the new array.\n *\n * @param points   Array of control points.\n * @param index    Index to update.\n * @param newPoint New control point to replace the index.\n *\n * @return New array of control points.\n */\nexport function updateControlPoint(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPoint: ControlPoint\n) {\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 points      Array of control points.\n * @param index       Index to update.\n * @param newPosition Position to move the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointPosition(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPosition: ControlPoint[ 'position' ]\n) {\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 points   Array of control points.\n * @param index    Index to update.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColor(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewColor: ControlPoint[ 'color' ]\n) {\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 points   Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n *\n * @return New array of control points.\n */\nexport function updateControlPointColorByPosition(\n\tpoints: ControlPoint[],\n\tposition: ControlPoint[ 'position' ],\n\tnewColor: ControlPoint[ 'color' ]\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 mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n *\n * @return Whole number percentage from the left.\n */\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: HTMLDivElement\n): number;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: null\n): undefined;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate: number,\n\tcontainerElement: HTMLDivElement | null\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"],"mappings":"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"}