@wordpress/components 19.1.2 → 19.2.1-next.33ec3857e2.0

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

@@ -11,8 +11,8 @@ import { colord } from 'colord';
  */
 
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 /**
@@ -21,10 +21,10 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
+import { CustomColorPickerDropdown } from '../color-palette';
 import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
-import { COLOR_POPOVER_PROPS, GRADIENT_MARKERS_WIDTH, MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
+import { GRADIENT_MARKERS_WIDTH, MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
 
 function ControlPointButton(_ref) {
   let {
@@ -52,7 +52,33 @@ 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 ControlPoints(_ref2) {
+function GradientColorPickerDropdown(_ref2) {
+  let {
+    isRenderedInSidebar,
+    gradientPickerDomRef,
+    ...props
+  } = _ref2;
+  const popoverProps = useMemo(() => {
+    const result = {
+      className: 'components-custom-gradient-picker__color-picker-popover',
+      position: 'top'
+    };
+
+    if (isRenderedInSidebar) {
+      result.anchorRef = gradientPickerDomRef.current;
+      result.position = isRTL() ? 'bottom right' : 'bottom left';
+      result.__unstableForcePosition = true;
+    }
+
+    return result;
+  }, [gradientPickerDomRef.current, isRenderedInSidebar]);
+  return createElement(CustomColorPickerDropdown, _extends({
+    isRenderedInSidebar: isRenderedInSidebar,
+    popoverProps: popoverProps
+  }, props));
+}
+
+function ControlPoints(_ref3) {
   let {
     disableRemove,
     disableAlpha,
@@ -61,8 +87,9 @@ function ControlPoints(_ref2) {
     value: controlPoints,
     onChange,
     onStartControlPointChange,
-    onStopControlPointChange
-  } = _ref2;
+    onStopControlPointChange,
+    __experimentalIsRenderedInSidebar
+  } = _ref3;
   const controlPointMoveState = useRef();
 
   const onMouseMove = event => {
@@ -96,14 +123,16 @@ function ControlPoints(_ref2) {
   }, []);
   return controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
-    return ignoreMarkerPosition !== initialPosition && createElement(Dropdown, {
+    return ignoreMarkerPosition !== initialPosition && createElement(GradientColorPickerDropdown, {
+      gradientPickerDomRef: gradientPickerDomRef,
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: _ref3 => {
+      renderToggle: _ref4 => {
         let {
           isOpen,
           onToggle
-        } = _ref3;
+        } = _ref4;
         return createElement(ControlPointButton, {
           key: index,
           onClick: () => {
@@ -150,17 +179,17 @@ function ControlPoints(_ref2) {
           color: point.color
         });
       },
-      renderContent: _ref4 => {
+      renderContent: _ref5 => {
         let {
           onClose
-        } = _ref4;
+        } = _ref5;
         return createElement(Fragment, null, createElement(ColorPicker, {
           enableAlpha: !disableAlpha,
           color: point.color,
           onChange: color => {
             onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
           }
-        }), !disableRemove && createElement(Button, {
+        }), !disableRemove && controlPoints.length > 2 && createElement(Button, {
           className: "components-custom-gradient-picker__remove-control-point",
           onClick: () => {
             onChange(removeControlPoint(controlPoints, index));
@@ -168,32 +197,35 @@ function ControlPoints(_ref2) {
           },
           variant: "link"
         }, __('Remove Control Point')));
-      },
-      popoverProps: COLOR_POPOVER_PROPS
+      }
     });
   });
 }
 
-function InsertPoint(_ref5) {
+function InsertPoint(_ref6) {
   let {
     value: controlPoints,
     onChange,
     onOpenInserter,
     onCloseInserter,
     insertPosition,
-    disableAlpha
-  } = _ref5;
+    disableAlpha,
+    __experimentalIsRenderedInSidebar,
+    gradientPickerDomRef
+  } = _ref6;
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);
-  return createElement(Dropdown, {
+  return createElement(GradientColorPickerDropdown, {
+    gradientPickerDomRef: gradientPickerDomRef,
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: _ref6 => {
+    renderToggle: _ref7 => {
       let {
         isOpen,
         onToggle
-      } = _ref6;
+      } = _ref7;
       return createElement(Button, {
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
@@ -224,8 +256,7 @@ function InsertPoint(_ref5) {
           onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));
         }
       }
-    }),
-    popoverProps: COLOR_POPOVER_PROPS
+    })
   });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","__","sprintf","plus","LEFT","RIGHT","Button","ColorPicker","Dropdown","VisuallyHidden","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","COLOR_POPOVER_PROPS","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport Dropdown from '../dropdown';\nimport { VisuallyHidden } from '../visually-hidden';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tCOLOR_POPOVER_PROPS,\n\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\n\t\t\t\t} }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ ! disableRemove && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t} );\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tpopoverProps={ COLOR_POPOVER_PROPS }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","isRTL","plus","LEFT","RIGHT","Button","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","GRADIENT_MARKERS_WIDTH","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","GradientColorPickerDropdown","isRenderedInSidebar","gradientPickerDomRef","props","popoverProps","result","className","anchorRef","current","__unstableForcePosition","ControlPoints","disableRemove","disableAlpha","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","stopPropagation","onClose","toRgbString","length","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { 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\tGRADIENT_MARKERS_WIDTH,\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${ position }%`,\n\t\t\t\t} }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tgradientPickerDomRef,\n\t...props\n} ) {\n\tconst popoverProps = useMemo( () => {\n\t\tconst result = {\n\t\t\tclassName:\n\t\t\t\t'components-custom-gradient-picker__color-picker-popover',\n\t\t\tposition: 'top',\n\t\t};\n\t\tif ( isRenderedInSidebar ) {\n\t\t\tresult.anchorRef = gradientPickerDomRef.current;\n\t\t\tresult.position = isRTL() ? 'bottom right' : 'bottom left';\n\t\t\tresult.__unstableForcePosition = true;\n\t\t}\n\t\treturn result;\n\t}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tGRADIENT_MARKERS_WIDTH\n\t\t);\n\t\tconst {\n\t\t\tinitialPosition,\n\t\t\tindex,\n\t\t\tsignificantMoveHappened,\n\t\t} = controlPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListeners();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ ! disableRemove && controlPoints.length > 2 && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t/>\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\tgradientPickerDomRef,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\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\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\tinsertPosition !== null\n\t\t\t\t\t\t\t\t? `${ insertPosition }%`\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

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

@@ -90,7 +90,8 @@ export default function CustomGradientBar(_ref) {
     value: controlPoints,
     onChange,
     disableInserter = false,
-    disableAlpha = false
+    disableAlpha = false,
+    __experimentalIsRenderedInSidebar
   } = _ref;
   const gradientPickerDomRef = useRef();
   const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
@@ -141,6 +142,8 @@ export default function CustomGradientBar(_ref) {
   }, createElement("div", {
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    gradientPickerDomRef: gradientPickerDomRef,
     disableAlpha: disableAlpha,
     insertPosition: gradientBarState.insertPosition,
     value: controlPoints,
@@ -156,6 +159,7 @@ export default function CustomGradientBar(_ref) {
       });
     }
   }), createElement(ControlPoints, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     disableAlpha: disableAlpha,
     disableRemove: disableInserter,
     gradientPickerDomRef: gradientPickerDomRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["some","classnames","useRef","useReducer","ControlPoints","getHorizontalRelativeGradientPosition","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","position","Math","abs","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\n\tINSERT_POINT_WIDTH,\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT,\n} from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientPickerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current,\n\t\t\tINSERT_POINT_WIDTH\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tsome( controlPoints, ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tref={ gradientPickerDomRef }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div className=\"components-custom-gradient-picker__markers-container\">\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\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\tgradientPickerDomRef={ gradientPickerDomRef }\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={ gradientPickerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

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

@@ -87,6 +87,7 @@ const GradientTypePicker = _ref2 => {
     labelPosition: "top",
     onChange: handleOnChange,
     options: GRADIENT_OPTIONS,
+    size: "__unstable-large",
     value: hasGradient && type
   });
 };
@@ -94,7 +95,8 @@ const GradientTypePicker = _ref2 => {
 export default function CustomGradientPicker(_ref3) {
   let {
     value,
-    onChange
+    onChange,
+    __experimentalIsRenderedInSidebar
   } = _ref3;
   const gradientAST = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient.
   // On radial gradients the bar represents a slice of the gradient from the center until the outside.
@@ -111,6 +113,7 @@ export default function CustomGradientPicker(_ref3) {
   return createElement("div", {
     className: "components-custom-gradient-picker"
   }, createElement(CustomGradientBar, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,
     hasGradient: hasGradient,
     value: controlPoints,

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

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

package/build-module/date-time/date.js

@@ -12,8 +12,13 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
  * WordPress dependencies
  */
 
