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

@wordpress/components 23.5.0 → 23.6.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 (898) hide show

package/build/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":["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","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","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 } 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.js"],"names":["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","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","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"]}

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

@@ -17,6 +17,8 @@ var _utils = require("./utils");
 var _constants = require("./constants");
+// @ts-nocheck
 /**
  * External dependencies
  */

package/build/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":["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","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":";;;;;;;;;~~AAQA~~;;AALA;;AAUA;;AACA;;AACA;;~~AAfA~~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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';\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.js"],"names":["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","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","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"]}

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

@@ -15,6 +15,8 @@ exports.updateControlPointPosition = updateControlPointPosition;
 var _constants = require("./constants");
+// @ts-nocheck
 /**
  * Internal dependencies
  */

package/build/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":["clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","MINIMUM_DISTANCE_BETWEEN_POINTS","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":";;;;;;;;;;;;;;;~~AAGA~~;;~~AAHA~~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","sourcesContent":["/*\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.js"],"names":["clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","MINIMUM_DISTANCE_BETWEEN_POINTS","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":"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","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"]}

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

@@ -33,6 +33,8 @@ var _constants = require("./constants");
 var _customGradientPickerStyles = require("./styles/custom-gradient-picker-styles");
+// @ts-nocheck
 /**
  * External dependencies
  */

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

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

package/build/custom-gradient-picker/serializer.js CHANGED Viewed

@@ -9,6 +9,7 @@ exports.serializeGradientColorStop = serializeGradientColorStop;
 exports.serializeGradientOrientation = serializeGradientOrientation;
 exports.serializeGradientPosition = serializeGradientPosition;
