npm - @wordpress/components - Versions diffs - 25.0.0 → 25.1.1 - Mend

@wordpress/components 25.0.0 → 25.1.1

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 (1799) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,QAAuB,QAAvB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAqD,oBAArD;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,IAAT,QAAqB,kBAArB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,cAAT,QAA+B,uBAA/B;AACA,SAASC,yBAAT,QAA0C,qBAA1C;AAEA,SACCC,eADD,EAECC,YAFD,EAGCC,kBAHD,EAICC,uBAJD,EAKCC,iCALD,EAMCC,0BAND,EAOCC,qCAPD,QAQO,SARP;AASA,SACCC,wBADD,EAECC,gCAFD,QAGO,aAHP;;AAaA,SAASC,kBAAT,OAKwE;AAAA,MAL3C;AAC5BC,IAAAA,MAD4B;AAE5BC,IAAAA,QAF4B;AAG5BC,IAAAA,KAH4B;AAI5B,OAAGC;AAJyB,GAK2C;AACvE,QAAMC,UAAU,GAAG3B,aAAa,CAAEsB,kBAAF,CAAhC;AACA,QAAMM,aAAa,GAAI,uEAAuED,UAAY,EAA1G;AACA,SACC,8BACC,cAAC,MAAD;AACC,kBAAarB,OAAO,EACnB;AACAD,IAAAA,EAAE,CACD,iEADC,CAFiB,EAKnBmB,QALmB,EAMnBC,KANmB,CADrB;AASC,wBAAmBG,aATpB;AAUC,qBAAc,MAVf;AAWC,qBAAgBL,MAXjB;AAYC,IAAA,SAAS,EAAGzB,UAAU,CACrB,yDADqB,EAErB;AACC,mBAAayB;AADd,KAFqB;AAZvB,KAkBMG,eAlBN,EADD,EAqBC,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAGE;AAArB,KACGvB,EAAE,CACH,sKADG,CADL,CArBD,CADD;AA6BA;;AAED,SAASwB,2BAAT,QAIoC;AAAA,MAJE;AACrCC,IAAAA,mBADqC;AAErCC,IAAAA,SAFqC;AAGrC,OAAGC;AAHkC,GAIF;AACnC;AACA,QAAMC,YAAY,GAAG7B,OAAO,CAC3B,OACG;AACD8B,IAAAA,SAAS,EAAE,QADV;AAEDC,IAAAA,MAAM,EAAE;AAFP,GADH,CAD2B,EAM3B,EAN2B,CAA5B;AASA,QAAMC,eAAe,GAAGtC,UAAU,CACjC,2DADiC,EAEjCiC,SAFiC,CAAlC;AAKA,SACC,cAAC,yBAAD;AACC,IAAA,mBAAmB,EAAGD,mBADvB;AAEC,IAAA,YAAY,EAAGG,YAFhB;AAGC,IAAA,SAAS,EAAGG;AAHb,KAIMJ,KAJN,EADD;AAQA;;AAED,SAASK,aAAT,QAUwB;AAAA,MAVA;AACvBC,IAAAA,aADuB;AAEvBC,IAAAA,YAFuB;AAGvBC,IAAAA,oBAHuB;AAIvBC,IAAAA,oBAJuB;AAKvBC,IAAAA,KAAK,EAAEC,aALgB;AAMvBC,IAAAA,QANuB;AAOvBC,IAAAA,yBAPuB;AAQvBC,IAAAA,wBARuB;AASvBC,IAAAA;AATuB,GAUA;AACvB,QAAMC,qBAAqB,GAAG9C,MAAM,EAApC;;AAEA,QAAM+C,WAAW,GAAKC,KAAF,IAAyB;AAC5C,QACCF,qBAAqB,CAACG,OAAtB,KAAkCC,SAAlC,IACAZ,oBAAoB,CAACW,OAArB,KAAiC,IAFlC,EAGE;AACD;AACA;;AAED,UAAME,gBAAgB,GAAGlC,qCAAqC,CAC7D+B,KAAK,CAACI,OADuD,EAE7Dd,oBAAoB,CAACW,OAFwC,CAA9D;AAKA,UAAM;AAAEI,MAAAA,eAAF;AAAmBC,MAAAA,KAAnB;AAA0BC,MAAAA;AAA1B,QACLT,qBAAqB,CAACG,OADvB;;AAGA,QACC,CAAEM,uBAAF,IACAC,IAAI,CAACC,GAAL,CAAUJ,eAAe,GAAGF,gBAA5B,KACCjC,wBAHF,EAIE;AACD4B,MAAAA,qBAAqB,CAACG,OAAtB,CAA8BM,uBAA9B,GAAwD,IAAxD;AACA;;AAEDb,IAAAA,QAAQ,CACP1B,0BAA0B,CAAEyB,aAAF,EAAiBa,KAAjB,EAAwBH,gBAAxB,CADnB,CAAR;AAGA,GA3BD;;AA6BA,QAAMO,mBAAmB,GAAG,MAAM;AACjC,QACCC,MAAM,IACNA,MAAM,CAACC,mBADP,IAEAd,qBAAqB,CAACG,OAFtB,IAGAH,qBAAqB,CAACG,OAAtB,CAA8BY,kBAJ/B,EAKE;AACDF,MAAAA,MAAM,CAACC,mBAAP,CAA4B,WAA5B,EAAyCb,WAAzC;AACAY,MAAAA,MAAM,CAACC,mBAAP,CAA4B,SAA5B,EAAuCF,mBAAvC;AACAd,MAAAA,wBAAwB;AACxBE,MAAAA,qBAAqB,CAACG,OAAtB,CAA8BY,kBAA9B,GAAmD,KAAnD;AACA;AACD,GAZD,CAhCuB,CA8CvB;AACA;AACA;;;AACA,QAAMC,sBAAsB,GAAG9D,MAAM,EAArC;AACA8D,EAAAA,sBAAsB,CAACb,OAAvB,GAAiCS,mBAAjC;AAEA3D,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AAAA;;AACZ,+BAAA+D,sBAAsB,CAACb,OAAvB,qFAAAa,sBAAsB;AACtB,KAFD;AAGA,GAJQ,EAIN,EAJM,CAAT;AAMA,SACC,8BACGrB,aAAa,CAACsB,GAAd,CAAmB,CAAEC,KAAF,EAASV,KAAT,KAAoB;AACxC,UAAMD,eAAe,GAAGW,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAE1C,QAA/B;AACA,WACCiB,oBAAoB,KAAKc,eAAzB,IACC,cAAC,2BAAD;AACC,MAAA,mBAAmB,EAClBR,iCAFF;AAIC,MAAA,GAAG,EAAGS,KAJP;AAKC,MAAA,OAAO,EAAGV,wBALX;AAMC,MAAA,YAAY,EAAG;AAAA,YAAE;AAAEvB,UAAAA,MAAF;AAAU4C,UAAAA;AAAV,SAAF;AAAA,eACd,cAAC,kBAAD;AACC,UAAA,GAAG,EAAGX,KADP;AAEC,UAAA,OAAO,EAAG,MAAM;AACf,gBACCR,qBAAqB,CAACG,OAAtB,IACAH,qBAAqB,CAACG,OAAtB,CACEM,uBAHH,EAIE;AACD;AACA;;AACD,gBAAKlC,MAAL,EAAc;AACbuB,cAAAA,wBAAwB;AACxB,aAFD,MAEO;AACND,cAAAA,yBAAyB;AACzB;;AACDsB,YAAAA,QAAQ;AACR,WAhBF;AAiBC,UAAA,WAAW,EAAG,MAAM;AACnB,gBACCN,MAAM,IACNA,MAAM,CAACO,gBAFR,EAGE;AACDpB,cAAAA,qBAAqB,CAACG,OAAtB,GAAgC;AAC/BI,gBAAAA,eAD+B;AAE/BC,gBAAAA,KAF+B;AAG/BC,gBAAAA,uBAAuB,EAAE,KAHM;AAI/BM,gBAAAA,kBAAkB,EAAE;AAJW,eAAhC;AAMAlB,cAAAA,yBAAyB;AACzBgB,cAAAA,MAAM,CAACO,gBAAP,CACC,WADD,EAECnB,WAFD;AAIAY,cAAAA,MAAM,CAACO,gBAAP,CACC,SADD,EAECR,mBAFD;AAIA;AACD,WAtCF;AAuCC,UAAA,SAAS,EAAKV,KAAF,IAAa;AACxB,gBAAKA,KAAK,CAACmB,IAAN,KAAe,WAApB,EAAkC;AACjC;AACA;AACAnB,cAAAA,KAAK,CAACoB,eAAN;AACA1B,cAAAA,QAAQ,CACP1B,0BAA0B,CACzByB,aADyB,EAEzBa,KAFyB,EAGzB1C,YAAY,CACXoD,KAAK,CAAC1C,QAAN,GACCH,gCAFU,CAHa,CADnB,CAAR;AAUA,aAdD,MAcO,IACN6B,KAAK,CAACmB,IAAN,KAAe,YADT,EAEL;AACD;AACA;AACAnB,cAAAA,KAAK,CAACoB,eAAN;AACA1B,cAAAA,QAAQ,CACP1B,0BAA0B,CACzByB,aADyB,EAEzBa,KAFyB,EAGzB1C,YAAY,CACXoD,KAAK,CAAC1C,QAAN,GACCH,gCAFU,CAHa,CADnB,CAAR;AAUA;AACD,WAvEF;AAwEC,UAAA,MAAM,EAAGE,MAxEV;AAyEC,UAAA,QAAQ,EAAG2C,KAAK,CAAC1C,QAzElB;AA0EC,UAAA,KAAK,EAAG0C,KAAK,CAACzC;AA1Ef,UADc;AAAA,OANhB;AAoFC,MAAA,aAAa,EAAG;AAAA,YAAE;AAAE8C,UAAAA;AAAF,SAAF;AAAA,eACf,8BACC,cAAC,WAAD;AACC,UAAA,WAAW,EAAG,CAAEhC,YADjB;AAEC,UAAA,KAAK,EAAG2B,KAAK,CAACzC,KAFf;AAGC,UAAA,QAAQ,EAAKA,KAAF,IAAa;AACvBmB,YAAAA,QAAQ,CACP5B,uBAAuB,CACtB2B,aADsB,EAEtBa,KAFsB,EAGtBzD,MAAM,CACL0B,KADK,CAAN,CAEE+C,WAFF,EAHsB,CADhB,CAAR;AASA;AAbF,UADD,EAgBG,CAAElC,aAAF,IACDK,aAAa,CAAC8B,MAAd,GAAuB,CADtB,IAEA,cAAC,MAAD;AACC,UAAA,SAAS,EAAC,iEADX;AAEC,UAAA,SAAS,EAAC;AAFX,WAIC,cAAC,MAAD;AACC,UAAA,OAAO,EAAG,MAAM;AACf7B,YAAAA,QAAQ,CACP7B,kBAAkB,CACjB4B,aADiB,EAEjBa,KAFiB,CADX,CAAR;AAMAe,YAAAA,OAAO;AACP,WATF;AAUC,UAAA,OAAO,EAAC;AAVT,WAYGlE,EAAE,CACH,sBADG,CAZL,CAJD,CAlBH,CADe;AAAA,OApFjB;AA+HC,MAAA,KAAK,EAAG;AACPqE,QAAAA,IAAI,EAAG,GAAGR,KAAK,CAAC1C,QAAU,GADnB;AAEPmD,QAAAA,SAAS,EAAE;AAFJ;AA/HT,MAFF;AAwIA,GA1IC,CADH,CADD;AA+IA;;AAED,SAASC,WAAT,QAQsB;AAAA,MARA;AACrBlC,IAAAA,KAAK,EAAEC,aADc;AAErBC,IAAAA,QAFqB;AAGrBiC,IAAAA,cAHqB;AAIrBC,IAAAA,eAJqB;AAKrBC,IAAAA,cALqB;AAMrBxC,IAAAA,YANqB;AAOrBQ,IAAAA;AAPqB,GAQA;AACrB,QAAM,CAAEiC,oBAAF,EAAwBC,uBAAxB,IAAoD9E,QAAQ,CAAE,KAAF,CAAlE;AACA,SACC,cAAC,2BAAD;AACC,IAAA,mBAAmB,EAAG4C,iCADvB;AAEC,IAAA,SAAS,EAAC,6CAFX;AAGC,IAAA,OAAO,EAAG,MAAM;AACf+B,MAAAA,eAAe;AACf,KALF;AAMC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEvD,QAAAA,MAAF;AAAU4C,QAAAA;AAAV,OAAF;AAAA,aACd,cAAC,MAAD;AACC,yBAAgB5C,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAG,MAAM;AACf,cAAKA,MAAL,EAAc;AACbuD,YAAAA,eAAe;AACf,WAFD,MAEO;AACNG,YAAAA,uBAAuB,CAAE,KAAF,CAAvB;AACAJ,YAAAA,cAAc;AACd;;AACDV,UAAAA,QAAQ;AACR,SAXF;AAYC,QAAA,SAAS,EAAC,0DAZX;AAaC,QAAA,IAAI,EAAG5D;AAbR,QADc;AAAA,KANhB;AAuBC,IAAA,aAAa,EAAG,MACf,cAAC,WAAD;AACC,MAAA,WAAW,EAAG,CAAEgC,YADjB;AAEC,MAAA,QAAQ,EAAKd,KAAF,IAAa;AACvB,YAAK,CAAEuD,oBAAP,EAA8B;AAC7BpC,UAAAA,QAAQ,CACP/B,eAAe,CACd8B,aADc,EAEdoC,cAFc,EAGdhF,MAAM,CAAE0B,KAAF,CAAN,CAAgB+C,WAAhB,EAHc,CADR,CAAR;AAOAS,UAAAA,uBAAuB,CAAE,IAAF,CAAvB;AACA,SATD,MASO;AACNrC,UAAAA,QAAQ,CACP3B,iCAAiC,CAChC0B,aADgC,EAEhCoC,cAFgC,EAGhChF,MAAM,CAAE0B,KAAF,CAAN,CAAgB+C,WAAhB,EAHgC,CAD1B,CAAR;AAOA;AACD;AArBF,MAxBF;AAgDC,IAAA,KAAK,EACJO,cAAc,KAAK,IAAnB,GACG;AACAL,MAAAA,IAAI,EAAG,GAAGK,cAAgB,GAD1B;AAEAJ,MAAAA,SAAS,EAAE;AAFX,KADH,GAKGvB;AAtDL,IADD;AA2DA;;AACDf,aAAa,CAACuC,WAAd,GAA4BA,WAA5B;AAEA,eAAevC,aAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} as const ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined \|\|\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"names":["classnames","colord","useInstanceId","useEffect","useRef","useState","useMemo","__","sprintf","plus","Button","HStack","ColorPicker","VisuallyHidden","CustomColorPickerDropdown","addControlPoint","clampPercent","removeControlPoint","updateControlPointColor","updateControlPointColorByPosition","updateControlPointPosition","getHorizontalRelativeGradientPosition","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} as const ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined \|\|\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.ts"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","_point","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,+BAAT,QAAgD,aAAhD;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAT,CAAuBC,KAAvB,EAAuC;AAC7C,SAAOC,IAAI,CAACC,GAAL,CAAU,CAAV,EAAaD,IAAI,CAACE,GAAL,CAAU,GAAV,EAAeH,KAAf,CAAb,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,aAAT,CACNJ,KADM,EAENK,YAFM,EAGNC,WAHM,~~EAKL;AAAA~~,~~MADDC~~,~~WACC~~,~~uEADqBT,+BACrB~~;AACD,QAAMU,eAAe,GAAGR,KAAK,CAAEK,YAAF,CAAL,CAAsBI,QAA9C;AACA,QAAMC,WAAW,GAAGT,IAAI,CAACE,GAAL,CAAUK,eAAV,EAA2BF,WAA3B,CAApB;AACA,QAAMK,WAAW,GAAGV,IAAI,CAACC,GAAL,CAAUM,eAAV,EAA2BF,WAA3B,CAApB;AAEA,SAAON,KAAK,CAACY,IAAN,CAAY,~~OAAgBC,KAAhB,KAA2B~~;~~AAAA~~,~~QAAzB~~;~~AAAEJ,MAAAA;~~AAAF,~~KAAyB~~;AAC7C,~~WACCI~~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","sourcesContent":["/*\n Internal dependencies\n /\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\nimport type { ControlPoint } from '../types';\n\n/\n Clamps a number between 0 and 100.\n \n @param value Value to clamp.\n \n @return Value clamped between 0 and 100.\n /\nexport function clampPercent( value: number ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/\n Check if a control point is overlapping with another.\n \n @param value Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition New position of the control point.\n * @param minDistance Distance considered to be overlapping.\n \n @return True if the point is overlapping.\n /\nexport function isOverlapping(\n\tvalue: ControlPoint[],\n\tinitialIndex: number,\n\tnewPosition: number,\n\tminDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance \|\|\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/\n Adds a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position to insert the new point.\n * @param color Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function addControlPoint(\n\tpoints: ControlPoint[],\n\tposition: number,\n\tcolor: ControlPoint[ 'color' ]\n) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/\n Removes a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to remove.\n \n @return New array of control points.\n /\nexport function removeControlPoint( points: ControlPoint[], index: number ) {\n\treturn points.filter( ( _point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n/\n Updates a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPoint New control point to replace the index.\n \n @return New array of control points.\n /\nexport function updateControlPoint(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPoint: ControlPoint\n) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPosition Position to move the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointPosition(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPosition: ControlPoint[ 'position' ]\n) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColor(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColorByPosition(\n\tpoints: ControlPoint[],\n\tposition: ControlPoint[ 'position' ],\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/\n Gets the horizontal coordinate when dragging a control point with the mouse.\n \n @param mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n \n @return Whole number percentage from the left.\n /\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: HTMLDivElement\n): number;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: null\n): undefined;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate: number,\n\tcontainerElement: HTMLDivElement \| null\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue 100 ) / width )\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/utils.ts"],"names":["MINIMUM_DISTANCE_BETWEEN_POINTS","clampPercent","value","Math","max","min","isOverlapping","initialIndex","newPosition","minDistance","initialPosition","position","minPosition","maxPosition","some","index","abs","addControlPoint","points","color","nextIndex","findIndex","point","newPoint","newPoints","slice","splice","removeControlPoint","filter","_point","pointIndex","updateControlPoint","newValue","updateControlPointPosition","updateControlPointColor","newColor","updateControlPointColorByPosition","getHorizontalRelativeGradientPosition","mouseXCoordinate","containerElement","x","width","getBoundingClientRect","absolutePositionValue","round"],"mappings":"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","sourcesContent":["/*\n Internal dependencies\n /\nimport { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';\nimport type { ControlPoint } from '../types';\n\n/\n Clamps a number between 0 and 100.\n \n @param value Value to clamp.\n \n @return Value clamped between 0 and 100.\n /\nexport function clampPercent( value: number ) {\n\treturn Math.max( 0, Math.min( 100, value ) );\n}\n\n/\n Check if a control point is overlapping with another.\n \n @param value Array of control points.\n * @param initialIndex Index of the position to test.\n * @param newPosition New position of the control point.\n * @param minDistance Distance considered to be overlapping.\n \n @return True if the point is overlapping.\n /\nexport function isOverlapping(\n\tvalue: ControlPoint[],\n\tinitialIndex: number,\n\tnewPosition: number,\n\tminDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS\n) {\n\tconst initialPosition = value[ initialIndex ].position;\n\tconst minPosition = Math.min( initialPosition, newPosition );\n\tconst maxPosition = Math.max( initialPosition, newPosition );\n\n\treturn value.some( ( { position }, index ) => {\n\t\treturn (\n\t\t\tindex !== initialIndex &&\n\t\t\t( Math.abs( position - newPosition ) < minDistance \|\|\n\t\t\t\t( minPosition < position && position < maxPosition ) )\n\t\t);\n\t} );\n}\n\n/\n Adds a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position to insert the new point.\n * @param color Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function addControlPoint(\n\tpoints: ControlPoint[],\n\tposition: number,\n\tcolor: ControlPoint[ 'color' ]\n) {\n\tconst nextIndex = points.findIndex(\n\t\t( point ) => point.position > position\n\t);\n\tconst newPoint = { color, position };\n\tconst newPoints = points.slice();\n\tnewPoints.splice( nextIndex - 1, 0, newPoint );\n\treturn newPoints;\n}\n\n/\n Removes a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to remove.\n \n @return New array of control points.\n /\nexport function removeControlPoint( points: ControlPoint[], index: number ) {\n\treturn points.filter( ( _point, pointIndex ) => {\n\t\treturn pointIndex !== index;\n\t} );\n}\n/\n Updates a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPoint New control point to replace the index.\n \n @return New array of control points.\n /\nexport function updateControlPoint(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPoint: ControlPoint\n) {\n\tconst newValue = points.slice();\n\tnewValue[ index ] = newPoint;\n\treturn newValue;\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newPosition Position to move the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointPosition(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewPosition: ControlPoint[ 'position' ]\n) {\n\tif ( isOverlapping( points, index, newPosition ) ) {\n\t\treturn points;\n\t}\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tposition: newPosition,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param index Index to update.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColor(\n\tpoints: ControlPoint[],\n\tindex: number,\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst newPoint = {\n\t\t...points[ index ],\n\t\tcolor: newColor,\n\t};\n\treturn updateControlPoint( points, index, newPoint );\n}\n\n/\n Updates the position of a control point from an array and returns the new array.\n \n @param points Array of control points.\n * @param position Position of the color stop.\n * @param newColor Color to update the control point at index.\n \n @return New array of control points.\n /\nexport function updateControlPointColorByPosition(\n\tpoints: ControlPoint[],\n\tposition: ControlPoint[ 'position' ],\n\tnewColor: ControlPoint[ 'color' ]\n) {\n\tconst index = points.findIndex( ( point ) => point.position === position );\n\treturn updateControlPointColor( points, index, newColor );\n}\n\n/\n Gets the horizontal coordinate when dragging a control point with the mouse.\n \n @param mouseXcoordinate Horizontal coordinate of the mouse position.\n * @param containerElement Container for the gradient picker.\n \n @return Whole number percentage from the left.\n /\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: HTMLDivElement\n): number;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXcoordinate: number,\n\tcontainerElement: null\n): undefined;\nexport function getHorizontalRelativeGradientPosition(\n\tmouseXCoordinate: number,\n\tcontainerElement: HTMLDivElement \| null\n) {\n\tif ( ! containerElement ) {\n\t\treturn;\n\t}\n\tconst { x, width } = containerElement.getBoundingClientRect();\n\tconst absolutePositionValue = mouseXCoordinate - x;\n\treturn Math.round(\n\t\tclampPercent( ( absolutePositionValue 100 ) / width )\n\t);\n}\n"]}

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

@@ -24,15 +24,14 @@ import { serializeGradient } from './serializer';
 import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION, GRADIENT_OPTIONS } from './constants';
 import { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';
-const GradientAnglePicker = _ref => {
-  var _gradientAST$orientat, _gradientAST$orientat2;
+const GradientAnglePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
+  var _gradientAST$orientat;
-  let {
-    gradientAST,
-    hasGradient,
-    onChange
-  } = _ref;
-  const angle = (_gradientAST$orientat = gradientAST === null || gradientAST === void 0 ? void 0 : (_gradientAST$orientat2 = gradientAST.orientation) === null || _gradientAST$orientat2 === void 0 ? void 0 : _gradientAST$orientat2.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
+  const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
   const onAngleChange = newAngle => {
     onChange(serializeGradient({ ...gradientAST,
@@ -50,12 +49,11 @@ const GradientAnglePicker = _ref => {
   });
 };
-const GradientTypePicker = _ref2 => {
-  let {
-    gradientAST,
-    hasGradient,
-    onChange
-  } = _ref2;
+const GradientTypePicker = ({
+  gradientAST,
+  hasGradient,
+  onChange
+}) => {
   const {
     type
   } = gradientAST;
@@ -121,14 +119,13 @@ const GradientTypePicker = _ref2 => {
  */
-export function CustomGradientPicker(_ref3) {
-  let {
-    /** Start opting into the new margin-free styles that will become the default in a future version. */
-    __nextHasNoMargin = false,
-    value,
-    onChange,
-    __experimentalIsRenderedInSidebar = false
-  } = _ref3;
+export function CustomGradientPicker({
+  /** Start opting into the new margin-free styles that will become the default in a future version. */
+  __nextHasNoMargin = false,
+  value,
+  onChange,
+  __experimentalIsRenderedInSidebar = false
+}) {
   const {
     gradientAST,
     hasGradient

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"names":["classnames","deprecated","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","undefined","onSetRadialGradient","restGradientAST","handleOnChange","next","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","since","version","hint","newControlPoints"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type gradientParser from 'gradient-parser';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} as gradientParser.LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/\n CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n \n ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n \n return (\n * <CustomGradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n /\nexport function CustomGradientPicker( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated(\n\t\t\t'Outer margin styles for wp.components.CustomGradientPicker',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"names":["classnames","deprecated","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","VStack","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","orientation","value","onAngleChange","newAngle","type","GradientTypePicker","onSetLinearGradient","undefined","onSetRadialGradient","restGradientAST","handleOnChange","next","CustomGradientPicker","__nextHasNoMargin","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","since","version","hint","newControlPoints"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AACA,OAAOC,iBAAP,MAA8B,gBAA9B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SACCC,yBADD,EAECC,+BAFD,EAGCC,+BAHD,EAICC,eAJD,QAKO,SALP;AAMA,SAASC,iBAAT,QAAkC,cAAlC;AACA,SACCC,6BADD,EAECC,+BAFD,EAGCC,gBAHD,QAIO,aAJP;AAKA,SACCC,gBADD,EAECC,aAFD,QAGO,wCAHP;;AAUA,MAAMC,mBAAmB,GAAG,CAAE;AAC7BC,EAAAA,WAD6B;AAE7BC,EAAAA,WAF6B;AAG7BC,EAAAA;AAH6B,CAAF,KAIK;AAAA;;AAChC,QAAMC,KAAK,4BACVH,WAAW,EAAEI,WAAb,EAA0BC,KADhB,yEACyBX,6BADpC;;AAEA,QAAMY,aAAa,GAAKC,QAAF,IAAwB;AAC7CL,IAAAA,QAAQ,CACPT,iBAAiB,CAAE,EAClB,GAAGO,WADe;AAElBI,MAAAA,WAAW,EAAE;AACZI,QAAAA,IAAI,EAAE,SADM;AAEZH,QAAAA,KAAK,EAAG,GAAGE,QAAU;AAFT;AAFK,KAAF,CADV,CAAR;AASA,GAVD;;AAWA,SACC,cAAC,kBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,QAAQ,EAAGD,aAFZ;AAGC,IAAA,KAAK,EAAGL,WAAW,GAAGE,KAAH,GAAW;AAH/B,IADD;AAOA,CAzBD;;AA2BA,MAAMM,kBAAkB,GAAG,CAAE;AAC5BT,EAAAA,WAD4B;AAE5BC,EAAAA,WAF4B;AAG5BC,EAAAA;AAH4B,CAAF,KAIK;AAC/B,QAAM;AAAEM,IAAAA;AAAF,MAAWR,WAAjB;;AAEA,QAAMU,mBAAmB,GAAG,MAAM;AACjCR,IAAAA,QAAQ,CACPT,iBAAiB,CAAE,EAClB,GAAGO,WADe;AAElBI,MAAAA,WAAW,EAAEJ,WAAW,CAACI,WAAZ,GACVO,SADU,GAEVhB,+BAJe;AAKlBa,MAAAA,IAAI,EAAE;AALY,KAAF,CADV,CAAR;AASA,GAVD;;AAYA,QAAMI,mBAAmB,GAAG,MAAM;AACjC,UAAM;AAAER,MAAAA,WAAF;AAAe,SAAGS;AAAlB,QAAsCb,WAA5C;AACAE,IAAAA,QAAQ,CACPT,iBAAiB,CAAE,EAClB,GAAGoB,eADe;AAElBL,MAAAA,IAAI,EAAE;AAFY,KAAF,CADV,CAAR;AAMA,GARD;;AAUA,QAAMM,cAAc,GAAKC,IAAF,IAAoB;AAC1C,QAAKA,IAAI,KAAK,iBAAd,EAAkC;AACjCL,MAAAA,mBAAmB;AACnB;;AACD,QAAKK,IAAI,KAAK,iBAAd,EAAkC;AACjCH,MAAAA,mBAAmB;AACnB;AACD,GAPD;;AASA,SACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,SAAS,EAAC,gDAFX;AAGC,IAAA,KAAK,EAAG7B,EAAE,CAAE,MAAF,CAHX;AAIC,IAAA,aAAa,EAAC,KAJf;AAKC,IAAA,QAAQ,EAAG+B,cALZ;AAMC,IAAA,OAAO,EAAGlB,gBANX;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,KAAK,EAAGK,WAAW,GAAGO,IAAH,GAAUG;AAR9B,IADD;AAYA,CAlDD;AAoDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASK,oBAAT,CAA+B;AACrC;AACAC,EAAAA,iBAAiB,GAAG,KAFiB;AAGrCZ,EAAAA,KAHqC;AAIrCH,EAAAA,QAJqC;AAKrCgB,EAAAA,iCAAiC,GAAG;AALC,CAA/B,EAMwB;AAC9B,QAAM;AAAElB,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAA+BZ,yBAAyB,CAAEgB,KAAF,CAA9D,CAD8B,CAG9B;AACA;AACA;;AACA,QAAMc,UAAU,GAAG7B,+BAA+B,CAAEU,WAAF,CAAlD,CAN8B,CAQ9B;AACA;;AACA,QAAMoB,aAAa,GAAGpB,WAAW,CAACqB,UAAZ,CAAuBC,GAAvB,CAA8BC,SAAF,IAAiB;AAClE,WAAO;AACNC,MAAAA,KAAK,EAAEhC,eAAe,CAAE+B,SAAF,CADhB;AAEN;AACA;AACA;AACAE,MAAAA,QAAQ,EAAEC,QAAQ,CAAEH,SAAS,CAACI,MAAV,CAAiBtB,KAAnB;AALZ,KAAP;AAOA,GARqB,CAAtB;;AAUA,MAAK,CAAEY,iBAAP,EAA2B;AAC1BnC,IAAAA,UAAU,CACT,4DADS,EAET;AACC8C,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFS,CAAV;AAQA;;AAED,SACC,cAAC,MAAD;AACC,IAAA,OAAO,EAAG,CADX;AAEC,IAAA,SAAS,EAAGjD,UAAU,CAAE,mCAAF,EAAuC;AAC5D,+BAAyBoC;AADmC,KAAvC;AAFvB,KAMC,cAAC,iBAAD;AACC,IAAA,iCAAiC,EAChCC,iCAFF;AAIC,IAAA,UAAU,EAAGC,UAJd;AAKC,IAAA,WAAW,EAAGlB,WALf;AAMC,IAAA,KAAK,EAAGmB,aANT;AAOC,IAAA,QAAQ,EAAKW,gBAAF,IAAwB;AAClC7B,MAAAA,QAAQ,CACPT,iBAAiB,CAChBF,+BAA+B,CAC9BS,WAD8B,EAE9B+B,gBAF8B,CADf,CADV,CAAR;AAQA;AAhBF,IAND,EAwBC,cAAC,IAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC,cAAC,aAAD,QACC,cAAC,kBAAD;AACC,IAAA,WAAW,EAAG/B,WADf;AAEC,IAAA,WAAW,EAAGC,WAFf;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IADD,CAJD,EAWC,cAAC,gBAAD,QACGF,WAAW,CAACQ,IAAZ,KAAqB,iBAArB,IACD,cAAC,mBAAD;AACC,IAAA,WAAW,EAAGR,WADf;AAEC,IAAA,WAAW,EAAGC,WAFf;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IAFF,CAXD,CAxBD,CADD;AAgDA;AAED,eAAec,oBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type gradientParser from 'gradient-parser';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} as gradientParser.LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/\n CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n \n ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n \n return (\n * <CustomGradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n /\nexport function CustomGradientPicker( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated(\n\t\t\t'Outer margin styles for wp.components.CustomGradientPicker',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName={ classnames( 'components-custom-gradient-picker', {\n\t\t\t\t'is-next-has-no-margin': __nextHasNoMargin,\n\t\t\t} ) }\n\t\t>\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"]}

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

@@ -16,12 +16,11 @@ import { serializeGradient } from './serializer';
 import { DEFAULT_LINEAR_GRADIENT_ANGLE, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';
 import styles from './style.scss';
-function CustomGradientPicker(_ref) {
-  let {
-    setColor,
-    currentValue,
-    isGradientColor
-  } = _ref;
+function CustomGradientPicker({
+  setColor,
+  currentValue,
+  isGradientColor
+}) {
   const [gradientOrientation, setGradientOrientation] = useState(HORIZONTAL_GRADIENT_ORIENTATION);
   const [currentColor, setCurrentColor] = useState(currentValue);
   const {
@@ -79,9 +78,9 @@ function CustomGradientPicker(_ref) {
   }
   function getGradientAngle() {
-    var _gradientAST$orientat, _gradientAST$orientat2;
+    var _gradientAST$orientat;
-    return (_gradientAST$orientat = gradientAST === null || gradientAST === void 0 ? void 0 : (_gradientAST$orientat2 = gradientAST.orientation) === null || _gradientAST$orientat2 === void 0 ? void 0 : _gradientAST$orientat2.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
+    return (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE;
   }
   return createElement(Fragment, null, createElement(PanelBody, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.native.js"],"names":["PanelBody","RadioControl","RangeControl","__","useState","colorsUtils","getGradientAstWithDefault","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","styles","CustomGradientPicker","setColor","currentValue","isGradientColor","gradientOrientation","setGradientOrientation","currentColor","setCurrentColor","getGradientType","gradients","gradientOptions","gradientAST","gradientType","isLinearGradient","type","linear","getGradientColor","orientation","restGradientAST","onGradientTypeChange","gradientColor","setGradientAngle","value","getGradientAngle","angleControl"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,YAApB,EAAkCC,YAAlC,QAAsD,uBAAtD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,yBAAT,QAA0C,SAA1C;AACA,SAASC,iBAAT,QAAkC,cAAlC;AACA,SACCC,6BADD,EAECC,+BAFD,QAGO,aAHP;AAIA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,SAASC,oBAAT,~~OAA6E~~;~~AAAA,MAA9C;~~AAAEC,~~IAAAA~~,QAAF;AAAYC,~~IAAAA~~,YAAZ;AAA0BC,~~IAAAA~~;AAA1B,~~GAA8C~~;AAC5E,QAAM,CAAEC,mBAAF,EAAuBC,sBAAvB,IAAkDZ,QAAQ,CAC/DK,+BAD+D,CAAhE;AAIA,QAAM,CAAEQ,YAAF,EAAgBC,eAAhB,IAAoCd,QAAQ,CAAES,YAAF,CAAlD;AAEA,QAAM;AAAEM,IAAAA,eAAF;AAAmBC,IAAAA,SAAnB;AAA8BC,IAAAA;AAA9B,MAAkDhB,WAAxD;AACA,QAAM;AAAEiB,IAAAA;AAAF,MAAkBhB,yBAAyB,CAAEW,YAAF,CAAjD;AACA,QAAMM,YAAY,GAAGJ,eAAe,CAAEF,YAAF,CAApC;;AAEA,WAASO,gBAAT,CAA2BC,IAA3B,EAAkC;AACjC,WAAOA,IAAI,KAAKL,SAAS,CAACM,MAA1B;AACA;;AAED,WAASC,gBAAT,CAA2BF,IAA3B,EAAkC;AACjC,UAAM;AAAEG,MAAAA,WAAF;AAAe,SAAGC;AAAlB,QAAsCP,WAA5C;;AAEA,QAAKM,WAAL,EAAmB;AAClBZ,MAAAA,sBAAsB,CAAEY,WAAF,CAAtB;AACA;;AAED,WAAOrB,iBAAiB,CACvBiB,gBAAgB,CAAEC,IAAF,CAAhB,GACG,EACA,GAAGH,WADH;AAEA,UAAKA,WAAW,CAACM,WAAZ,GACF,EADE,GAEF;AACAA,QAAAA,WAAW,EAAEb;AADb,OAFH,CAFA;AAOAU,MAAAA;AAPA,KADH,GAUG,EACA,GAAGI,eADH;AAEAJ,MAAAA;AAFA,KAXoB,CAAxB;AAgBA;;AAED,WAASK,oBAAT,CAA+BL,IAA/B,EAAsC;AACrC,UAAMM,aAAa,GAAGJ,gBAAgB,CAAEF,IAAF,CAAtC;AACAP,IAAAA,eAAe,CAAEa,aAAF,CAAf;AACAnB,IAAAA,QAAQ,CAAEmB,aAAF,CAAR;AACA;;AAED,WAASC,gBAAT,CAA2BC,KAA3B,EAAmC;AAClC,UAAMF,aAAa,GAAGxB,iBAAiB,CAAE,EACxC,GAAGe,WADqC;AAExCM,MAAAA,WAAW,EAAE;AACZH,QAAAA,IAAI,EAAE,SADM;AAEZQ,QAAAA;AAFY;AAF2B,KAAF,CAAvC;;AAQA,QAAKnB,eAAe,IAAIiB,aAAa,KAAKd,YAA1C,EAAyD;AACxDC,MAAAA,eAAe,CAAEa,aAAF,CAAf;AACAnB,MAAAA,QAAQ,CAAEmB,aAAF,CAAR;AACA;AACD;;AAED,WAASG,gBAAT,GAA4B;AAAA;;AAC3B,oCAAOZ,~~WAAP,aAAOA,WAAP,iDAAOA,~~WAAW,~~CAAEM~~,~~WAApB~~,~~2DAAO~~,~~uBAA0BK,~~KAAjC,yEAA0CzB,6BAA1C;AACA;;AACD,SACC,8BACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGL,EAAE,CAAE,eAAF;AAArB,KACC,cAAC,YAAD;AACC,IAAA,QAAQ,EAAGoB,YADZ;AAEC,IAAA,OAAO,EAAGF,eAFX;AAGC,IAAA,QAAQ,EAAGS;AAHZ,IADD,CADD,EAQGN,gBAAgB,CAAED,YAAF,CAAhB,IACD,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGb,MAAM,CAACyB;AAA1B,KACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGhC,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,YAAY,EAAG,CAFhB;AAGC,IAAA,YAAY,EAAG,GAHhB;AAIC,IAAA,KAAK,EAAG+B,gBAAgB,EAJzB;AAKC,IAAA,QAAQ,EAAGF;AALZ,IADD,CATF,CADD;AAsBA;;AAED,eAAerB,oBAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { PanelBody, RadioControl, RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { colorsUtils } from '../mobile/color-settings/utils';\nimport { getGradientAstWithDefault } from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n} from './constants';\nimport styles from './style.scss';\n\nfunction CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {\n\tconst [ gradientOrientation, setGradientOrientation ] = useState(\n\t\tHORIZONTAL_GRADIENT_ORIENTATION\n\t);\n\n\tconst [ currentColor, setCurrentColor ] = useState( currentValue );\n\n\tconst { getGradientType, gradients, gradientOptions } = colorsUtils;\n\tconst { gradientAST } = getGradientAstWithDefault( currentColor );\n\tconst gradientType = getGradientType( currentColor );\n\n\tfunction isLinearGradient( type ) {\n\t\treturn type === gradients.linear;\n\t}\n\n\tfunction getGradientColor( type ) {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\n\t\tif ( orientation ) {\n\t\t\tsetGradientOrientation( orientation );\n\t\t}\n\n\t\treturn serializeGradient(\n\t\t\tisLinearGradient( type )\n\t\t\t\t? {\n\t\t\t\t\t\t...gradientAST,\n\t\t\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\torientation: gradientOrientation,\n\t\t\t\t\t\t\t } ),\n\t\t\t\t\t\ttype,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t...restGradientAST,\n\t\t\t\t\t\ttype,\n\t\t\t\t }\n\t\t);\n\t}\n\n\tfunction onGradientTypeChange( type ) {\n\t\tconst gradientColor = getGradientColor( type );\n\t\tsetCurrentColor( gradientColor );\n\t\tsetColor( gradientColor );\n\t}\n\n\tfunction setGradientAngle( value ) {\n\t\tconst gradientColor = serializeGradient( {\n\t\t\t...gradientAST,\n\t\t\torientation: {\n\t\t\t\ttype: 'angular',\n\t\t\t\tvalue,\n\t\t\t},\n\t\t} );\n\n\t\tif ( isGradientColor && gradientColor !== currentColor ) {\n\t\t\tsetCurrentColor( gradientColor );\n\t\t\tsetColor( gradientColor );\n\t\t}\n\t}\n\n\tfunction getGradientAngle() {\n\t\treturn gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Gradient Type' ) }>\n\t\t\t\t<RadioControl\n\t\t\t\t\tselected={ gradientType }\n\t\t\t\t\toptions={ gradientOptions }\n\t\t\t\t\tonChange={ onGradientTypeChange }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t\t{ isLinearGradient( gradientType ) && (\n\t\t\t\t<PanelBody style={ styles.angleControl }>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Angle' ) }\n\t\t\t\t\t\tminimumValue={ 0 }\n\t\t\t\t\t\tmaximumValue={ 360 }\n\t\t\t\t\t\tvalue={ getGradientAngle() }\n\t\t\t\t\t\tonChange={ setGradientAngle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default CustomGradientPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.native.js"],"names":["PanelBody","RadioControl","RangeControl","__","useState","colorsUtils","getGradientAstWithDefault","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","styles","CustomGradientPicker","setColor","currentValue","isGradientColor","gradientOrientation","setGradientOrientation","currentColor","setCurrentColor","getGradientType","gradients","gradientOptions","gradientAST","gradientType","isLinearGradient","type","linear","getGradientColor","orientation","restGradientAST","onGradientTypeChange","gradientColor","setGradientAngle","value","getGradientAngle","angleControl"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { PanelBody, RadioControl, RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { colorsUtils } from '../mobile/color-settings/utils';\nimport { getGradientAstWithDefault } from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n} from './constants';\nimport styles from './style.scss';\n\nfunction CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {\n\tconst [ gradientOrientation, setGradientOrientation ] = useState(\n\t\tHORIZONTAL_GRADIENT_ORIENTATION\n\t);\n\n\tconst [ currentColor, setCurrentColor ] = useState( currentValue );\n\n\tconst { getGradientType, gradients, gradientOptions } = colorsUtils;\n\tconst { gradientAST } = getGradientAstWithDefault( currentColor );\n\tconst gradientType = getGradientType( currentColor );\n\n\tfunction isLinearGradient( type ) {\n\t\treturn type === gradients.linear;\n\t}\n\n\tfunction getGradientColor( type ) {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\n\t\tif ( orientation ) {\n\t\t\tsetGradientOrientation( orientation );\n\t\t}\n\n\t\treturn serializeGradient(\n\t\t\tisLinearGradient( type )\n\t\t\t\t? {\n\t\t\t\t\t\t...gradientAST,\n\t\t\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\torientation: gradientOrientation,\n\t\t\t\t\t\t\t } ),\n\t\t\t\t\t\ttype,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t...restGradientAST,\n\t\t\t\t\t\ttype,\n\t\t\t\t }\n\t\t);\n\t}\n\n\tfunction onGradientTypeChange( type ) {\n\t\tconst gradientColor = getGradientColor( type );\n\t\tsetCurrentColor( gradientColor );\n\t\tsetColor( gradientColor );\n\t}\n\n\tfunction setGradientAngle( value ) {\n\t\tconst gradientColor = serializeGradient( {\n\t\t\t...gradientAST,\n\t\t\torientation: {\n\t\t\t\ttype: 'angular',\n\t\t\t\tvalue,\n\t\t\t},\n\t\t} );\n\n\t\tif ( isGradientColor && gradientColor !== currentColor ) {\n\t\t\tsetCurrentColor( gradientColor );\n\t\t\tsetColor( gradientColor );\n\t\t}\n\t}\n\n\tfunction getGradientAngle() {\n\t\treturn gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Gradient Type' ) }>\n\t\t\t\t<RadioControl\n\t\t\t\t\tselected={ gradientType }\n\t\t\t\t\toptions={ gradientOptions }\n\t\t\t\t\tonChange={ onGradientTypeChange }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t\t{ isLinearGradient( gradientType ) && (\n\t\t\t\t<PanelBody style={ styles.angleControl }>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Angle' ) }\n\t\t\t\t\t\tminimumValue={ 0 }\n\t\t\t\t\t\tmaximumValue={ 360 }\n\t\t\t\t\t\tvalue={ getGradientAngle() }\n\t\t\t\t\t\tonChange={ setGradientAngle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default CustomGradientPicker;\n"]}

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

@@ -1,12 +1,10 @@
 /**
  * External dependencies
  */
-export function serializeGradientColor(_ref) {
-  let {
-    type,
-    value
-  } = _ref;
+export function serializeGradientColor({
+  type,
+  value
+}) {
   if (type === 'literal') {
     return value;
   }
@@ -28,12 +26,11 @@ export function serializeGradientPosition(position) {
   } = position;
   return `${value}${type}`;
 }
-export function serializeGradientColorStop(_ref2) {
-  let {
-    type,
-    value,
-    length
-  } = _ref2;
+export function serializeGradientColorStop({
+  type,
+  value,
+  length
+}) {
   return `${serializeGradientColor({
     type,
     value
@@ -46,18 +43,15 @@ export function serializeGradientOrientation(orientation) {
   return `${orientation.value}deg`;
 }
-export function serializeGradient(_ref3) {
-  let {
-    type,
-    orientation,
-    colorStops
-  } = _ref3;
+export function serializeGradient({
+  type,
+  orientation,
+  colorStops
+}) {
   const serializedOrientation = serializeGradientOrientation(orientation);
   const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {
     const getNumericStopValue = colorStop => {
-      var _colorStop$length;
-      return (colorStop === null || colorStop === void 0 ? void 0 : (_colorStop$length = colorStop.length) === null || _colorStop$length === void 0 ? void 0 : _colorStop$length.value) === undefined ? 0 : parseInt(colorStop.length.value);
+      return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value);
     };
     return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"mappings":"AAAA;AACA;AACA;AAGA,OAAO,SAASA,sBAAT,~~OAGuB~~;~~AAAA,MAHU;~~AACvCC,~~IAAAA~~,IADuC;AAEvCC,~~IAAAA~~;AAFuC,~~GAGV;;~~AAC7B,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;AAED,OAAO,SAASC,yBAAT,CACNC,QADM,EAEL;AACD,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;AAED,OAAO,SAASK,0BAAT,~~QAIuB~~;~~AAAA,MAJc;~~AAC3CL,~~IAAAA~~,IAD2C;AAE3CC,~~IAAAA~~,KAF2C;AAG3CK,~~IAAAA~~;AAH2C,~~GAId~~;AAC7B,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAGA,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAH1E;AAIA;AAED,OAAO,SAASC,4BAAT,CACNC,WADM,EAEL;AACD,MACCC,KAAK,CAACC,OAAN,CAAeF,WAAf,KACA,CAAEA,WADF,IAEAA,WAAW,CAACR,IAAZ,KAAqB,SAHtB,EAIE;AACD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;AAED,OAAO,SAASU,iBAAT,~~QAI0B~~;~~AAAA,MAJE;~~AAClCX,~~IAAAA~~,IADkC;AAElCQ,~~IAAAA~~,WAFkC;AAGlCI,~~IAAAA~~;AAHkC,~~GAIF~~;AAChC,QAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AACpC,UAAMC,mBAAmB,GACxBC,SAD2B,IAEvB;~~AAAA;;~~AACJ,~~aAAO~~,~~CAAAA,~~SAAS,~~SAAT~~,~~IAAAA,SAAS,WAAT,iCAAAA,SAAS,CAAEb,~~MAAX,~~wEAAmBL~~,KAAnB,~~MAA6BmB~~,SAA7B,GACJ,CADI,GAEJC,QAAQ,CAAEF,SAAS,CAACb,MAAV,CAAiBL,KAAnB,CAFX;AAGA,KAND;;AAQA,WACCiB,mBAAmB,CAAEF,UAAF,CAAnB,GACAE,mBAAmB,CAAED,UAAF,CAFpB;AAIA,GAd2B,EAe3BK,GAf2B,CAetBjB,0BAfsB,CAA7B;AAgBA,SAAQ,GAAGL,IAAM,IAAI,CAAEa,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBS,MADmB,CACXC,OADW,EAEnBtB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["/*\n External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\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(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) \|\|\n\t\t! orientation \|\|\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\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.ts"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"mappings":"AAAA;AACA;AACA;AAGA,OAAO,SAASA,sBAAT,CAAiC;AACvCC,EAAAA,IADuC;AAEvCC,EAAAA;AAFuC,CAAjC,EAGuB;AAC7B,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;AAED,OAAO,SAASC,yBAAT,CACNC,QADM,EAEL;AACD,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;AAED,OAAO,SAASK,0BAAT,CAAqC;AAC3CL,EAAAA,IAD2C;AAE3CC,EAAAA,KAF2C;AAG3CK,EAAAA;AAH2C,CAArC,EAIuB;AAC7B,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAGA,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAH1E;AAIA;AAED,OAAO,SAASC,4BAAT,CACNC,WADM,EAEL;AACD,MACCC,KAAK,CAACC,OAAN,CAAeF,WAAf,KACA,CAAEA,WADF,IAEAA,WAAW,CAACR,IAAZ,KAAqB,SAHtB,EAIE;AACD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;AAED,OAAO,SAASU,iBAAT,CAA4B;AAClCX,EAAAA,IADkC;AAElCQ,EAAAA,WAFkC;AAGlCI,EAAAA;AAHkC,CAA5B,EAI0B;AAChC,QAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AACpC,UAAMC,mBAAmB,GACxBC,SAD2B,IAEvB;AACJ,aAAOA,SAAS,EAAEb,MAAX,EAAmBL,KAAnB,KAA6BmB,SAA7B,GACJ,CADI,GAEJC,QAAQ,CAAEF,SAAS,CAACb,MAAV,CAAiBL,KAAnB,CAFX;AAGA,KAND;;AAQA,WACCiB,mBAAmB,CAAEF,UAAF,CAAnB,GACAE,mBAAmB,CAAED,UAAF,CAFpB;AAIA,GAd2B,EAe3BK,GAf2B,CAetBjB,0BAfsB,CAA7B;AAgBA,SAAQ,GAAGL,IAAM,IAAI,CAAEa,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBS,MADmB,CACXC,OADW,EAEnBtB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["/*\n External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: gradientParser.ColorStop ) {\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(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) \|\|\n\t\t! orientation \|\|\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\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-module/custom-gradient-picker/utils.js CHANGED Viewed

@@ -24,8 +24,6 @@ function hasUnsupportedLength(item) {
 }
 export function getGradientAstWithDefault(value) {
-  var _gradientAST$orientat;
   // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
   // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
   let gradientAST;
@@ -41,7 +39,7 @@ export function getGradientAstWithDefault(value) {
     hasGradient = false;
   }
-  if (!Array.isArray(gradientAST.orientation) && ((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') {
+  if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') {
     gradientAST.orientation = {
       type: 'angular',
       value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()
@@ -68,11 +66,10 @@ export function getGradientAstWithDefault(value) {
 }
 export function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
   return { ...gradientAST,
-    colorStops: newControlPoints.map(_ref => {
-      let {
-        position,
-        color
-      } = _ref;
+    colorStops: newControlPoints.map(({
+      position,
+      color
+    }) => {
       const {
         r,
         g,
@@ -82,7 +79,7 @@ export function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
       return {
         length: {
           type: '%',
-          value: position === null || position === void 0 ? void 0 : position.toString()
+          value: position?.toString()
         },
         type: a < 1 ? 'rgba' : 'rgb',
         value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]