-import { Component, createRef, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { getMomentDate } from './utils';
 /**
  * Module Constants
  */
@@ -65,20 +70,20 @@ function DatePickerDay(_ref) {
   }, day.format('D'));
 }
 
-class DatePicker extends Component {
-  constructor() {
-    super(...arguments);
-    this.onChangeMoment = this.onChangeMoment.bind(this);
-    this.nodeRef = createRef();
-    this.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(this);
-  }
-
-  onMonthPreviewedHandler(newMonthDate) {
-    var _this$props$onMonthPr, _this$props;
-
-    (_this$props$onMonthPr = (_this$props = this.props).onMonthPreviewed) === null || _this$props$onMonthPr === void 0 ? void 0 : _this$props$onMonthPr.call(_this$props, newMonthDate.toISOString());
-    this.keepFocusInside();
-  }
+function DatePicker(_ref2) {
+  let {
+    currentDate,
+    onChange,
+    events,
+    isInvalidDate,
+    onMonthPreviewed
+  } = _ref2;
+  const nodeRef = useRef();
+
+  const onMonthPreviewedHandler = newMonthDate => {
+    onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(newMonthDate.toISOString());
+    keepFocusInside();
+  };
   /*
    * Todo: We should remove this function ASAP.
    * It is kept because focus is lost when we click on the previous and next month buttons.
@@ -87,21 +92,21 @@ class DatePicker extends Component {
    */
 
 
-  keepFocusInside() {
-    if (!this.nodeRef.current) {
+  const keepFocusInside = () => {
+    if (!nodeRef.current) {
       return;
     }
 
     const {
       ownerDocument
-    } = this.nodeRef.current;
+    } = nodeRef.current;
     const {
       activeElement
     } = ownerDocument; // If focus was lost.
 
-    if (!activeElement || !this.nodeRef.current.contains(ownerDocument.activeElement)) {
+    if (!activeElement || !nodeRef.current.contains(ownerDocument.activeElement)) {
       // Retrieve the focus region div.
-      const focusRegion = this.nodeRef.current.querySelector('.DayPicker_focusRegion');
+      const focusRegion = nodeRef.current.querySelector('.DayPicker_focusRegion');
 
       if (!focusRegion) {
         return;
@@ -110,14 +115,10 @@ class DatePicker extends Component {
 
       focusRegion.focus();
     }
-  }
-
-  onChangeMoment(newDate) {
-    const {
-      currentDate,
-      onChange
-    } = this.props; // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
+  };
 
+  const onChangeMoment = newDate => {
+    // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
     const momentDate = currentDate ? moment(currentDate) : moment();
     const momentTime = {
       hours: momentDate.hours(),
@@ -126,71 +127,46 @@ class DatePicker extends Component {
     };
     onChange(newDate.set(momentTime).format(TIMEZONELESS_FORMAT)); // Keep focus on the date picker.
 
-    this.keepFocusInside();
-  }
-  /**
-   * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
-   * object representing now. If a null value is passed, return a null value.
-   *
-   * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
-   * @return {?moment.Moment} Moment object for selected date or null.
-   */
-
-
-  getMomentDate(currentDate) {
-    if (null === currentDate) {
-      return null;
-    }
-
-    return currentDate ? moment(currentDate) : moment();
-  }
-
-  getEventsPerDay(day) {
-    var _this$props$events;
+    keepFocusInside();
+  };
 
-    if (!((_this$props$events = this.props.events) !== null && _this$props$events !== void 0 && _this$props$events.length)) {
+  const getEventsPerDay = day => {
+    if (!(events !== null && events !== void 0 && events.length)) {
       return [];
     }
 
-    return this.props.events.filter(eventDay => day.isSame(eventDay.date, 'day'));
-  }
-
-  render() {
-    const {
-      currentDate,
-      isInvalidDate
-    } = this.props;
-    const momentDate = this.getMomentDate(currentDate);
-    return createElement("div", {
-      className: "components-datetime__date",
-      ref: this.nodeRef
-    }, createElement(DayPickerSingleDateController, {
-      date: momentDate,
-      daySize: 30,
-      focused: true,
-      hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
-      // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-      ,
-      key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
-      noBorder: true,
-      numberOfMonths: 1,
-      onDateChange: this.onChangeMoment,
-      transitionDuration: 0,
-      weekDayFormat: "ddd",
-      dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
-      isRTL: isRTL(),
-      isOutsideRange: date => {
-        return isInvalidDate && isInvalidDate(date.toDate());
-      },
-      onPrevMonthClick: this.onMonthPreviewedHandler,
-      onNextMonthClick: this.onMonthPreviewedHandler,
-      renderDayContents: day => createElement(DatePickerDay, {
-        day: day,
-        events: this.getEventsPerDay(day)
-      })
-    }));
-  }
+    return events.filter(eventDay => day.isSame(eventDay.date, 'day'));
+  };
 
+  const momentDate = getMomentDate(currentDate);
+  return createElement("div", {
+    className: "components-datetime__date",
+    ref: nodeRef
+  }, createElement(DayPickerSingleDateController, {
+    date: momentDate,
+    daySize: 30,
+    focused: true,
+    hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
+    // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
+    ,
+    key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
+    noBorder: true,
+    numberOfMonths: 1,
+    onDateChange: onChangeMoment,
+    transitionDuration: 0,
+    weekDayFormat: "ddd",
+    dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
+    isRTL: isRTL(),
+    isOutsideRange: date => {
+      return isInvalidDate && isInvalidDate(date.toDate());
+    },
+    onPrevMonthClick: onMonthPreviewedHandler,
+    onNextMonthClick: onMonthPreviewedHandler,
+    renderDayContents: day => createElement(DatePickerDay, {
+      day: day,
+      events: getEventsPerDay(day)
+    })
+  }));
 }
 
 export default DatePicker;