npm - @wordpress/components - Versions diffs - 23.6.0 → 23.7.0 - Mend

@wordpress/components 23.6.0 → 23.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (328) hide show

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

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

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
 /**
  * External dependencies
@@ -18,7 +17,7 @@ import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
-function customGradientBarReducer(state, action) {
+const customGradientBarReducer = (state, action) => {
   switch (action.type) {
     case 'MOVE_INSERTER':
       if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
@@ -78,7 +77,7 @@ function customGradientBarReducer(state, action) {
   }
   return state;
-}
+};
 const customGradientBarReducerInitialState = {
   id: 'IDLE'
@@ -91,12 +90,16 @@ export default function CustomGradientBar(_ref) {
     onChange,
     disableInserter = false,
     disableAlpha = false,
-    __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar = false
   } = _ref;
-  const gradientMarkersContainerDomRef = useRef();
+  const gradientMarkersContainerDomRef = useRef(null);
   const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
   const onMouseEnterAndMove = event => {
+    if (!gradientMarkersContainerDomRef.current) {
+      return;
+    }
     const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current); // If the insert point is close to an existing control point don't show it.
     if (controlPoints.some(_ref2 => {
@@ -134,11 +137,14 @@ export default function CustomGradientBar(_ref) {
     }),
     onMouseEnter: onMouseEnterAndMove,
     onMouseMove: onMouseEnterAndMove,
-    style: {
-      background
-    },
     onMouseLeave: onMouseLeave
   }, createElement("div", {
+    className: "components-custom-gradient-picker__gradient-bar-background",
+    style: {
+      background,
+      opacity: hasGradient ? 1 : 0.4
+    }
+  }), createElement("div", {
     ref: gradientMarkersContainerDomRef,
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {

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

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

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

@@ -1,47 +1,27 @@
-// @ts-nocheck
 /**
  * Internal dependencies
  */
 import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-/**
- * Control point for the gradient bar.
- *
- * @typedef {Object} ControlPoint
- * @property {string} color    Color of the control point.
- * @property {number} position Integer position of the control point as a percentage.
- */
-/**
- * Color as parsed from the gradient by gradient-parser.
- *
- * @typedef {Object} Color
- * @property {string} r   Red component.
- * @property {string} g   Green component.
- * @property {string} b   Green component.
- * @property {string} [a] Optional alpha component.
- */
 /**
  * Clamps a number between 0 and 100.
  *
- * @param {number} value Value to clamp.
+ * @param value Value to clamp.
  *
- * @return {number} Value clamped between 0 and 100.
+ * @return Value clamped between 0 and 100.
  */
 export function clampPercent(value) {
   return Math.max(0, Math.min(100, value));
 }
 /**
  * Check if a control point is overlapping with another.
  *
- * @param {ControlPoint[]} value        Array of control points.
- * @param {number}         initialIndex Index of the position to test.
- * @param {number}         newPosition  New position of the control point.
- * @param {number}         minDistance  Distance considered to be overlapping.
+ * @param value        Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition  New position of the control point.
+ * @param minDistance  Distance considered to be overlapping.
  *
- * @return {boolean} True if the point is overlapping.
+ * @return True if the point is overlapping.
  */
 export function isOverlapping(value, initialIndex, newPosition) {
@@ -59,11 +39,11 @@ export function isOverlapping(value, initialIndex, newPosition) {
 /**
  * Adds a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position to insert the new point.
- * @param {Color}          color    Color to update the control point at index.
+ * @param points   Array of control points.
+ * @param position Position to insert the new point.
+ * @param color    Color to update the control point at index.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function addControlPoint(points, position, color) {
@@ -79,25 +59,25 @@ export function addControlPoint(points, position, color) {
 /**
  * Removes a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number}         index  Index to remove.
+ * @param points Array of control points.
+ * @param index  Index to remove.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function removeControlPoint(points, index) {
-  return points.filter((point, pointIndex) => {
+  return points.filter((_point, pointIndex) => {
     return pointIndex !== index;
   });
 }
 /**
  * Updates a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {ControlPoint[]} newPoint New control point to replace the index.
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newPoint New control point to replace the index.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function updateControlPoint(points, index, newPoint) {
@@ -108,11 +88,11 @@ export function updateControlPoint(points, index, newPoint) {
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points      Array of control points.
- * @param {number}         index       Index to update.
- * @param {number}         newPosition Position to move the control point at index.
+ * @param points      Array of control points.
+ * @param index       Index to update.
+ * @param newPosition Position to move the control point at index.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function updateControlPointPosition(points, index, newPosition) {
@@ -128,11 +108,11 @@ export function updateControlPointPosition(points, index, newPosition) {
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {Color}          newColor Color to update the control point at index.
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newColor Color to update the control point at index.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function updateControlPointColor(points, index, newColor) {
@@ -144,11 +124,11 @@ export function updateControlPointColor(points, index, newColor) {
 /**
  * Updates the position of a control point from an array and returns the new array.
  *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position of the color stop.
- * @param {string}         newColor Color to update the control point at index.
+ * @param points   Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
  *
- * @return {ControlPoint[]} New array of control points.
+ * @return New array of control points.
  */
 export function updateControlPointColorByPosition(points, position, newColor) {
@@ -158,10 +138,10 @@ export function updateControlPointColorByPosition(points, position, newColor) {
 /**
  * Gets the horizontal coordinate when dragging a control point with the mouse.
  *
- * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
- * @param {Element} containerElement Container for the gradient picker.
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
  *
- * @return {number | undefined} Whole number percentage from the left.
+ * @return Whole number percentage from the left.
  */
 export function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.js"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"AAAA~~;;AAEA~~;AACA;AACA;AACA,SAASA,+BAAT,QAAgD,aAAhD~~;AAEA;AACA;AACA;AACA;AACA;AACA;AACA~~;;~~AAEA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA~~,OAAO,SAASC,YAAT,CAAuBC,KAAvB,~~EAA+B~~;~~AACrC~~,SAAOC,IAAI,CAACC,GAAL,CAAU,CAAV,EAAaD,IAAI,CAACE,GAAL,CAAU,GAAV,EAAeH,KAAf,CAAb,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,aAAT,CACNJ,KADM,EAENK,YAFM,EAGNC,WAHM,EAKL;AAAA,MADDC,WACC,~~uEADaT~~,+~~BACb~~;AACD,QAAMU,eAAe,GAAGR,KAAK,CAAEK,YAAF,CAAL,CAAsBI,QAA9C;AACA,QAAMC,WAAW,GAAGT,IAAI,CAACE,GAAL,CAAUK,eAAV,EAA2BF,WAA3B,CAApB;AACA,QAAMK,WAAW,GAAGV,IAAI,CAACC,GAAL,CAAUM,eAAV,EAA2BF,WAA3B,CAApB;AAEA,SAAON,KAAK,CAACY,IAAN,CAAY,OAAgBC,KAAhB,KAA2B;AAAA,QAAzB;AAAEJ,MAAAA;AAAF,KAAyB;AAC7C,WACCI,KAAK,KAAKR,YAAV,KACEJ,IAAI,CAACa,GAAL,CAAUL,QAAQ,GAAGH,WAArB,IAAqCC,WAArC,IACCG,WAAW,GAAGD,QAAd,IAA0BA,QAAQ,GAAGE,WAFxC,CADD;AAKA,GANM,CAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,eAAT,~~CAA0BC~~,~~MAA1B~~,~~EAAkCP~~,~~QAAlC~~,~~EAA4CQ~~,~~KAA5C~~,~~EAAoD~~;~~AAC1D~~,QAAMC,SAAS,GAAGF,MAAM,CAACG,SAAP,CACfC,KAAF,IAAaA,KAAK,CAACX,QAAN,GAAiBA,QADb,CAAlB;AAGA,QAAMY,QAAQ,GAAG;AAAEJ,IAAAA,KAAF;AAASR,IAAAA;AAAT,GAAjB;AACA,QAAMa,SAAS,GAAGN,MAAM,CAACO,KAAP,EAAlB;AACAD,EAAAA,SAAS,CAACE,MAAV,CAAkBN,SAAS,GAAG,CAA9B,EAAiC,CAAjC,EAAoCG,QAApC;AACA,SAAOC,SAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,kBAAT,CAA6BT,MAA7B,~~EAAqCH~~,~~KAArC~~,~~EAA6C~~;~~AACnD~~,SAAOG,MAAM,CAACU,MAAP,CAAe,~~CAAEN~~,~~KAAF~~,~~EAASO~~,~~UAAT~~,~~KAAyB~~;~~AAC9C~~,WAAOA,UAAU,~~KAAKd~~,KAAtB;AACA,GAFM,CAAP;AAGA;~~AAED~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,~~SAASe~~,kBAAT,~~CAA6BZ~~,~~MAA7B~~,~~EAAqCH~~,~~KAArC~~,~~EAA4CQ~~,~~QAA5C~~,~~EAAuD~~;~~AAC7D~~,~~QAAMQ~~,QAAQ,~~GAAGb~~,MAAM,CAACO,KAAP,EAAjB;~~AACAM~~,EAAAA,QAAQ,~~CAAEhB~~,KAAF,CAAR,GAAoBQ,QAApB;AACA,~~SAAOQ~~,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,0BAAT,~~CAAqCd~~,~~MAArC~~,~~EAA6CH~~,~~KAA7C~~,~~EAAoDP~~,~~WAApD~~,~~EAAkE~~;~~AACxE~~,MAAKF,aAAa,CAAEY,MAAF,EAAUH,KAAV,EAAiBP,WAAjB,CAAlB,EAAmD;AAClD,WAAOU,MAAP;AACA;;AACD,QAAMK,QAAQ,GAAG,EAChB,GAAGL,MAAM,CAAEH,KAAF,CADO;AAEhBJ,IAAAA,QAAQ,EAAEH;AAFM,GAAjB;AAIA,~~SAAOsB~~,kBAAkB,~~CAAEZ~~,MAAF,EAAUH,KAAV,EAAiBQ,QAAjB,CAAzB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,~~SAASU~~,uBAAT,~~CAAkCf~~,~~MAAlC~~,~~EAA0CH~~,~~KAA1C~~,~~EAAiDmB~~,~~QAAjD~~,~~EAA4D~~;~~AAClE~~,~~QAAMX~~,QAAQ,GAAG,EAChB,GAAGL,MAAM,CAAEH,KAAF,CADO;AAEhBI,IAAAA,KAAK,~~EAAEe~~;AAFS,GAAjB;AAIA,SAAOJ,kBAAkB,~~CAAEZ~~,MAAF,EAAUH,KAAV,EAAiBQ,QAAjB,CAAzB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,~~SAASY~~,iCAAT,~~CACNjB~~,MADM,EAENP,QAFM,~~EAGNuB~~,QAHM,EAIL;AACD,~~QAAMnB~~,KAAK,GAAGG,MAAM,CAACG,SAAP,CAAoBC,KAAF,IAAaA,KAAK,CAACX,QAAN,KAAmBA,QAAlD,CAAd;AACA,~~SAAOsB~~,uBAAuB,~~CAAEf~~,MAAF,EAAUH,KAAV,~~EAAiBmB~~,QAAjB,CAA9B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;~~AACA~~,OAAO,SAASE,qCAAT,CACNC,gBADM,EAENC,gBAFM,EAGL;AACD,MAAK,CAAEA,gBAAP,EAA0B;AACzB;AACA;;AACD,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA;AAAL,MAAeF,gBAAgB,CAACG,qBAAjB,EAArB;AACA,QAAMC,qBAAqB,GAAGL,gBAAgB,GAAGE,CAAjD;AACA,~~SAAOpC~~,IAAI,~~CAACwC~~,KAAL,~~CACN1C~~,YAAY,~~CAAIyC~~,qBAAqB,GAAG,GAA1B,GAAkCF,KAApC,CADN,CAAP;AAGA","sourcesContent":["~~// @ts-nocheck\n\n~~/*\n Internal dependencies\n /\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\~~n\n/\n~~ ~~Control point for the gradient bar.\n \n @typedef~~ {~~Object}~~ ControlPoint\n * @property {string} ~~color Color of the control point.\n * @property {number} position Integer position of the control point as a percentage.\n /\n\n/\n Color as parsed~~ from ~~the gradient by gradient-parser.\~~n \n @typedef {Object} Color\n * @property {string} r Red component.\n * @property {string} g Green component.\n * @property {string} b Green component.\n * @property {string} [a] Optional alpha component.\n /\n\n/\n Clamps a number between 0 and 100.\n \n @param ~~{number}~~ value Value to clamp.\n \n @return ~~{number}~~ Value clamped between 0 and 100.\n /\nexport function clampPercent( value ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/\n Check if a control point is overlapping with another.\n \n @param ~~{ControlPoint[]}~~ value Array of control points.\n * @param ~~{number}~~ initialIndex Index of the position to test.\n * @param ~~{number}~~ newPosition New position of the control point.\n * @param ~~{number}~~ minDistance Distance considered to be overlapping.\n \n @return ~~{boolean}~~ True if the point is overlapping.\n /\nexport function isOverlapping(\n\tvalue,\n\tinitialIndex,\n\tnewPosition,\n\tminDistance = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance \|\|\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/\n Adds a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ position Position to insert the new point.\n * @param ~~{Color}~~ color Color to update the control point at index.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function addControlPoint( ~~points,~~ ~~position,~~ color ) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/\n Removes a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ index Index to remove.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function removeControlPoint( points, index ) {\n\treturn points.filter( ( ~~point~~, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n\n/\n Updates a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ index Index to update.\n * @param ~~{ControlPoint[]}~~ newPoint New control point to replace the index.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function updateControlPoint( ~~points,~~ ~~index,~~ ~~newPoint~~ ) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ index Index to update.\n * @param ~~{number}~~ newPosition Position to move the control point at index.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function updateControlPointPosition( ~~points,~~ ~~index,~~ ~~newPosition~~ ) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ index Index to update.\n * @param ~~{Color}~~ newColor Color to update the control point at index.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function updateControlPointColor( ~~points,~~ ~~index,~~ ~~newColor~~ ) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param ~~{ControlPoint[]}~~ points Array of control points.\n * @param ~~{number}~~ position Position of the color stop.\n * @param ~~{string}~~ newColor Color to update the control point at index.\n \n @return ~~{ControlPoint[]}~~ New array of control points.\n /\nexport function updateControlPointColorByPosition(\n\tpoints,\n\tposition,\n\tnewColor\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/\n Gets the horizontal coordinate when dragging a control point with the mouse.\n \n @param ~~{number} mouseXCoordinate~~ Horizontal coordinate of the mouse position.\n * @param ~~{Element}~~ containerElement Container for the gradient picker.\n \n @return ~~{number \| undefined}~~ Whole number percentage from the left.\n /\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate,\n\tcontainerElement\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue 100 ) / width )\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.ts"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","_point","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,+BAAT,QAAgD,aAAhD;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAT,CAAuBC,KAAvB,EAAuC;AAC7C,SAAOC,IAAI,CAACC,GAAL,CAAU,CAAV,EAAaD,IAAI,CAACE,GAAL,CAAU,GAAV,EAAeH,KAAf,CAAb,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,aAAT,CACNJ,KADM,EAENK,YAFM,EAGNC,WAHM,EAKL;AAAA,MADDC,WACC,uEADqBT,+BACrB;AACD,QAAMU,eAAe,GAAGR,KAAK,CAAEK,YAAF,CAAL,CAAsBI,QAA9C;AACA,QAAMC,WAAW,GAAGT,IAAI,CAACE,GAAL,CAAUK,eAAV,EAA2BF,WAA3B,CAApB;AACA,QAAMK,WAAW,GAAGV,IAAI,CAACC,GAAL,CAAUM,eAAV,EAA2BF,WAA3B,CAApB;AAEA,SAAON,KAAK,CAACY,IAAN,CAAY,OAAgBC,KAAhB,KAA2B;AAAA,QAAzB;AAAEJ,MAAAA;AAAF,KAAyB;AAC7C,WACCI,KAAK,KAAKR,YAAV,KACEJ,IAAI,CAACa,GAAL,CAAUL,QAAQ,GAAGH,WAArB,IAAqCC,WAArC,IACCG,WAAW,GAAGD,QAAd,IAA0BA,QAAQ,GAAGE,WAFxC,CADD;AAKA,GANM,CAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,eAAT,CACNC,MADM,EAENP,QAFM,EAGNQ,KAHM,EAIL;AACD,QAAMC,SAAS,GAAGF,MAAM,CAACG,SAAP,CACfC,KAAF,IAAaA,KAAK,CAACX,QAAN,GAAiBA,QADb,CAAlB;AAGA,QAAMY,QAAQ,GAAG;AAAEJ,IAAAA,KAAF;AAASR,IAAAA;AAAT,GAAjB;AACA,QAAMa,SAAS,GAAGN,MAAM,CAACO,KAAP,EAAlB;AACAD,EAAAA,SAAS,CAACE,MAAV,CAAkBN,SAAS,GAAG,CAA9B,EAAiC,CAAjC,EAAoCG,QAApC;AACA,SAAOC,SAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,kBAAT,CAA6BT,MAA7B,EAAqDH,KAArD,EAAqE;AAC3E,SAAOG,MAAM,CAACU,MAAP,CAAe,CAAEC,MAAF,EAAUC,UAAV,KAA0B;AAC/C,WAAOA,UAAU,KAAKf,KAAtB;AACA,GAFM,CAAP;AAGA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASgB,kBAAT,CACNb,MADM,EAENH,KAFM,EAGNQ,QAHM,EAIL;AACD,QAAMS,QAAQ,GAAGd,MAAM,CAACO,KAAP,EAAjB;AACAO,EAAAA,QAAQ,CAAEjB,KAAF,CAAR,GAAoBQ,QAApB;AACA,SAAOS,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,0BAAT,CACNf,MADM,EAENH,KAFM,EAGNP,WAHM,EAIL;AACD,MAAKF,aAAa,CAAEY,MAAF,EAAUH,KAAV,EAAiBP,WAAjB,CAAlB,EAAmD;AAClD,WAAOU,MAAP;AACA;;AACD,QAAMK,QAAQ,GAAG,EAChB,GAAGL,MAAM,CAAEH,KAAF,CADO;AAEhBJ,IAAAA,QAAQ,EAAEH;AAFM,GAAjB;AAIA,SAAOuB,kBAAkB,CAAEb,MAAF,EAAUH,KAAV,EAAiBQ,QAAjB,CAAzB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASW,uBAAT,CACNhB,MADM,EAENH,KAFM,EAGNoB,QAHM,EAIL;AACD,QAAMZ,QAAQ,GAAG,EAChB,GAAGL,MAAM,CAAEH,KAAF,CADO;AAEhBI,IAAAA,KAAK,EAAEgB;AAFS,GAAjB;AAIA,SAAOJ,kBAAkB,CAAEb,MAAF,EAAUH,KAAV,EAAiBQ,QAAjB,CAAzB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASa,iCAAT,CACNlB,MADM,EAENP,QAFM,EAGNwB,QAHM,EAIL;AACD,QAAMpB,KAAK,GAAGG,MAAM,CAACG,SAAP,CAAoBC,KAAF,IAAaA,KAAK,CAACX,QAAN,KAAmBA,QAAlD,CAAd;AACA,SAAOuB,uBAAuB,CAAEhB,MAAF,EAAUH,KAAV,EAAiBoB,QAAjB,CAA9B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,SAASE,qCAAT,CACNC,gBADM,EAENC,gBAFM,EAGL;AACD,MAAK,CAAEA,gBAAP,EAA0B;AACzB;AACA;;AACD,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA;AAAL,MAAeF,gBAAgB,CAACG,qBAAjB,EAArB;AACA,QAAMC,qBAAqB,GAAGL,gBAAgB,GAAGE,CAAjD;AACA,SAAOrC,IAAI,CAACyC,KAAL,CACN3C,YAAY,CAAI0C,qBAAqB,GAAG,GAA1B,GAAkCF,KAApC,CADN,CAAP;AAGA","sourcesContent":["/*\n Internal dependencies\n /\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\nimport type { ControlPoint } from '../types';\n\n/\n Clamps a number between 0 and 100.\n \n @param value Value to clamp.\n \n @return Value clamped between 0 and 100.\n /\nexport function clampPercent( value: number ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/\n Check if a control point is overlapping with another.\n \n @param value Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition New position of the control point.\n * @param minDistance Distance considered to be overlapping.\n \n @return True if the point is overlapping.\n /\nexport function isOverlapping(\n\tvalue: ControlPoint[],\n\tinitialIndex: number,\n\tnewPosition: number,\n\tminDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance \|\|\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/\n Adds a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position to insert the new point.\n * @param color Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function addControlPoint(\n\tpoints: ControlPoint[],\n\tposition: number,\n\tcolor: ControlPoint[ 'color' ]\n) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/\n Removes a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to remove.\n \n @return New array of control points.\n /\nexport function removeControlPoint( points: ControlPoint[], index: number ) {\n\treturn points.filter( ( _point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n/\n Updates a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPoint New control point to replace the index.\n \n @return New array of control points.\n /\nexport function updateControlPoint(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPoint: ControlPoint\n) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPosition Position to move the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointPosition(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPosition: ControlPoint[ 'position' ]\n) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColor(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColorByPosition(\n\tpoints: ControlPoint[],\n\tposition: ControlPoint[ 'position' ],\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/\n Gets the horizontal coordinate when dragging a control point with the mouse.\n \n @param mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n \n @return Whole number percentage from the left.\n /\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: HTMLDivElement\n): number;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: null\n): undefined;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate: number,\n\tcontainerElement: HTMLDivElement \| null\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue 100 ) / width )\n\t);\n}\n"]}

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

@@ -1,14 +1,13 @@
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 /**
@@ -22,7 +21,7 @@ import SelectControl from '../select-control';
 import { VStack } from '../v-stack';
 import { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';
 import { serializeGradient } from './serializer';
-import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS, DEFAULT_GRADIENT } from './constants';
+import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';
 import { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';
 const GradientAnglePicker = _ref => {
@@ -39,7 +38,7 @@ const GradientAnglePicker = _ref => {
     onChange(serializeGradient({ ...gradientAST,
       orientation: {
         type: 'angular',
-        value: newAngle
+        value: `${newAngle}`
       }
     }));
   };
@@ -63,9 +62,7 @@ const GradientTypePicker = _ref2 => {
   const onSetLinearGradient = () => {
     onChange(serializeGradient({ ...gradientAST,
-      ...(gradientAST.orientation ? {} : {
-        orientation: HORIZONTAL_GRADIENT_ORIENTATION
-      }),
+      orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION,
       type: 'linear-gradient'
     }));
   };
@@ -98,30 +95,59 @@ const GradientTypePicker = _ref2 => {
     onChange: handleOnChange,
     options: GRADIENT_OPTIONS,
     size: "__unstable-large",
-    value: hasGradient && type
+    value: hasGradient ? type : undefined
   });
 };
+/**
+ * CustomGradientPicker is a React component that renders a UI for specifying
+ * linear or radial gradients. Radial gradients are displayed in the picker as
+ * a slice of the gradient from the center to the outside.
+ *
+ * ```jsx
+ * import { CustomGradientPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCustomGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState();
+ *
+ *   return (
+ *     <CustomGradientPicker
+ *			value={ gradient }
+ *			onChange={ setGradient }
+ *     />
+ *   );
+ * };
+ * ```
+ */
-export default function CustomGradientPicker(_ref3) {
+export function CustomGradientPicker(_ref3) {
   let {
     /** Start opting into the new margin-free styles that will become the default in a future version. */
     __nextHasNoMargin = false,
     value,
     onChange,
-    __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar = false
   } = _ref3;
-  const gradientAST = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient.
+  const {
+    gradientAST,
+    hasGradient
+  } = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient.
   // On radial gradients the bar represents a slice of the gradient from the center until the outside.
   // On liner gradients the bar represents the color stops from left to right independently of the angle.
-  const background = getLinearGradientRepresentation(gradientAST);
-  const hasGradient = gradientAST.value !== DEFAULT_GRADIENT; // Control points color option may be hex from presets, custom colors will be rgb.
+  const background = getLinearGradientRepresentation(gradientAST); // Control points color option may be hex from presets, custom colors will be rgb.
   // The position should always be a percentage.
-  const controlPoints = gradientAST.colorStops.map(colorStop => ({
-    color: getStopCssColor(colorStop),
-    position: parseInt(colorStop.length.value)
-  }));
+  const controlPoints = gradientAST.colorStops.map(colorStop => {
+    return {
+      color: getStopCssColor(colorStop),
+      // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
+      // TypeScript doesn't know that `colorStop.length` is not undefined here.
+      // @ts-expect-error
+      position: parseInt(colorStop.length.value)
+    };
+  });
   if (!__nextHasNoMargin) {
     deprecated('Outer margin styles for wp.components.CustomGradientPicker', {
@@ -157,4 +183,5 @@ export default function CustomGradientPicker(_ref3) {
     onChange: onChange
   }))));
 }
+export default CustomGradientPicker;
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["classnames","deprecated","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","DEFAULT_GRADIENT","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","onSetRadialGradient","restGradientAST","handleOnChange","next","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","since","version","hint","newControlPoints"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\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 =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\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\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\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\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\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\t__nextHasNoMarginBottom\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\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\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\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated(\n\t\t\t'Outer margin styles for wp.components.CustomGradientPicker',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\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</VStack>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"names":["classnames","deprecated","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","undefined","onSetRadialGradient","restGradientAST","handleOnChange","next","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","since","version","hint","newControlPoints"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type gradientParser from 'gradient-parser';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\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} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\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\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} as gradientParser.LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\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\t__nextHasNoMarginBottom\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 : undefined }\n\t\t/>\n\t);\n};\n\n/\n CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n \n ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n \n return (\n * <CustomGradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n /\nexport function CustomGradientPicker( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\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\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\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated(\n\t\t\t'Outer margin styles for wp.components.CustomGradientPicker',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\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</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"]}