@wordpress/components 19.1.1 → 19.1.5

package/build/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","onChange","defaultValue","copyFormat","divProps","safeColordColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","settings","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst safeColordColor = useMemo( () => {\n\t\treturn color ? colord( color ) : colord( defaultValue );\n\t}, [ color, defaultValue ] );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tonChange( nextValue.toHex() );\n\t\t},\n\t\t[ onChange ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","settings","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build/custom-gradient-bar/constants.js

@@ -3,12 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.MINIMUM_ABSOLUTE_LEFT_POSITION = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = exports.COLOR_POPOVER_PROPS = void 0;
-const COLOR_POPOVER_PROPS = {
-  className: 'components-custom-gradient-picker__color-picker-popover',
-  position: 'top'
-};
-exports.COLOR_POPOVER_PROPS = COLOR_POPOVER_PROPS;
+exports.MINIMUM_SIGNIFICANT_MOVE = exports.MINIMUM_DISTANCE_BETWEEN_POINTS = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = exports.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = exports.MINIMUM_ABSOLUTE_LEFT_POSITION = exports.KEYBOARD_CONTROL_POINT_VARIATION = exports.INSERT_POINT_WIDTH = exports.GRADIENT_MARKERS_WIDTH = void 0;
 const GRADIENT_MARKERS_WIDTH = 16;
 exports.GRADIENT_MARKERS_WIDTH = GRADIENT_MARKERS_WIDTH;
 const INSERT_POINT_WIDTH = 16;

package/build/custom-gradient-bar/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["COLOR_POPOVER_PROPS","className","position","GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG;AAClCC,EAAAA,SAAS,EAAE,yDADuB;AAElCC,EAAAA,QAAQ,EAAE;AAFwB,CAA5B;;AAKA,MAAMC,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,8BAA8B,GAAG,CAAvC;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAAGH,2CAAzC;;AACA,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const COLOR_POPOVER_PROPS = {\n\tclassName: 'components-custom-gradient-picker__color-picker-popover',\n\tposition: 'top',\n};\n\nexport const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,8BAA8B,GAAG,CAAvC;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAAGH,2CAAzC;;AACA,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}

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

@@ -27,10 +27,10 @@ var _button = _interopRequireDefault(require("../button"));
 
 var _colorPicker = require("../color-picker");
 
-var _dropdown = _interopRequireDefault(require("../dropdown"));
-
 var _visuallyHidden = require("../visually-hidden");
 
+var _colorPalette = require("../color-palette");
+
 var _utils = require("./utils");
 
 var _constants = require("./constants");
@@ -72,7 +72,33 @@ function ControlPointButton(_ref) {
   }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
 }
 
-function ControlPoints(_ref2) {
+function GradientColorPickerDropdown(_ref2) {
+  let {
+    isRenderedInSidebar,
+    gradientPickerDomRef,
+    ...props
+  } = _ref2;
+  const popoverProps = (0, _element.useMemo)(() => {
+    const result = {
+      className: 'components-custom-gradient-picker__color-picker-popover',
+      position: 'top'
+    };
+
+    if (isRenderedInSidebar) {
+      result.anchorRef = gradientPickerDomRef.current;
+      result.position = (0, _i18n.isRTL)() ? 'bottom right' : 'bottom left';
+      result.__unstableForcePosition = true;
+    }
+
+    return result;
+  }, [gradientPickerDomRef.current, isRenderedInSidebar]);
+  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, (0, _extends2.default)({
+    isRenderedInSidebar: isRenderedInSidebar,
+    popoverProps: popoverProps
+  }, props));
+}
+
+function ControlPoints(_ref3) {
   let {
     disableRemove,
     disableAlpha,
@@ -81,8 +107,9 @@ function ControlPoints(_ref2) {
     value: controlPoints,
     onChange,
     onStartControlPointChange,
-    onStopControlPointChange
-  } = _ref2;
+    onStopControlPointChange,
+    __experimentalIsRenderedInSidebar
+  } = _ref3;
   const controlPointMoveState = (0, _element.useRef)();
 
   const onMouseMove = event => {
@@ -116,14 +143,16 @@ function ControlPoints(_ref2) {
   }, []);
   return controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
-    return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(_dropdown.default, {
+    return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(GradientColorPickerDropdown, {
+      gradientPickerDomRef: gradientPickerDomRef,
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
-      renderToggle: _ref3 => {
+      renderToggle: _ref4 => {
         let {
           isOpen,
           onToggle
-        } = _ref3;
+        } = _ref4;
         return (0, _element.createElement)(ControlPointButton, {
           key: index,
           onClick: () => {
@@ -170,17 +199,17 @@ function ControlPoints(_ref2) {
           color: point.color
         });
       },
-      renderContent: _ref4 => {
+      renderContent: _ref5 => {
         let {
           onClose
-        } = _ref4;
+        } = _ref5;
         return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.ColorPicker, {
           enableAlpha: !disableAlpha,
           color: point.color,
           onChange: color => {
             onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
           }
-        }), !disableRemove && (0, _element.createElement)(_button.default, {
+        }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_button.default, {
           className: "components-custom-gradient-picker__remove-control-point",
           onClick: () => {
             onChange((0, _utils.removeControlPoint)(controlPoints, index));
@@ -188,32 +217,35 @@ function ControlPoints(_ref2) {
           },
           variant: "link"
         }, (0, _i18n.__)('Remove Control Point')));
-      },
-      popoverProps: _constants.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] = (0, _element.useState)(false);
-  return (0, _element.createElement)(_dropdown.default, {
+  return (0, _element.createElement)(GradientColorPickerDropdown, {
+    gradientPickerDomRef: gradientPickerDomRef,
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
       onCloseInserter();
     },
-    renderToggle: _ref6 => {
+    renderToggle: _ref7 => {
       let {
         isOpen,
         onToggle
-      } = _ref6;
+      } = _ref7;
       return (0, _element.createElement)(_button.default, {
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
@@ -244,8 +276,7 @@ function InsertPoint(_ref5) {
           onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
         }
       }
-    }),
-    popoverProps: _constants.COLOR_POPOVER_PROPS
+    })
   });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/control-points.js"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","left","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","GRADIENT_MARKERS_WIDTH","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","LEFT","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","RIGHT","onClose","toRgbString","COLOR_POPOVER_PROPS","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState } 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":["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","GRADIENT_MARKERS_WIDTH","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","map","point","onToggle","addEventListener","keyCode","LEFT","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","RIGHT","onClose","toRgbString","length","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf, 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/custom-gradient-bar/index.js

@@ -103,7 +103,8 @@ function CustomGradientBar(_ref) {
     value: controlPoints,
     onChange,
     disableInserter = false,
-    disableAlpha = false
+    disableAlpha = false,
+    __experimentalIsRenderedInSidebar
   } = _ref;
   const gradientPickerDomRef = (0, _element.useRef)();
   const [gradientBarState, gradientBarStateDispatch] = (0, _element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
@@ -154,6 +155,8 @@ function CustomGradientBar(_ref) {
   }, (0, _element.createElement)("div", {
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    gradientPickerDomRef: gradientPickerDomRef,
     disableAlpha: disableAlpha,
     insertPosition: gradientBarState.insertPosition,
     value: controlPoints,
@@ -169,6 +172,7 @@ function CustomGradientBar(_ref) {
       });
     }
   }), (0, _element.createElement)(_controlPoints.default, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     disableAlpha: disableAlpha,
     disableRemove: disableInserter,
     gradientPickerDomRef: gradientPickerDomRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","INSERT_POINT_WIDTH","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\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":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientPickerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","INSERT_POINT_WIDTH","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { some } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport {\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/custom-gradient-picker/index.js

@@ -112,7 +112,8 @@ const GradientTypePicker = _ref2 => {
 function CustomGradientPicker(_ref3) {
   let {
     value,
-    onChange
+    onChange,
+    __experimentalIsRenderedInSidebar
   } = _ref3;
   const gradientAST = (0, _utils.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.
@@ -129,6 +130,7 @@ function CustomGradientPicker(_ref3) {
   return (0, _element.createElement)("div", {
     className: "components-custom-gradient-picker"
   }, (0, _element.createElement)(_customGradientBar.default, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,
     hasGradient: hasGradient,
     value: controlPoints,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","background","DEFAULT_GRADIENT","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":["GradientAnglePicker","gradientAST","hasGradient","onChange","angle","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","handleOnChange","next","GRADIENT_OPTIONS","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","DEFAULT_GRADIENT","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * 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( {\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/gradient-picker/index.js

@@ -115,10 +115,11 @@ function GradientPicker(_ref5) {
     value,
     clearable = true,
     disableCustomGradients = false,
-    __experimentalHasMultipleOrigins
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar
   } = _ref5;
   const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins ? MultipleOrigin : SingleOrigin;
+  const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin;
   return (0, _element.createElement)(Component, {
     className: className,
     clearable: clearable,
@@ -126,10 +127,11 @@ function GradientPicker(_ref5) {
     gradients: gradients,
     onChange: onChange,
     value: value,
-    actions: clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
+    actions: clearable && ((gradients === null || gradients === void 0 ? void 0 : gradients.length) || !disableCustomGradients) && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
       onClick: clearGradient
     }, (0, _i18n.__)('Clear')),
     content: !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
       value: value,
       onChange: onChange
     })

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","map","index","gradientSet","length","GradientPicker","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","undefined","Component"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n} ) {\n\tconst clearGradient = useCallback( () => onChange( undefined ), [\n\t\tonChange,\n\t] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultipleOrigin\n\t\t: SingleOrigin;\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.js"],"names":["SingleOrigin","className","clearGradient","gradients","onChange","value","actions","content","gradientOptions","gradient","name","color","background","MultipleOrigin","map","index","gradientSet","length","GradientPicker","clearable","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn map( gradients, ( { gradient, name } ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t>\n\t\t\t{ content }\n\t\t</CircularOptionPicker>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\tcontent,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t\t\t\t\tcontent,\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function GradientPicker( {\n\tclassName,\n\tgradients,\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst clearGradient = useCallback( () => onChange( undefined ), [\n\t\tonChange,\n\t] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && gradients?.length\n\t\t\t? MultipleOrigin\n\t\t\t: SingleOrigin;\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ className }\n\t\t\tclearable={ clearable }\n\t\t\tclearGradient={ clearGradient }\n\t\t\tgradients={ gradients }\n\t\t\tonChange={ onChange }\n\t\t\tvalue={ value }\n\t\t\tactions={\n\t\t\t\tclearable &&\n\t\t\t\t( gradients?.length || ! disableCustomGradients ) && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}

package/build/navigation/item/index.js

@@ -69,8 +69,9 @@ function NavigationItem(props) {
     return null;
   }
 
+  const isActive = item && activeItem === item;
   const classes = (0, _classnames.default)(className, {
-    'is-active': item && activeItem === item
+    'is-active': isActive
   });
 
   const onItemClick = event => {
@@ -89,6 +90,7 @@ function NavigationItem(props) {
     as: _button.default,
     href,
     onClick: onItemClick,
+    'aria-current': isActive ? 'page' : undefined,
     ...restProps
   };
   return (0, _element.createElement)(_base.default, (0, _extends2.default)({}, baseProps, {

package/build/navigation/item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/index.js"],"names":["NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","noop","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","classes","onItemClick","event","navigationIcon","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAOe,SAASA,cAAT,CAAyBC,KAAzB,EAAiC;AAC/C,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGC,YAPL;AAQLC,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFb,KAbJ;AAeA,QAAM;AACLc,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIF,oCAJJ,CAhB+C,CAsB/C;AACA;AACA;;AACA,MACCN,qBAAqB,IACrBL,cADA,IAEAW,WAAW,CAAEX,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMY,OAAO,GAAG,yBAAYf,SAAZ,EAAuB;AACtC,iBAAaE,IAAI,IAAIS,UAAU,KAAKT;AADE,GAAvB,CAAhB;;AAIA,QAAMc,WAAW,GAAKC,KAAF,IAAa;AAChC,QAAKd,cAAL,EAAsB;AACrBS,MAAAA,aAAa,CAAET,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEa,KAAF,CAAP;AACA,GAND;;AAOA,QAAMC,cAAc,GAAG,qBAAUC,kBAAV,GAAwBC,mBAA/C;AACA,QAAMC,SAAS,GAAGtB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEkB;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGd,MAAM,GACrBC,SADqB,GAErB;AAAEc,IAAAA,EAAE,EAAEC,eAAN;AAAcxB,IAAAA,IAAd;AAAoBG,IAAAA,OAAO,EAAEY,WAA7B;AAA0C,OAAGN;AAA7C,GAFH;AAIA,SACC,4BAAC,aAAD,6BAAyBW,SAAzB;AAAqC,IAAA,SAAS,EAAGN;AAAjD,MACGhB,QAAQ,IACT,4BAAC,wBAAD,EAAawB,SAAb,EACGhB,IAAI,IACL,4BAAC,4BAAD,QACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGR;AAFT,IAPD,EAYGK,cAAc,IAAI,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGe;AAAb,IAZrB,CAFF,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nexport default function NavigationItem( props ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( className, {\n\t\t'is-active': item && activeItem === item,\n\t} );\n\n\tconst onItemClick = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: { as: Button, href, onClick: onItemClick, ...restProps };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/index.js"],"names":["NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","noop","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","isActive","classes","onItemClick","event","navigationIcon","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAOe,SAASA,cAAT,CAAyBC,KAAzB,EAAiC;AAC/C,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGC,YAPL;AAQLC,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFb,KAbJ;AAeA,QAAM;AACLc,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIF,oCAJJ,CAhB+C,CAsB/C;AACA;AACA;;AACA,MACCN,qBAAqB,IACrBL,cADA,IAEAW,WAAW,CAAEX,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMY,QAAQ,GAAGb,IAAI,IAAIS,UAAU,KAAKT,IAAxC;AAEA,QAAMc,OAAO,GAAG,yBAAYhB,SAAZ,EAAuB;AACtC,iBAAae;AADyB,GAAvB,CAAhB;;AAIA,QAAME,WAAW,GAAKC,KAAF,IAAa;AAChC,QAAKf,cAAL,EAAsB;AACrBS,MAAAA,aAAa,CAAET,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEc,KAAF,CAAP;AACA,GAND;;AAOA,QAAMC,cAAc,GAAG,qBAAUC,kBAAV,GAAwBC,mBAA/C;AACA,QAAMC,SAAS,GAAGvB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEmB;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGf,MAAM,GACrBC,SADqB,GAErB;AACAe,IAAAA,EAAE,EAAEC,eADJ;AAEAzB,IAAAA,IAFA;AAGAG,IAAAA,OAAO,EAAEa,WAHT;AAIA,oBAAgBF,QAAQ,GAAG,MAAH,GAAYQ,SAJpC;AAKA,OAAGb;AALH,GAFH;AAUA,SACC,4BAAC,aAAD,6BAAyBY,SAAzB;AAAqC,IAAA,SAAS,EAAGN;AAAjD,MACGjB,QAAQ,IACT,4BAAC,wBAAD,EAAayB,SAAb,EACGjB,IAAI,IACL,4BAAC,4BAAD,QACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGR;AAFT,IAPD,EAYGK,cAAc,IAAI,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGgB;AAAb,IAZrB,CAFF,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nexport default function NavigationItem( props ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isActive = item && activeItem === item;\n\n\tconst classes = classnames( className, {\n\t\t'is-active': isActive,\n\t} );\n\n\tconst onItemClick = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: {\n\t\t\t\tas: Button,\n\t\t\t\thref,\n\t\t\t\tonClick: onItemClick,\n\t\t\t\t'aria-current': isActive ? 'page' : undefined,\n\t\t\t\t...restProps,\n\t\t  };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n"]}