+// @ts-nocheck
 function serializeGradientColor(_ref) {
   let {
     type,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/serializer.js"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","map","filter","Boolean"],"mappings":";;;;;;;;;;;~~AAAO~~,SAASA,sBAAT,OAAmD;AAAA,MAAlB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAkB;;AACzD,MAAKD,IAAI,KAAK,SAAd,EAA0B;AACzB,WAAOC,KAAP;AACA;;AACD,MAAKD,IAAI,KAAK,KAAd,EAAsB;AACrB,WAAQ,IAAIC,KAAO,EAAnB;AACA;;AACD,SAAQ,GAAGD,IAAM,IAAIC,KAAK,CAACC,IAAN,CAAY,GAAZ,CAAmB,GAAxC;AACA;;AAEM,SAASC,yBAAT,CAAoCC,QAApC,EAA+C;AACrD,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AACD,QAAM;AAAEH,IAAAA,KAAF;AAASD,IAAAA;AAAT,MAAkBI,QAAxB;AACA,SAAQ,GAAGH,KAAO,GAAGD,IAAM,EAA3B;AACA;;AAEM,SAASK,0BAAT,QAA+D;AAAA,MAA1B;AAAEL,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeK,IAAAA;AAAf,GAA0B;AACrE,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAG5B,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAH9C;AAIA;;AAEM,SAASC,4BAAT,CAAuCC,WAAvC,EAAqD;AAC3D,MAAK,CAAEA,WAAF,IAAiBA,WAAW,CAACR,IAAZ,KAAqB,SAA3C,EAAuD;AACtD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;;AAEM,SAASQ,iBAAT,QAAgE;AAAA,MAApC;AAAET,IAAAA,IAAF;AAAQQ,IAAAA,WAAR;AAAqBE,IAAAA;AAArB,GAAoC;AACtE,QAAMC,qBAAqB,GAAGJ,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMI,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AAAA;;AACpC,WACC,0BAAED,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAER,MAAd,uDAAE,mBAAoBL,KAAtB,yEAA+B,CAA/B,8BACEc,UADF,aACEA,UADF,6CACEA,UAAU,CAAET,MADd,uDACE,mBAAoBL,KADtB,yEAC+B,CAD/B,CADD;AAIA,GAN2B,EAO3Be,GAP2B,CAOtBX,0BAPsB,CAA7B;AAQA,SAAQ,GAAGL,IAAM,IAAI,CAAEW,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBK,MADmB,CACXC,OADW,EAEnBhB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["~~export~~ function serializeGradientColor( { type, value } ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition( position ) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( { type, value, length } ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation( orientation ) {\n\tif ( ! orientation \|\| orientation.type !== 'angular' ) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( { type, orientation, colorStops } ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\treturn (\n\t\t\t\t( colorStop1?.length?.value ?? 0 ) -\n\t\t\t\t( colorStop2?.length?.value ?? 0 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/serializer.js"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","map","filter","Boolean"],"mappings":";;;;;;;;;;;AAAA;AAEO,SAASA,sBAAT,OAAmD;AAAA,MAAlB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAkB;;AACzD,MAAKD,IAAI,KAAK,SAAd,EAA0B;AACzB,WAAOC,KAAP;AACA;;AACD,MAAKD,IAAI,KAAK,KAAd,EAAsB;AACrB,WAAQ,IAAIC,KAAO,EAAnB;AACA;;AACD,SAAQ,GAAGD,IAAM,IAAIC,KAAK,CAACC,IAAN,CAAY,GAAZ,CAAmB,GAAxC;AACA;;AAEM,SAASC,yBAAT,CAAoCC,QAApC,EAA+C;AACrD,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AACD,QAAM;AAAEH,IAAAA,KAAF;AAASD,IAAAA;AAAT,MAAkBI,QAAxB;AACA,SAAQ,GAAGH,KAAO,GAAGD,IAAM,EAA3B;AACA;;AAEM,SAASK,0BAAT,QAA+D;AAAA,MAA1B;AAAEL,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeK,IAAAA;AAAf,GAA0B;AACrE,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAG5B,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAH9C;AAIA;;AAEM,SAASC,4BAAT,CAAuCC,WAAvC,EAAqD;AAC3D,MAAK,CAAEA,WAAF,IAAiBA,WAAW,CAACR,IAAZ,KAAqB,SAA3C,EAAuD;AACtD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;;AAEM,SAASQ,iBAAT,QAAgE;AAAA,MAApC;AAAET,IAAAA,IAAF;AAAQQ,IAAAA,WAAR;AAAqBE,IAAAA;AAArB,GAAoC;AACtE,QAAMC,qBAAqB,GAAGJ,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMI,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AAAA;;AACpC,WACC,0BAAED,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAER,MAAd,uDAAE,mBAAoBL,KAAtB,yEAA+B,CAA/B,8BACEc,UADF,aACEA,UADF,6CACEA,UAAU,CAAET,MADd,uDACE,mBAAoBL,KADtB,yEAC+B,CAD/B,CADD;AAIA,GAN2B,EAO3Be,GAP2B,CAOtBX,0BAPsB,CAA7B;AAQA,SAAQ,GAAGL,IAAM,IAAI,CAAEW,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBK,MADmB,CACXC,OADW,EAEnBhB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["// @ts-nocheck\n\nexport function serializeGradientColor( { type, value } ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition( position ) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( { type, value, length } ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation( orientation ) {\n\tif ( ! orientation \|\| orientation.type !== 'angular' ) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( { type, orientation, colorStops } ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\treturn (\n\t\t\t\t( colorStop1?.length?.value ?? 0 ) -\n\t\t\t\t( colorStop2?.length?.value ?? 0 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"]}

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

@@ -20,6 +20,8 @@ var _constants = require("./constants");
 var _serializer = require("./serializer");
+// @ts-nocheck
 /**
  * External dependencies
  */

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/utils.js"],"names":["namesPlugin","getLinearGradientRepresentation","gradientAST","type","orientation","HORIZONTAL_GRADIENT_ORIENTATION","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","gradientParser","parse","error","DEFAULT_GRADIENT","DIRECTIONAL_ORIENTATION_ANGLE_MAP","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join"],"mappings":";;;;;;;;;;;;~~AAGA~~;;AACA;;AACA;;AAKA;;AAKA;;~~AAfA~~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","sourcesContent":["/*\n External dependencies\n /\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n Internal dependencies\n /\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation( gradientAST ) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item ) {\n\treturn item.length === undefined \|\| item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( value )[ 0 ];\n\t\tgradientAST.value = value;\n\t} catch ( error ) {\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\tgradientAST.value = DEFAULT_GRADIENT;\n\t}\n\n\tif ( gradientAST.orientation?.type === 'directional' ) {\n\t\tgradientAST.orientation.type = 'angular';\n\t\tgradientAST.orientation.value =\n\t\t\tDIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString();\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: step index,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t\tgradientAST.value = serializeGradient( gradientAST );\n\t}\n\n\treturn gradientAST;\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST,\n\tnewControlPoints\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue: a < 1 ? [ r, g, b, a ] : [ r, g, b ],\n\t\t\t};\n\t\t} ),\n\t};\n}\n\nexport function getStopCssColor( colorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/utils.js"],"names":["namesPlugin","getLinearGradientRepresentation","gradientAST","type","orientation","HORIZONTAL_GRADIENT_ORIENTATION","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","gradientParser","parse","error","DEFAULT_GRADIENT","DIRECTIONAL_ORIENTATION_ANGLE_MAP","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/*\n External dependencies\n /\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/\n Internal dependencies\n /\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation( gradientAST ) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item ) {\n\treturn item.length === undefined \|\| item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( value )[ 0 ];\n\t\tgradientAST.value = value;\n\t} catch ( error ) {\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\tgradientAST.value = DEFAULT_GRADIENT;\n\t}\n\n\tif ( gradientAST.orientation?.type === 'directional' ) {\n\t\tgradientAST.orientation.type = 'angular';\n\t\tgradientAST.orientation.value =\n\t\t\tDIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString();\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: step index,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t\tgradientAST.value = serializeGradient( gradientAST );\n\t}\n\n\treturn gradientAST;\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST,\n\tnewControlPoints\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue: a < 1 ? [ r, g, b, a ] : [ r, g, b ],\n\t\t\t};\n\t\t} ),\n\t};\n}\n\nexport function getStopCssColor( colorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"]}

package/build/dimension-control/index.js CHANGED Viewed

@@ -14,7 +14,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
-var _ = require("../");
+var _icon = _interopRequireDefault(require("../icon"));
+var _selectControl = _interopRequireDefault(require("../select-control"));
 var _sizes = _interopRequireWildcard(require("./sizes"));
@@ -33,6 +35,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ *
+ * ```jsx
+ * import { useState } from 'react';
+ * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ *
+ * export default function MyCustomDimensionControl() {
+ * 	const [ paddingSize, setPaddingSize ] = useState( '' );
+ *
+ * 	return (
+ * 		<DimensionControl
+ * 			label={ 'Padding' }
+ * 			icon={ 'desktop' }
+ * 			onChange={ ( value ) => setPaddingSize( value ) }
+ * 			value={ paddingSize }
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
 function DimensionControl(props) {
   const {
     label,
@@ -47,7 +73,7 @@ function DimensionControl(props) {
     const theSize = (0, _sizes.findSizeBySlug)(sizes, val);
     if (!theSize || value === theSize.slug) {
-      onChange(undefined);
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
     } else if (typeof onChange === 'function') {
       onChange(theSize.slug);
     }
@@ -67,13 +93,13 @@ function DimensionControl(props) {
     return [{
       label: (0, _i18n.__)('Default'),
       value: ''
-    }].concat(options);
+    }, ...options];
   };
-  const selectLabel = (0, _element.createElement)(_element.Fragment, null, icon && (0, _element.createElement)(_.Icon, {
+  const selectLabel = (0, _element.createElement)(_element.Fragment, null, icon && (0, _element.createElement)(_icon.default, {
     icon: icon
   }), label);
-  return (0, _element.createElement)(_.SelectControl, {
+  return (0, _element.createElement)(_selectControl.default, {
     className: (0, _classnames.default)(className, 'block-editor-dimension-control'),
     label: selectLabel,
     hideLabelFromVision: false,

package/build/dimension-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/dimension-control/index.js"],"names":["DimensionControl","props","label","value","sizes","sizesTable","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","~~concat","~~selectLabel"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;;;;;~~AAdA~~;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;~~AAIO~~,SAASA,gBAAT,CAA2BC,KAA3B,~~EAAmC~~;~~AACzC~~,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,KAAK,GAAGC,cAHH;AAILC,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,SAAS,GAAG;AANP,MAOFP,KAPJ;;AASA,QAAMQ,~~mBAAmB~~,~~GAAKC~~,GAAF,IAAW;~~AACtC~~,UAAMC,OAAO,GAAG,2BAAgBP,KAAhB,EAAuBM,GAAvB,CAAhB;;AAEA,QAAK,CAAEC,OAAF,IAAaR,KAAK,KAAKQ,OAAO,CAACC,IAApC,EAA2C;AAC1CL,MAAAA,QAAQ,~~CAAEM~~,~~SAAF~~,CAAR;AACA,KAFD,MAEO,IAAK,OAAON,QAAP,KAAoB,UAAzB,EAAsC;AAC5CA,MAAAA,QAAQ,CAAEI,OAAO,CAACC,IAAV,CAAR;AACA;AACD,~~GARD~~;;~~AAUA~~,QAAME,oBAAoB,GAAKC,QAAF,~~IAAgB~~;~~AAC5C~~,UAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAT,CAAc;AAAA,UAAE;AAAEC,QAAAA,IAAF;AAAQN,QAAAA;AAAR,OAAF;AAAA,aAAwB;AACrDV,QAAAA,KAAK,EAAEgB,IAD8C;AAErDf,QAAAA,KAAK,EAAES;AAF8C,OAAxB;AAAA,KAAd,CAAhB;AAKA,WAAO,CACN;AACCV,MAAAA,KAAK,EAAE,cAAI,SAAJ,CADR;AAECC,MAAAA,KAAK,EAAE;AAFR,KADM,~~EAKLgB~~,~~MALK~~,~~CAKGH~~,~~OALH,~~CAAP;~~AAMA~~,~~GAZD~~;;~~AAcA~~,~~QAAMI~~,WAAW,GAChB,~~qDACGd~~,IAAI,IAAI,4BAAC,~~MAAD~~;AAAM,IAAA,IAAI,EAAGA;AAAb,IADX,EAEGJ,KAFH,CADD;AAOA,SACC,4BAAC,~~eAAD~~;AACC,IAAA,SAAS,EAAG,yBACXM,SADW,EAEX,gCAFW,CADb;AAKC,IAAA,KAAK,~~EAAGY~~,WALT;AAMC,IAAA,mBAAmB,EAAG,KANvB;AAOC,IAAA,KAAK,~~EAAGjB~~,KAPT;AAQC,IAAA,QAAQ,EAAGM,mBARZ;AASC,IAAA,OAAO,EAAGK,oBAAoB,CAAEV,KAAF;AAT/B,IADD;AAaA;;eAEcJ,gB","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { Icon, SelectControl } from '../';\nimport sizesTable, { findSizeBySlug } from './sizes';\n\nexport function DimensionControl( props ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize = ( val ) => {\n\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\tif ( ! theSize \|\| value === theSize.slug ) {\n\t\t\tonChange( undefined );\n\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\tonChange( theSize.slug );\n\t\t}\n\t};\n\n\tconst formatSizesAsOptions = ( theSizes ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t]~~.concat( options )~~;\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/dimension-control/index.tsx"],"names":["DimensionControl","props","label","value","sizes","sizesTable","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAT,CAA2BC,KAA3B,EAA0D;AAChE,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,KAAK,GAAGC,cAHH;AAILC,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,SAAS,GAAG;AANP,MAOFP,KAPJ;;AASA,QAAMQ,mBAAoE,GACvEC,GAAF,IAAW;AACV,UAAMC,OAAO,GAAG,2BAAgBP,KAAhB,EAAuBM,GAAvB,CAAhB;;AAEA,QAAK,CAAEC,OAAF,IAAaR,KAAK,KAAKQ,OAAO,CAACC,IAApC,EAA2C;AAC1CL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIM,SAAJ,CAAR;AACA,KAFD,MAEO,IAAK,OAAON,QAAP,KAAoB,UAAzB,EAAsC;AAC5CA,MAAAA,QAAQ,CAAEI,OAAO,CAACC,IAAV,CAAR;AACA;AACD,GATF;;AAWA,QAAME,oBAAoB,GAAKC,QAAF,IAAwB;AACpD,UAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAT,CAAc;AAAA,UAAE;AAAEC,QAAAA,IAAF;AAAQN,QAAAA;AAAR,OAAF;AAAA,aAAwB;AACrDV,QAAAA,KAAK,EAAEgB,IAD8C;AAErDf,QAAAA,KAAK,EAAES;AAF8C,OAAxB;AAAA,KAAd,CAAhB;AAKA,WAAO,CACN;AACCV,MAAAA,KAAK,EAAE,cAAI,SAAJ,CADR;AAECC,MAAAA,KAAK,EAAE;AAFR,KADM,EAKN,GAAGa,OALG,CAAP;AAOA,GAbD;;AAeA,QAAMG,WAAW,GAChB,qDACGb,IAAI,IAAI,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADX,EAEGJ,KAFH,CADD;AAOA,SACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAG,yBACXM,SADW,EAEX,gCAFW,CADb;AAKC,IAAA,KAAK,EAAGW,WALT;AAMC,IAAA,mBAAmB,EAAG,KANvB;AAOC,IAAA,KAAK,EAAGhB,KAPT;AAQC,IAAA,QAAQ,EAAGM,mBARZ;AASC,IAAA,OAAO,EAAGK,oBAAoB,CAAEV,KAAF;AAT/B,IADD;AAaA;;eAEcJ,gB","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/\n `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n \n This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n \n ```jsx\n * import { useState } from 'react';\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n \n export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n \n \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize \|\| value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"]}

package/build/dimension-control/sizes.js CHANGED Viewed

@@ -24,10 +24,8 @@ var _i18n = require("@wordpress/i18n");
  * Finds the correct size object from the provided sizes
  * table by size slug (eg: `medium`)
  *
- * @param {Array}  sizes containing objects for each size definition.
- * @param {string} slug  a string representation of the size (eg: `medium`).
- *
- * @return {Object} the matching size definition.
+ * @param sizes containing objects for each size definition.
+ * @param slug  a string representation of the size (eg: `medium`).
  */
 const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug);

package/build/dimension-control/sizes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/dimension-control/sizes.js"],"names":["findSizeBySlug","sizes","slug","find","size","name"],"mappings":";;;;;;;AAYA;;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;~~AAGA~~;AACA;AACA;AACA;AACA;AACA;AACA;~~AACA;AACA;~~AACO,MAAMA,cAAc,GAAG,CAAEC,KAAF,~~EAASC~~,~~IAAT~~,KAC7BD,KAAK,CAACE,IAAN,CAAcC,IAAF,IAAYF,IAAI,KAAKE,IAAI,CAACF,IAAtC,CADM;;;eAGQ,CACd;AACCG,EAAAA,IAAI,EAAE,cAAI,MAAJ,EAAY,sBAAZ,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CADc,EAKd;AACCG,EAAAA,IAAI,EAAE,cAAI,OAAJ,EAAa,sBAAb,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CALc,EASd;AACCG,EAAAA,IAAI,EAAE,cAAI,QAAJ,EAAc,sBAAd,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CATc,EAad;AACCG,EAAAA,IAAI,EAAE,cAAI,OAAJ,EAAa,sBAAb,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CAbc,EAiBd;AACCG,EAAAA,IAAI,EAAE,cAAI,aAAJ,EAAmB,sBAAnB,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CAjBc,C","sourcesContent":["/*\n Sizes\n \n defines the sizes used in dimension controls\n * all hardcoded `size` values are based on the value of\n * the Sass variable `$block-padding` from\n * `packages/block-editor/src/components/dimension-control/sizes.js`.\n /\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\n\n/\n Finds the correct size object from the provided sizes\n * table by size slug (eg: `medium`)\n \n @param ~~{Array}~~ sizes containing objects for each size definition.\n * @param ~~{string}~~ slug a string representation of the size (eg: `medium`).\n \n @return {Object} the matching size definition.\n */\nexport const findSizeBySlug = ( sizes, slug ) =>\n\tsizes.find( ( size ) => slug === size.slug );\n\nexport default [\n\t{\n\t\tname: _x( 'None', 'Size of a UI element' ),\n\t\tslug: 'none',\n\t},\n\t{\n\t\tname: _x( 'Small', 'Size of a UI element' ),\n\t\tslug: 'small',\n\t},\n\t{\n\t\tname: _x( 'Medium', 'Size of a UI element' ),\n\t\tslug: 'medium',\n\t},\n\t{\n\t\tname: _x( 'Large', 'Size of a UI element' ),\n\t\tslug: 'large',\n\t},\n\t{\n\t\tname: _x( 'Extra Large', 'Size of a UI element' ),\n\t\tslug: 'xlarge',\n\t},\n];\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/dimension-control/sizes.ts"],"names":["findSizeBySlug","sizes","slug","find","size","name"],"mappings":";;;;;;;AAYA;;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,CAAEC,KAAF,EAAiBC,IAAjB,KAC7BD,KAAK,CAACE,IAAN,CAAcC,IAAF,IAAYF,IAAI,KAAKE,IAAI,CAACF,IAAtC,CADM;;;eAGQ,CACd;AACCG,EAAAA,IAAI,EAAE,cAAI,MAAJ,EAAY,sBAAZ,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CADc,EAKd;AACCG,EAAAA,IAAI,EAAE,cAAI,OAAJ,EAAa,sBAAb,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CALc,EASd;AACCG,EAAAA,IAAI,EAAE,cAAI,QAAJ,EAAc,sBAAd,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CATc,EAad;AACCG,EAAAA,IAAI,EAAE,cAAI,OAAJ,EAAa,sBAAb,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CAbc,EAiBd;AACCG,EAAAA,IAAI,EAAE,cAAI,aAAJ,EAAmB,sBAAnB,CADP;AAECH,EAAAA,IAAI,EAAE;AAFP,CAjBc,C","sourcesContent":["/*\n Sizes\n \n defines the sizes used in dimension controls\n * all hardcoded `size` values are based on the value of\n * the Sass variable `$block-padding` from\n * `packages/block-editor/src/components/dimension-control/sizes.js`.\n /\n\n/\n WordPress dependencies\n /\nimport { _x } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport type { Size } from './types';\n\n/\n Finds the correct size object from the provided sizes\n * table by size slug (eg: `medium`)\n \n @param sizes containing objects for each size definition.\n * @param slug a string representation of the size (eg: `medium`).\n */\nexport const findSizeBySlug = ( sizes: Size[], slug: string ) =>\n\tsizes.find( ( size ) => slug === size.slug );\n\nexport default [\n\t{\n\t\tname: _x( 'None', 'Size of a UI element' ),\n\t\tslug: 'none',\n\t},\n\t{\n\t\tname: _x( 'Small', 'Size of a UI element' ),\n\t\tslug: 'small',\n\t},\n\t{\n\t\tname: _x( 'Medium', 'Size of a UI element' ),\n\t\tslug: 'medium',\n\t},\n\t{\n\t\tname: _x( 'Large', 'Size of a UI element' ),\n\t\tslug: 'large',\n\t},\n\t{\n\t\tname: _x( 'Extra Large', 'Size of a UI element' ),\n\t\tslug: 'xlarge',\n\t},\n];\n"]}

package/build/dimension-control/types.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/dimension-control/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/flex/flex/hook.js CHANGED Viewed

@@ -59,7 +59,7 @@ function useDeprecatedProps(props) {
 function useFlex(props) {
   const {
-    align = 'center',
+    align,
     className,
     direction: directionProp = 'row',
     expanded = true,
@@ -74,14 +74,14 @@ function useFlex(props) {
   const cx = (0, _utils.useCx)();
   const classes = (0, _element.useMemo)(() => {
     const base = /*#__PURE__*/(0, _react.css)({
-      alignItems: isColumn ? 'normal' : align,
+      alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center',
       flexDirection: direction,
       flexWrap: wrap ? 'wrap' : undefined,
       gap: (0, _space.space)(gap),
       justifyContent: justify,
       height: isColumn && expanded ? '100%' : undefined,
       width: !isColumn && expanded ? '100%' : undefined
-    }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0RlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24gPSAnY2VudGVyJyxcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBiYXNlID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBpc0NvbHVtbiA/ICdub3JtYWwnIDogYWxpZ24sXG5cdFx0XHRmbGV4RGlyZWN0aW9uOiBkaXJlY3Rpb24sXG5cdFx0XHRmbGV4V3JhcDogd3JhcCA/ICd3cmFwJyA6IHVuZGVmaW5lZCxcblx0XHRcdGdhcDogc3BhY2UoIGdhcCApLFxuXHRcdFx0anVzdGlmeUNvbnRlbnQ6IGp1c3RpZnksXG5cdFx0XHRoZWlnaHQ6IGlzQ29sdW1uICYmIGV4cGFuZGVkID8gJzEwMCUnIDogdW5kZWZpbmVkLFxuXHRcdFx0d2lkdGg6ICEgaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0fSApO1xuXG5cdFx0cmV0dXJuIGN4KFxuXHRcdFx0c3R5bGVzLkZsZXgsXG5cdFx0XHRiYXNlLFxuXHRcdFx0aXNDb2x1bW4gPyBzdHlsZXMuSXRlbXNDb2x1bW4gOiBzdHlsZXMuSXRlbXNSb3csXG5cdFx0XHRjbGFzc05hbWVcblx0XHQpO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGN4LFxuXHRcdGRpcmVjdGlvbixcblx0XHRleHBhbmRlZCxcblx0XHRnYXAsXG5cdFx0aXNDb2x1bW4sXG5cdFx0anVzdGlmeSxcblx0XHR3cmFwLFxuXHRdICk7XG5cblx0cmV0dXJuIHsgLi4ub3RoZXJQcm9wcywgY2xhc3NOYW1lOiBjbGFzc2VzLCBpc0NvbHVtbiB9O1xufVxuIl19 */");
+    }, process.env.NODE_ENV === "production" ? "" : ";label:base;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0RlIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZmxleC9mbGV4L2hvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0sIFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi8uLi91aS91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZsZXhQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gdXNlRGVwcmVjYXRlZFByb3BzKFxuXHRwcm9wczogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPlxuKTogV29yZFByZXNzQ29tcG9uZW50UHJvcHM8IEZsZXhQcm9wcywgJ2RpdicgPiB7XG5cdGNvbnN0IHsgaXNSZXZlcnNlZCwgLi4ub3RoZXJQcm9wcyB9ID0gcHJvcHM7XG5cblx0aWYgKCB0eXBlb2YgaXNSZXZlcnNlZCAhPT0gJ3VuZGVmaW5lZCcgKSB7XG5cdFx0ZGVwcmVjYXRlZCggJ0ZsZXggaXNSZXZlcnNlZCcsIHtcblx0XHRcdGFsdGVybmF0aXZlOiAnRmxleCBkaXJlY3Rpb249XCJyb3ctcmV2ZXJzZVwiIG9yIFwiY29sdW1uLXJldmVyc2VcIicsXG5cdFx0XHRzaW5jZTogJzUuOScsXG5cdFx0fSApO1xuXHRcdHJldHVybiB7XG5cdFx0XHQuLi5vdGhlclByb3BzLFxuXHRcdFx0ZGlyZWN0aW9uOiBpc1JldmVyc2VkID8gJ3Jvdy1yZXZlcnNlJyA6ICdyb3cnLFxuXHRcdH07XG5cdH1cblxuXHRyZXR1cm4gb3RoZXJQcm9wcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUZsZXgoIHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+ICkge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGRpcmVjdGlvbjogZGlyZWN0aW9uUHJvcCA9ICdyb3cnLFxuXHRcdGV4cGFuZGVkID0gdHJ1ZSxcblx0XHRnYXAgPSAyLFxuXHRcdGp1c3RpZnkgPSAnc3BhY2UtYmV0d2VlbicsXG5cdFx0d3JhcCA9IGZhbHNlLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHVzZURlcHJlY2F0ZWRQcm9wcyggcHJvcHMgKSwgJ0ZsZXgnICk7XG5cblx0Y29uc3QgZGlyZWN0aW9uQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIGRpcmVjdGlvblByb3AgKVxuXHRcdD8gZGlyZWN0aW9uUHJvcFxuXHRcdDogWyBkaXJlY3Rpb25Qcm9wIF07XG5cdGNvbnN0IGRpcmVjdGlvbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggZGlyZWN0aW9uQXNBcnJheSApO1xuXG5cdGNvbnN0IGlzQ29sdW1uID1cblx0XHR0eXBlb2YgZGlyZWN0aW9uID09PSAnc3RyaW5nJyAmJiAhISBkaXJlY3Rpb24uaW5jbHVkZXMoICdjb2x1bW4nICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYmFzZSA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24gPz8gKCBpc0NvbHVtbiA/ICdub3JtYWwnIDogJ2NlbnRlcicgKSxcblx0XHRcdGZsZXhEaXJlY3Rpb246IGRpcmVjdGlvbixcblx0XHRcdGZsZXhXcmFwOiB3cmFwID8gJ3dyYXAnIDogdW5kZWZpbmVkLFxuXHRcdFx0Z2FwOiBzcGFjZSggZ2FwICksXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdGhlaWdodDogaXNDb2x1bW4gJiYgZXhwYW5kZWQgPyAnMTAwJScgOiB1bmRlZmluZWQsXG5cdFx0XHR3aWR0aDogISBpc0NvbHVtbiAmJiBleHBhbmRlZCA/ICcxMDAlJyA6IHVuZGVmaW5lZCxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goXG5cdFx0XHRzdHlsZXMuRmxleCxcblx0XHRcdGJhc2UsXG5cdFx0XHRpc0NvbHVtbiA/IHN0eWxlcy5JdGVtc0NvbHVtbiA6IHN0eWxlcy5JdGVtc1Jvdyxcblx0XHRcdGNsYXNzTmFtZVxuXHRcdCk7XG5cdH0sIFtcblx0XHRhbGlnbixcblx0XHRjbGFzc05hbWUsXG5cdFx0Y3gsXG5cdFx0ZGlyZWN0aW9uLFxuXHRcdGV4cGFuZGVkLFxuXHRcdGdhcCxcblx0XHRpc0NvbHVtbixcblx0XHRqdXN0aWZ5LFxuXHRcdHdyYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMsIGlzQ29sdW1uIH07XG59XG4iXX0= */");
     return cx(styles.Flex, base, isColumn ? styles.ItemsColumn : styles.ItemsRow, className);
   }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);
   return { ...otherProps,

package/build/flex/flex/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","styles","Flex","ItemsColumn","ItemsRow"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,kBAAT,CACCC,KADD,EAE+C;AAC9C,QAAM;AAAEC,IAAAA,UAAF;AAAc,OAAGC;AAAjB,MAAgCF,KAAtC;;AAEA,MAAK,OAAOC,UAAP,KAAsB,WAA3B,EAAyC;AACxC,6BAAY,iBAAZ,EAA+B;AAC9BE,MAAAA,WAAW,EAAE,kDADiB;AAE9BC,MAAAA,KAAK,EAAE;AAFuB,KAA/B;AAIA,WAAO,EACN,GAAGF,UADG;AAENG,MAAAA,SAAS,EAAEJ,UAAU,GAAG,aAAH,GAAmB;AAFlC,KAAP;AAIA;;AAED,SAAOC,UAAP;AACA;;AAEM,SAASI,OAAT,CAAkBN,KAAlB,EAAuE;AAC7E,QAAM;AACLO,IAAAA,~~KAAK,GAAG,QADH~~;AAELC,IAAAA,SAFK;AAGLH,IAAAA,SAAS,EAAEI,aAAa,GAAG,KAHtB;AAILC,IAAAA,QAAQ,GAAG,IAJN;AAKLC,IAAAA,GAAG,GAAG,CALD;AAMLC,IAAAA,OAAO,GAAG,eANL;AAOLC,IAAAA,IAAI,GAAG,KAPF;AAQL,OAAGX;AARE,MASF,+BAAkBH,kBAAkB,CAAEC,KAAF,CAApC,EAA+C,MAA/C,CATJ;AAWA,QAAMc,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAeP,aAAf,IACtBA,aADsB,GAEtB,CAAEA,aAAF,CAFH;AAGA,QAAMJ,SAAS,GAAG,4CAAoBS,gBAApB,CAAlB;AAEA,QAAMG,QAAQ,GACb,OAAOZ,SAAP,KAAqB,QAArB,IAAiC,CAAC,CAAEA,SAAS,CAACa,QAAV,CAAoB,QAApB,CADrC;AAGA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,IAAI,gBAAG,gBAAK;AACjBC,MAAAA,UAAU,~~EAAEL~~,QAAQ,GAAG,QAAH,~~GAAcV~~,~~KADjB~~;~~AAEjBgB~~,MAAAA,aAAa,EAAElB,SAFE;AAGjBmB,MAAAA,QAAQ,EAAEX,IAAI,GAAG,MAAH,GAAYY,SAHT;AAIjBd,MAAAA,GAAG,EAAE,kBAAOA,GAAP,CAJY;AAKjBe,MAAAA,cAAc,EAAEd,OALC;AAMjBe,MAAAA,MAAM,EAAEV,QAAQ,IAAIP,QAAZ,GAAuB,MAAvB,GAAgCe,SANvB;AAOjBG,MAAAA,KAAK,EAAE,CAAEX,QAAF,IAAcP,QAAd,GAAyB,MAAzB,GAAkCe;AAPxB,KAAL,~~0iHAAb~~;AAUA,WAAON,EAAE,CACRU,MAAM,CAACC,IADC,EAERT,IAFQ,EAGRJ,QAAQ,GAAGY,MAAM,CAACE,WAAV,GAAwBF,MAAM,CAACG,QAH/B,EAIRxB,SAJQ,CAAT;AAMA,GAjBe,EAiBb,CACFD,KADE,EAEFC,SAFE,EAGFW,EAHE,EAIFd,SAJE,EAKFK,QALE,EAMFC,GANE,EAOFM,QAPE,EAQFL,OARE,EASFC,IATE,CAjBa,CAAhB;AA6BA,SAAO,EAAE,GAAGX,UAAL;AAAiBM,IAAAA,SAAS,EAAEY,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign ~~= 'center'~~,\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: isColumn ? 'normal' : ~~align~~,\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flex/flex/hook.ts"],"names":["useDeprecatedProps","props","isReversed","otherProps","alternative","since","direction","useFlex","align","className","directionProp","expanded","gap","justify","wrap","directionAsArray","Array","isArray","isColumn","includes","cx","classes","base","alignItems","flexDirection","flexWrap","undefined","justifyContent","height","width","styles","Flex","ItemsColumn","ItemsRow"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,kBAAT,CACCC,KADD,EAE+C;AAC9C,QAAM;AAAEC,IAAAA,UAAF;AAAc,OAAGC;AAAjB,MAAgCF,KAAtC;;AAEA,MAAK,OAAOC,UAAP,KAAsB,WAA3B,EAAyC;AACxC,6BAAY,iBAAZ,EAA+B;AAC9BE,MAAAA,WAAW,EAAE,kDADiB;AAE9BC,MAAAA,KAAK,EAAE;AAFuB,KAA/B;AAIA,WAAO,EACN,GAAGF,UADG;AAENG,MAAAA,SAAS,EAAEJ,UAAU,GAAG,aAAH,GAAmB;AAFlC,KAAP;AAIA;;AAED,SAAOC,UAAP;AACA;;AAEM,SAASI,OAAT,CAAkBN,KAAlB,EAAuE;AAC7E,QAAM;AACLO,IAAAA,KADK;AAELC,IAAAA,SAFK;AAGLH,IAAAA,SAAS,EAAEI,aAAa,GAAG,KAHtB;AAILC,IAAAA,QAAQ,GAAG,IAJN;AAKLC,IAAAA,GAAG,GAAG,CALD;AAMLC,IAAAA,OAAO,GAAG,eANL;AAOLC,IAAAA,IAAI,GAAG,KAPF;AAQL,OAAGX;AARE,MASF,+BAAkBH,kBAAkB,CAAEC,KAAF,CAApC,EAA+C,MAA/C,CATJ;AAWA,QAAMc,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAeP,aAAf,IACtBA,aADsB,GAEtB,CAAEA,aAAF,CAFH;AAGA,QAAMJ,SAAS,GAAG,4CAAoBS,gBAApB,CAAlB;AAEA,QAAMG,QAAQ,GACb,OAAOZ,SAAP,KAAqB,QAArB,IAAiC,CAAC,CAAEA,SAAS,CAACa,QAAV,CAAoB,QAApB,CADrC;AAGA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,IAAI,gBAAG,gBAAK;AACjBC,MAAAA,UAAU,EAAEf,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAaU,QAAQ,GAAG,QAAH,GAAc,QAD5B;AAEjBM,MAAAA,aAAa,EAAElB,SAFE;AAGjBmB,MAAAA,QAAQ,EAAEX,IAAI,GAAG,MAAH,GAAYY,SAHT;AAIjBd,MAAAA,GAAG,EAAE,kBAAOA,GAAP,CAJY;AAKjBe,MAAAA,cAAc,EAAEd,OALC;AAMjBe,MAAAA,MAAM,EAAEV,QAAQ,IAAIP,QAAZ,GAAuB,MAAvB,GAAgCe,SANvB;AAOjBG,MAAAA,KAAK,EAAE,CAAEX,QAAF,IAAcP,QAAd,GAAyB,MAAzB,GAAkCe;AAPxB,KAAL,kjHAAb;AAUA,WAAON,EAAE,CACRU,MAAM,CAACC,IADC,EAERT,IAFQ,EAGRJ,QAAQ,GAAGY,MAAM,CAACE,WAAV,GAAwBF,MAAM,CAACG,QAH/B,EAIRxB,SAJQ,CAAT;AAMA,GAjBe,EAiBb,CACFD,KADE,EAEFC,SAFE,EAGFW,EAHE,EAIFd,SAJE,EAKFK,QALE,EAMFC,GANE,EAOFM,QAPE,EAQFL,OARE,EASFC,IATE,CAjBa,CAAhB;AA6BA,SAAO,EAAE,GAAGX,UAAL;AAAiBM,IAAAA,SAAS,EAAEY,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\n\n/\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useResponsiveValue } from '../../ui/utils/use-responsive-value';\nimport { space } from '../../ui/utils/space';\nimport as styles from '../styles';\nimport { useCx } from '../../utils';\nimport type { FlexProps } from '../types';\n\nfunction useDeprecatedProps(\n\tprops: WordPressComponentProps< FlexProps, 'div' >\n): WordPressComponentProps< FlexProps, 'div' > {\n\tconst { isReversed, ...otherProps } = props;\n\n\tif ( typeof isReversed !== 'undefined' ) {\n\t\tdeprecated( 'Flex isReversed', {\n\t\t\talternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n\t\t\tsince: '5.9',\n\t\t} );\n\t\treturn {\n\t\t\t...otherProps,\n\t\t\tdirection: isReversed ? 'row-reverse' : 'row',\n\t\t};\n\t}\n\n\treturn otherProps;\n}\n\nexport function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {\n\tconst {\n\t\talign,\n\t\tclassName,\n\t\tdirection: directionProp = 'row',\n\t\texpanded = true,\n\t\tgap = 2,\n\t\tjustify = 'space-between',\n\t\twrap = false,\n\t\t...otherProps\n\t} = useContextSystem( useDeprecatedProps( props ), 'Flex' );\n\n\tconst directionAsArray = Array.isArray( directionProp )\n\t\t? directionProp\n\t\t: [ directionProp ];\n\tconst direction = useResponsiveValue( directionAsArray );\n\n\tconst isColumn =\n\t\ttypeof direction === 'string' && !! direction.includes( 'column' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo( () => {\n\t\tconst base = css( {\n\t\t\talignItems: align ?? ( isColumn ? 'normal' : 'center' ),\n\t\t\tflexDirection: direction,\n\t\t\tflexWrap: wrap ? 'wrap' : undefined,\n\t\t\tgap: space( gap ),\n\t\t\tjustifyContent: justify,\n\t\t\theight: isColumn && expanded ? '100%' : undefined,\n\t\t\twidth: ! isColumn && expanded ? '100%' : undefined,\n\t\t} );\n\n\t\treturn cx(\n\t\t\tstyles.Flex,\n\t\t\tbase,\n\t\t\tisColumn ? styles.ItemsColumn : styles.ItemsRow,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\talign,\n\t\tclassName,\n\t\tcx,\n\t\tdirection,\n\t\texpanded,\n\t\tgap,\n\t\tisColumn,\n\t\tjustify,\n\t\twrap,\n\t] );\n\n\treturn { ...otherProps, className: classes, isColumn };\n}\n"]}

package/build/font-size-picker/index.js CHANGED Viewed

@@ -65,6 +65,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
     disableCustomFontSizes = false,
     onChange,
     size = 'default',
+    units: unitsProp,
     value,
     withSlider = false,
     withReset = true
@@ -79,7 +80,7 @@ const UnforwardedFontSizePicker = (props, ref) => {
   }
   const units = (0, _unitControl.useCustomUnits)({
-    availableUnits: ['px', 'em', 'rem']
+    availableUnits: unitsProp || ['px', 'em', 'rem']
   });
   const shouldUseSelectControl = fontSizes.length > 5;
   const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);