@wordpress/components 25.0.0 → 25.1.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["__","useCallback","useEffect","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,QAAjC,QAAiD,oBAAjD;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,UAAlB;AAEA,SACCC,gBADD,EAECC,cAFD,QAIO,eAJP;AAKA,SAASC,IAAT,QAAqB,SAArB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,uBAAtB;;AAEA,SAASC,aAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,MAAM,EAAEC,UADH;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,iBALK;AAMLC,IAAAA,gBANK;AAOL,OAAGC;AAPE,MAQFlB,gBAAgB,CAAES,KAAF,EAAS,eAAT,CARpB;AAUA,QAAMU,EAAE,GAAGZ,KAAK,EAAhB;AACA,QAAMa,gBAAgB,GAAGD,EAAE,CAAEb,MAAM,CAACe,OAAT,CAA3B;AAEA,QAAM,CAAEV,MAAF,EAAUW,SAAV,IAAwBxB,QAAQ,EAAtC;AACA,QAAM,CAAEyB,eAAF,EAAmBC,kBAAnB,IAA0C1B,QAAQ,EAAxD;AAEAD,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACA;AACA,UAAM4B,WAAW,GAAG,OAAOb,UAAP,KAAsB,WAA1C;AACAU,IAAAA,SAAS,CAAEG,WAAW,GAAGb,UAAH,GAAgB,IAA7B,CAAT;AACAY,IAAAA,kBAAkB,CAAE,CAAEC,WAAJ,CAAlB;AACA,GARQ,EAQN,CAAEb,UAAF,CARM,CAAT;AAUA,QAAMc,WAAW,GAAG9B,WAAW,CAC5B+B,QAAF,IACGC,KAAF,IAA+B;AAC9BD,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIC,KAAJ,CAAR;;AACA,QAAKL,eAAL,EAAuB;AACtBD,MAAAA,SAAS,CAAE,KAAF,CAAT;AACA;AACD,GAP4B,EAQ9B,CAAEC,eAAF,EAAmBD,SAAnB,CAR8B,CAA/B;AAWA,QAAMO,WAAW,GAAGjC,WAAW,CAC5BgC,KAAF,IAA8C;AAC7C,QAAKA,KAAK,CAACE,GAAN,KAAc,OAAnB,EAA6B;AAC5BJ,MAAAA,WAAW,CAAEb,SAAF,CAAX,CAA0Be,KAA1B;AACA;AACD,GAL6B,EAM9B,CAAEF,WAAF,EAAeb,SAAf,CAN8B,CAA/B;AASA,QAAMkB,WAAW,GAAGd,gBAAH,aAAGA,gBAAH,cAAGA,gBAAH,GAAuBtB,EAAE,CAAE,QAAF,CAA1C;AACA,QAAMqC,YAAY,GAAGhB,iBAAH,aAAGA,iBAAH,cAAGA,iBAAH,GAAwBrB,EAAE,CAAE,IAAF,CAA5C;AAEA,SACC,8BACGgB,MAAM,IACP,cAAC,KAAD;AACC,IAAA,cAAc,EAAGe,WAAW,CAAEZ,QAAF,CAD7B;AAEC,IAAA,SAAS,EAAGe,WAFb;AAGC,IAAA,gBAAgB,EAAGE,WAHpB;AAIC,IAAA,aAAa,EAAG,IAJjB;AAKC,IAAA,GAAG,EAAGrB,YALP;AAMC,IAAA,gBAAgB,EAAGU,gBANpB;AAOC,IAAA,wBAAwB;AAPzB,KAQMF,UARN,GAUC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,IAAD,QAAQH,QAAR,CADD,EAEC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAC,KAAhB;AAAsB,IAAA,OAAO,EAAC;AAA9B,KACC,cAAC,MAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAGW,WAAW,CAAEZ,QAAF;AAFtB,KAIGiB,WAJH,CADD,EAOC,cAAC,MAAD;AACC,IAAA,OAAO,EAAC,SADT;AAEC,IAAA,OAAO,EAAGL,WAAW,CAAEb,SAAF;AAFtB,KAIGmB,YAJH,CAPD,CAFD,CAVD,CAFF,CADD;AAkCA;;AAED,eAAe/B,cAAc,CAAEO,aAAF,EAAiB,eAAjB,CAA7B","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["__","useCallback","useEffect","useState","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","styles","useCx","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","cx","wrapperClassName","wrapper","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}

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

@@ -26,13 +26,12 @@ 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(_ref) {
-  let {
-    isOpen,
-    position,
-    color,
-    ...additionalProps
-  } = _ref;
+function ControlPointButton({
+  isOpen,
+  position,
+  color,
+  ...additionalProps
+}) {
   const instanceId = useInstanceId(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
   return createElement(Fragment, null, createElement(Button, _extends({
@@ -49,12 +48,11 @@ function ControlPointButton(_ref) {
   }, __('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(_ref2) {
-  let {
-    isRenderedInSidebar,
-    className,
-    ...props
-  } = _ref2;
+function GradientColorPickerDropdown({
+  isRenderedInSidebar,
+  className,
+  ...props
+}) {
   // Open the popover below the gradient control/insertion point
   const popoverProps = useMemo(() => ({
     placement: 'bottom',
@@ -68,18 +66,17 @@ function GradientColorPickerDropdown(_ref2) {
   }, props));
 }
 
-function ControlPoints(_ref3) {
-  let {
-    disableRemove,
-    disableAlpha,
-    gradientPickerDomRef,
-    ignoreMarkerPosition,
-    value: controlPoints,
-    onChange,
-    onStartControlPointChange,
-    onStopControlPointChange,
-    __experimentalIsRenderedInSidebar
-  } = _ref3;
+function ControlPoints({
+  disableRemove,
+  disableAlpha,
+  gradientPickerDomRef,
+  ignoreMarkerPosition,
+  value: controlPoints,
+  onChange,
+  onStartControlPointChange,
+  onStopControlPointChange,
+  __experimentalIsRenderedInSidebar
+}) {
   const controlPointMoveState = useRef();
 
   const onMouseMove = event => {
@@ -117,89 +114,81 @@ function ControlPoints(_ref3) {
   cleanEventListenersRef.current = cleanEventListeners;
   useEffect(() => {
     return () => {
-      var _cleanEventListenersR;
-
-      (_cleanEventListenersR = cleanEventListenersRef.current) === null || _cleanEventListenersR === void 0 ? void 0 : _cleanEventListenersR.call(cleanEventListenersRef);
+      cleanEventListenersRef.current?.();
     };
   }, []);
   return createElement(Fragment, null, controlPoints.map((point, index) => {
-    const initialPosition = point === null || point === void 0 ? void 0 : point.position;
+    const initialPosition = point?.position;
     return ignoreMarkerPosition !== initialPosition && createElement(GradientColorPickerDropdown, {
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: _ref4 => {
-        let {
-          isOpen,
-          onToggle
-        } = _ref4;
-        return createElement(ControlPointButton, {
-          key: index,
-          onClick: () => {
-            if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
-              return;
-            }
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => 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.code === 'ArrowLeft') {
-              // 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.code === 'ArrowRight') {
-              // 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: _ref5 => {
-        let {
-          onClose
-        } = _ref5;
-        return createElement(Fragment, null, createElement(ColorPicker, {
-          enableAlpha: !disableAlpha,
-          color: point.color,
-          onChange: color => {
-            onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
+          onToggle();
+        },
+        onMouseDown: () => {
+          if (window && window.addEventListener) {
+            controlPointMoveState.current = {
+              initialPosition,
+              index,
+              significantMoveHappened: false,
+              listenersActivated: true
+            };
+            onStartControlPointChange();
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', cleanEventListeners);
           }
-        }), !disableRemove && controlPoints.length > 2 && createElement(HStack, {
-          className: "components-custom-gradient-picker__remove-control-point-wrapper",
-          alignment: "center"
-        }, createElement(Button, {
-          onClick: () => {
-            onChange(removeControlPoint(controlPoints, index));
-            onClose();
-          },
-          variant: "link"
-        }, __('Remove Control Point'))));
-      },
+        },
+        onKeyDown: event => {
+          if (event.code === 'ArrowLeft') {
+            // 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.code === 'ArrowRight') {
+            // 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: ({
+        onClose
+      }) => createElement(Fragment, null, createElement(ColorPicker, {
+        enableAlpha: !disableAlpha,
+        color: point.color,
+        onChange: color => {
+          onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
+        }
+      }), !disableRemove && controlPoints.length > 2 && createElement(HStack, {
+        className: "components-custom-gradient-picker__remove-control-point-wrapper",
+        alignment: "center"
+      }, createElement(Button, {
+        onClick: () => {
+          onChange(removeControlPoint(controlPoints, index));
+          onClose();
+        },
+        variant: "link"
+      }, __('Remove Control Point')))),
       style: {
         left: `${point.position}%`,
         transform: 'translateX( -50% )'
@@ -208,16 +197,15 @@ function ControlPoints(_ref3) {
   }));
 }
 
-function InsertPoint(_ref6) {
-  let {
-    value: controlPoints,
-    onChange,
-    onOpenInserter,
-    onCloseInserter,
-    insertPosition,
-    disableAlpha,
-    __experimentalIsRenderedInSidebar
-  } = _ref6;
+function InsertPoint({
+  value: controlPoints,
+  onChange,
+  onOpenInserter,
+  onCloseInserter,
+  insertPosition,
+  disableAlpha,
+  __experimentalIsRenderedInSidebar
+}) {
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);
   return createElement(GradientColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
@@ -225,28 +213,25 @@ function InsertPoint(_ref6) {
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: _ref7 => {
-      let {
-        isOpen,
-        onToggle
-      } = _ref7;
-      return createElement(Button, {
-        "aria-expanded": isOpen,
-        "aria-haspopup": "true",
-        onClick: () => {
-          if (isOpen) {
-            onCloseInserter();
-          } else {
-            setAlreadyInsertedPoint(false);
-            onOpenInserter();
-          }
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => createElement(Button, {
+      "aria-expanded": isOpen,
+      "aria-haspopup": "true",
+      onClick: () => {
+        if (isOpen) {
+          onCloseInserter();
+        } else {
+          setAlreadyInsertedPoint(false);
+          onOpenInserter();
+        }
 
-          onToggle();
-        },
-        className: "components-custom-gradient-picker__insert-point-dropdown",
-        icon: plus
-      });
-    },
+        onToggle();
+      },
+      className: "components-custom-gradient-picker__insert-point-dropdown",
+      icon: plus
+    }),
     renderContent: () => createElement(ColorPicker, {
       enableAlpha: !disableAlpha,
       onChange: color => {

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,"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"]}

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

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

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":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,oBAAnC;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AACA,SAASC,qCAAT,QAAsD,SAAtD;AACA,SAASC,2CAAT,QAA4D,aAA5D;;AASA,MAAMC,wBAAwB,GAAG,CAChCC,KADgC,EAEhCC,MAFgC,KAGG;AACnC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,eAAL;AACC,UAAKF,KAAK,CAACG,EAAN,KAAa,MAAb,IAAuBH,KAAK,CAACG,EAAN,KAAa,iBAAzC,EAA6D;AAC5D,eAAO;AACNA,UAAAA,EAAE,EAAE,iBADE;AAENC,UAAAA,cAAc,EAAEH,MAAM,CAACG;AAFjB,SAAP;AAIA;;AACD;;AACD,SAAK,oBAAL;AACC,UAAKJ,KAAK,CAACG,EAAN,KAAa,iBAAlB,EAAsC;AACrC,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,eAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,iBAAlB,EAAsC;AACrC,eAAO;AACNA,UAAAA,EAAE,EAAE,yBADE;AAENC,UAAAA,cAAc,EAAEJ,KAAK,CAACI;AAFhB,SAAP;AAIA;;AACD;;AACD,SAAK,gBAAL;AACC,UAAKJ,KAAK,CAACG,EAAN,KAAa,yBAAlB,EAA8C;AAC7C,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,sBAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,MAAlB,EAA2B;AAC1B,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;;AACD,SAAK,qBAAL;AACC,UAAKH,KAAK,CAACG,EAAN,KAAa,sBAAlB,EAA2C;AAC1C,eAAO;AACNA,UAAAA,EAAE,EAAE;AADE,SAAP;AAGA;;AACD;AA5CF;;AA8CA,SAAOH,KAAP;AACA,CAnDD;;AAoDA,MAAMK,oCAAgE,GAAG;AACxEF,EAAAA,EAAE,EAAE;AADoE,CAAzE;AAIA,eAAe,SAASG,iBAAT,OAQa;AAAA,MARe;AAC1CC,IAAAA,UAD0C;AAE1CC,IAAAA,WAF0C;AAG1CC,IAAAA,KAAK,EAAEC,aAHmC;AAI1CC,IAAAA,QAJ0C;AAK1CC,IAAAA,eAAe,GAAG,KALwB;AAM1CC,IAAAA,YAAY,GAAG,KAN2B;AAO1CC,IAAAA,iCAAiC,GAAG;AAPM,GAQf;AAC3B,QAAMC,8BAA8B,GAAGrB,MAAM,CAAoB,IAApB,CAA7C;AAEA,QAAM,CAAEsB,gBAAF,EAAoBC,wBAApB,IAAiDtB,UAAU,CAChEI,wBADgE,EAEhEM,oCAFgE,CAAjE;;AAIA,QAAMa,mBAAwD,GAC7DC,KADgE,IAE5D;AACJ,QAAK,CAAEJ,8BAA8B,CAACK,OAAtC,EAAgD;AAC/C;AACA;;AAED,UAAMhB,cAAc,GAAGP,qCAAqC,CAC3DsB,KAAK,CAACE,OADqD,EAE3DN,8BAA8B,CAACK,OAF4B,CAA5D,CALI,CAUJ;;AACA,QACCV,aAAa,CAACY,IAAd,CAAoB,SAAoB;AAAA,UAAlB;AAAEC,QAAAA;AAAF,OAAkB;AACvC,aACCC,IAAI,CAACC,GAAL,CAAUrB,cAAc,GAAGmB,QAA3B,IACAzB,2CAFD;AAIA,KALD,CADD,EAOE;AACD,UAAKkB,gBAAgB,CAACb,EAAjB,KAAwB,iBAA7B,EAAiD;AAChDc,QAAAA,wBAAwB,CAAE;AAAEf,UAAAA,IAAI,EAAE;AAAR,SAAF,CAAxB;AACA;;AACD;AACA;;AAEDe,IAAAA,wBAAwB,CAAE;AAAEf,MAAAA,IAAI,EAAE,eAAR;AAAyBE,MAAAA;AAAzB,KAAF,CAAxB;AACA,GA5BD;;AA8BA,QAAMsB,YAAY,GAAG,MAAM;AAC1BT,IAAAA,wBAAwB,CAAE;AAAEf,MAAAA,IAAI,EAAE;AAAR,KAAF,CAAxB;AACA,GAFD;;AAIA,QAAMyB,gBAAgB,GAAGX,gBAAgB,CAACb,EAAjB,KAAwB,iBAAjD;AACA,QAAMyB,uBAAuB,GAC5BZ,gBAAgB,CAACb,EAAjB,KAAwB,yBADzB;AAGA,SACC;AACC,IAAA,SAAS,EAAGV,UAAU,CACrB,iDADqB,EAErB;AAAE,sBAAgBe;AAAlB,KAFqB,CADvB;AAKC,IAAA,YAAY,EAAGU,mBALhB;AAMC,IAAA,WAAW,EAAGA,mBANf;AAOC,IAAA,YAAY,EAAGQ;AAPhB,KASC;AACC,IAAA,SAAS,EAAC,4DADX;AAEC,IAAA,KAAK,EAAG;AACPnB,MAAAA,UADO;AAEPsB,MAAAA,OAAO,EAAErB,WAAW,GAAG,CAAH,GAAO;AAFpB;AAFT,IATD,EAgBC;AACC,IAAA,GAAG,EAAGO,8BADP;AAEC,IAAA,SAAS,EAAC;AAFX,KAIG,CAAEH,eAAF,KACCe,gBAAgB,IAAIC,uBADrB,KAEA,cAAC,aAAD,CAAe,WAAf;AACC,IAAA,iCAAiC,EAChCd,iCAFF;AAIC,IAAA,YAAY,EAAGD,YAJhB;AAKC,IAAA,cAAc,EAAGG,gBAAgB,CAACZ,cALnC;AAMC,IAAA,KAAK,EAAGM,aANT;AAOC,IAAA,QAAQ,EAAGC,QAPZ;AAQC,IAAA,cAAc,EAAG,MAAM;AACtBM,MAAAA,wBAAwB,CAAE;AACzBf,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA,KAZF;AAaC,IAAA,eAAe,EAAG,MAAM;AACvBe,MAAAA,wBAAwB,CAAE;AACzBf,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA;AAjBF,IANH,EA0BC,cAAC,aAAD;AACC,IAAA,iCAAiC,EAChCY,iCAFF;AAIC,IAAA,YAAY,EAAGD,YAJhB;AAKC,IAAA,aAAa,EAAGD,eALjB;AAMC,IAAA,oBAAoB,EAAGG,8BANxB;AAOC,IAAA,oBAAoB,EACnBa,uBAAuB,GACpBZ,gBAAgB,CAACZ,cADG,GAEpB0B,SAVL;AAYC,IAAA,KAAK,EAAGpB,aAZT;AAaC,IAAA,QAAQ,EAAGC,QAbZ;AAcC,IAAA,yBAAyB,EAAG,MAAM;AACjCM,MAAAA,wBAAwB,CAAE;AACzBf,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA,KAlBF;AAmBC,IAAA,wBAAwB,EAAG,MAAM;AAChCe,MAAAA,wBAAwB,CAAE;AACzBf,QAAAA,IAAI,EAAE;AADmB,OAAF,CAAxB;AAGA;AAvBF,IA1BD,CAhBD,CADD;AAuEA","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,"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"]}

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

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

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,"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"]}