@wordpress/components 27.3.0 → 27.5.0

package/build-module/focal-point-picker/controls.js

@@ -25,7 +25,9 @@ export default function FocalPointPickerControls({
   const valueX = fractionToPercentage(point.x);
   const valueY = fractionToPercentage(point.y);
   const handleChange = (value, axis) => {
-    if (value === undefined) return;
+    if (value === undefined) {
+      return;
+    }
     const num = parseInt(value, 10);
     if (!isNaN(num)) {
       onChange({

package/build-module/focal-point-picker/controls.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","createElement","className","gap","FocalPointUnitControl","label","join","next","dragDirection","props","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAO9C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,qBAAqB;EACrBC,WAAW;EACXC,QAAQ,GAAGL,IAAI;EACfM,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAGZ,oBAAoB,CAAES,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGb,oBAAoB,CAAES,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;IAE3B,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACCG,aAAA,CAACtB,cAAc;IACduB,SAAS,EAAC,8BAA8B;IACxCjB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3BgB,GAAG,EAAG;EAAG,GAETF,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,MAAO,CAAG;IACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;IAChDkB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACFP,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,KAAM,CAAG;IACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;IAC/CkB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,OACCR,aAAA,CAACvB,iBAAiB;IACjBwB,SAAS,EAAC,oDAAoD;IAC9DQ,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAElB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ"}
+{"version":3,"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","__next40pxDefaultSize","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","createElement","className","gap","FocalPointUnitControl","label","join","next","dragDirection","props","labelPosition","max","min","units"],"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,iBAAiB,EACjBC,cAAc,QACR,mCAAmC;AAC1C,SAASC,oBAAoB,QAAQ,SAAS;AAO9C,MAAMC,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,qBAAqB;EACrBC,WAAW;EACXC,QAAQ,GAAGL,IAAI;EACfM,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAGZ,oBAAoB,CAAES,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMG,MAAM,GAAGb,oBAAoB,CAAES,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMG,YAAY,GAAGA,CACpBC,KAAqD,EACrDC,IAAoB,KAChB;IACJ,IAAKD,KAAK,KAAKE,SAAS,EAAG;MAC1B;IACD;IAEA,MAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;IAEjC,IAAK,CAAEK,KAAK,CAAEF,GAAI,CAAC,EAAG;MACrBV,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEO,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACCG,aAAA,CAACtB,cAAc;IACduB,SAAS,EAAC,8BAA8B;IACxCjB,uBAAuB,EAAGA,uBAAyB;IACnDE,WAAW,EAAGA,WAAa;IAC3BgB,GAAG,EAAG;EAAG,GAETF,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,MAAO,CAAG;IACtB,cAAaA,EAAE,CAAE,2BAA4B,CAAG;IAChDkB,KAAK,EAAG,CAAEH,MAAM,EAAE,GAAG,CAAE,CAACc,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACFP,aAAA,CAACG,qBAAqB;IACrBlB,qBAAqB,EAAGA,qBAAuB;IAC/CmB,KAAK,EAAG5B,EAAE,CAAE,KAAM,CAAG;IACrB,cAAaA,EAAE,CAAE,0BAA2B,CAAG;IAC/CkB,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACa,IAAI,CAAE,EAAG,CAAG;IACpClB,QAAQ,EACHmB,IAAI,IACPb,YAAY,CACXa,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASJ,qBAAqBA,CAAEK,KAAuB,EAAG;EACzD,OACCR,aAAA,CAACvB,iBAAiB;IACjBwB,SAAS,EAAC,oDAAoD;IAC9DQ,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAG7B,eAAiB;IACvB8B,GAAG,EAAG/B,eAAiB;IACvBgC,KAAK,EAAG,CAAE;MAAElB,KAAK,EAAE,GAAG;MAAEU,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCI;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

package/build-module/focal-point-picker/focal-point.js.map

@@ -1 +1 @@
-{"version":3,"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style","createElement","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,4BAA4B;;AAE1D;AACA;AACA;AACA,OAAOC,UAAU,MAAM,YAAY;AAInC,eAAe,SAASC,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAGL,UAAU,CACzB,+CACD,CAAC;EAED,MAAMM,KAAK,GAAG;IAAEJ,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAOI,aAAA,CAACR,aAAa;IAAA,GAAMK,KAAK;IAAGI,SAAS,EAAGH,OAAS;IAACC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E"}
+{"version":3,"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style","createElement","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,4BAA4B;;AAE1D;AACA;AACA;AACA,OAAOC,UAAU,MAAM,YAAY;AAInC,eAAe,SAASC,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAGL,UAAU,CACzB,+CACD,CAAC;EAED,MAAMM,KAAK,GAAG;IAAEJ,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAOI,aAAA,CAACR,aAAa;IAAA,GAAMK,KAAK;IAAGI,SAAS,EAAGH,OAAS;IAACC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E","ignoreList":[]}

package/build-module/focal-point-picker/focal-point.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Path","SVG","styles","FocalPoint","height","style","width","createElement","viewBox","xmlns","focalPointIconPathOutline","d","focalPointIconPathFill"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,eAAe,SAASC,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,OACCC,aAAA,CAACN,GAAG;IACHG,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfG,OAAO,EAAC,WAAW;IACnBF,KAAK,EAAGA,KAAO;IACfG,KAAK,EAAC;EAA4B,GAElCF,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACQ,yBAA2B;IAC1CC,CAAC,EAAC;EAAoH,CACtH,CAAC,EACFJ,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACU,sBAAwB;IACvCD,CAAC,EAAC;EAA6H,CAC/H,CACG,CAAC;AAER"}
+{"version":3,"names":["Path","SVG","styles","FocalPoint","height","style","width","createElement","viewBox","xmlns","focalPointIconPathOutline","d","focalPointIconPathFill"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,eAAe,SAASC,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,OACCC,aAAA,CAACN,GAAG;IACHG,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfG,OAAO,EAAC,WAAW;IACnBF,KAAK,EAAGA,KAAO;IACfG,KAAK,EAAC;EAA4B,GAElCF,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACQ,yBAA2B;IAC1CC,CAAC,EAAC;EAAoH,CACtH,CAAC,EACFJ,aAAA,CAACP,IAAI;IACJK,KAAK,EAAGH,MAAM,CAACU,sBAAwB;IACvCD,CAAC,EAAC;EAA6H,CAC/H,CACG,CAAC;AAER","ignoreList":[]}

package/build-module/focal-point-picker/grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","createElement","className","style","width","height","top","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,SAAS,QACH,mCAAmC;AAI1C,eAAe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACCC,aAAA,CAACN,QAAQ;IAAA,GACHK,KAAK;IACVE,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEL,MAAM,CAACK,KAAK;MACnBC,MAAM,EAAEN,MAAM,CAACM;IAChB;EAAG,GAEHJ,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvCN,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb"}
+{"version":3,"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","createElement","className","style","width","height","top","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,SAAS,QACH,mCAAmC;AAI1C,eAAe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACCC,aAAA,CAACN,QAAQ;IAAA,GACHK,KAAK;IACVE,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEL,MAAM,CAACK,KAAK;MACnBC,MAAM,EAAEN,MAAM,CAACM;IAChB;EAAG,GAEHJ,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACL,SAAS;IAACO,KAAK,EAAG;MAAEG,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtCL,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvCN,aAAA,CAACJ,SAAS;IAACM,KAAK,EAAG;MAAEI,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb","ignoreList":[]}

package/build-module/focal-point-picker/index.js

@@ -101,7 +101,9 @@ export function FocalPointPicker({
 
       // `value` can technically be undefined if getValueWithinDragArea() is
       // called before dragAreaRef is set, but this shouldn't happen in reality.
-      if (!value) return;
+      if (!value) {
+        return;
+      }
       onDragStart?.(value, event);
       setPoint(value);
     },
@@ -109,7 +111,9 @@ export function FocalPointPicker({
       // Prevents text-selection when dragging.
       event.preventDefault();
       const value = getValueWithinDragArea(event);
-      if (!value) return;
+      if (!value) {
+        return;
+      }
       onDrag?.(value, event);
       setPoint(value);
     },
@@ -127,7 +131,9 @@ export function FocalPointPicker({
   const dragAreaRef = useRef(null);
   const [bounds, setBounds] = useState(INITIAL_BOUNDS);
   const refUpdateBounds = useRef(() => {
-    if (!dragAreaRef.current) return;
+    if (!dragAreaRef.current) {
+      return;
+    }
     const {
       clientWidth: width,
       clientHeight: height
@@ -144,7 +150,9 @@ export function FocalPointPicker({
   });
   useEffect(() => {
     const updateBounds = refUpdateBounds.current;
-    if (!dragAreaRef.current) return;
+    if (!dragAreaRef.current) {
+      return;
+    }
     const {
       defaultView
     } = dragAreaRef.current.ownerDocument;
@@ -162,7 +170,9 @@ export function FocalPointPicker({
     clientY,
     shiftKey
   }) => {
-    if (!dragAreaRef.current) return;
+    if (!dragAreaRef.current) {
+      return;
+    }
     const {
       top,
       left
@@ -195,7 +205,9 @@ export function FocalPointPicker({
       code,
       shiftKey
     } = event;
-    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {
+      return;
+    }
     event.preventDefault();
     const value = {
       x,
@@ -235,7 +247,9 @@ export function FocalPointPicker({
     onKeyDown: arrowKeyStep,
     onMouseDown: startDrag,
     onBlur: () => {
-      if (isDragging) endDrag();
+      if (isDragging) {
+        endDrag();
+      }
     },
     ref: dragAreaRef,
     role: "button",

package/build-module/focal-point-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","createElement","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) return;\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) return;\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","__next40pxDefaultSize","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","bounds","setBounds","refUpdateBounds","clientWidth","width","clientHeight","height","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","undefined","classes","instanceId","id","timeout","window","setTimeout","clearTimeout","createElement","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","onLoad","src","hasHelpText"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\t__next40pxDefaultSize = false,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n\t\ttop: y !== undefined ? y * bounds.height : 0.5 * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) {\n\t\t\t\t\t\t\tendDrag();\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/focal-point-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","createElement","style","container","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","key","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,YAAY,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACvE,OAAOC,KAAK,MAAM,oBAAoB;;AAEtC;AACA;AACA;AACA,SACCC,mCAAmC,EACnCC,+BAA+B,QACzB,gCAAgC;AACvC,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,WAAW,QAAQ,uBAAuB;AAC1D,SAASC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,oBAAoB;AACzE,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,WAAW,QAAQ,SAAS;AACrC,SAASC,KAAK,QAAQ,eAAe;AAErC,MAAMC,kBAAkB,GAAG,CAAC;AAC5B,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,iBAAiB,GAAG,CAAE;EAAEC,OAAO,EAAE,EAAE;EAAEC,KAAK,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAI,CAAC,CAAE;AAErE,SAASC,gBAAgBA,CAAEC,KAAK,EAAG;EAClC,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,6BAA6B;IAAEC;EAAI,CAAC,GAAGJ,KAAK;EAE1E,MAAMK,OAAO,GAAGd,WAAW,CAAEa,GAAI,CAAC;EAElC,MAAM,CAAEE,aAAa,EAAEC,gBAAgB,CAAE,GAAGvB,QAAQ,CAAE,IAAK,CAAC;EAC5D,MAAM,CAAEwB,SAAS,EAAEC,YAAY,CAAE,GAAGzB,QAAQ,CAAE,CAAE,CAAC;EACjD,MAAM,CAAE0B,kBAAkB,EAAEC,qBAAqB,CAAE,GAAG3B,QAAQ,CAAE,IAAK,CAAC;EACtE,MAAM,CAAE4B,gBAAgB,EAAEC,mBAAmB,CAAE,GAAG7B,QAAQ,CAAE,IAAK,CAAC;EAClE,MAAM,CAAE8B,cAAc,EAAEC,iBAAiB,CAAE,GAAG/B,QAAQ,CAAE,KAAM,CAAC;EAE/D,MAAMgC,mBAAmB,GAAGjC,MAAM,CAAC,CAAC;EACpC,MAAMkC,mBAAmB,GAAGlC,MAAM,CAAC,CAAC;EACpC,MAAMmC,QAAQ,GAAGnC,MAAM,CAAE,IAAK,CAAC;EAE/BG,SAAS,CAAE,MAAM;IAChBR,mCAAmC,CAAIyC,YAAY,IAAM;MACxD,IAAK,CAAEA,YAAY,EAAG;QACrBJ,iBAAiB,CAAE,IAAK,CAAC;QACzBpC,+BAA+B,CAAE,IAAK,CAAC;MACxC;IACD,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,MAAMyC,GAAG,GAAGrC,MAAM,CAAE,IAAIV,QAAQ,CAACgD,OAAO,CAAC,CAAE,CAAC,CAACC,OAAO;;EAEpD;AACD;AACA;AACA;EACCpC,SAAS,CAAE,MAAM;IAChB,IAAKoB,aAAa,EAAG;MACpBc,GAAG,CAACG,QAAQ,CAAE;QACbC,CAAC,EAAEvB,UAAU,CAACuB,CAAC,GAAGlB,aAAa,CAACmB,KAAK;QACrCC,CAAC,EAAEzB,UAAU,CAACyB,CAAC,GAAGpB,aAAa,CAACqB;MACjC,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAE1B,UAAU,EAAEK,aAAa,EAAEc,GAAG,CAAG,CAAC;;EAEvC;EACA,MAAMQ,YAAY,GAAG3C,OAAO,CAC3B,MACCX,YAAY,CAACuD,MAAM,CAAE;IACpBC,4BAA4B,EAAEA,CAAA,KAAM,IAAI;IACxCC,mCAAmC,EAAEA,CAAA,KAAM,IAAI;IAC/CC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;IACvCC,kCAAkC,EAAEA,CAAA,KAAM,IAAI;IAE9CC,mBAAmB,EAAIC,KAAK,IAAM;MACjChC,6BAA6B,CAAE,KAAM,CAAC;MACtC,MAAM;QACLiC,SAAS,EAAEZ,CAAC;QACZa,SAAS,EAAEX,CAAC;QACZY,KAAK;QACLC;MACD,CAAC,GAAGJ,KAAK,CAACK,WAAW;MACrBxB,mBAAmB,CAACM,OAAO,GAAGgB,KAAK,GAAGd,CAAC;MACvCP,mBAAmB,CAACK,OAAO,GAAGiB,KAAK,GAAGb,CAAC;MACvCN,GAAG,CAACG,QAAQ,CAAE;QAAEC,CAAC;QAAEE;MAAE,CAAE,CAAC,CAAC,CAAC;MAC1BN,GAAG,CAACqB,aAAa,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACD;IACAC,kBAAkB,EAAErE,QAAQ,CAAC8D,KAAK,CACjC,CAAE,IAAI,EAAE;MAAEQ,EAAE,EAAEvB,GAAG,CAACI,CAAC;MAAEoB,EAAE,EAAExB,GAAG,CAACM;IAAE,CAAC,CAAE,EAClC;MAAEmB,eAAe,EAAE;IAAM,CAC1B,CAAC;IACDC,qBAAqB,EAAIX,KAAK,IAAM;MACnChC,6BAA6B,CAAE,IAAK,CAAC;MACrCiB,GAAG,CAAC2B,aAAa,CAAC,CAAC,CAAC,CAAC;MACrB,MAAM;QAAET,KAAK;QAAEC;MAAM,CAAC,GAAGJ,KAAK,CAACK,WAAW;MAC1C;MACA;MACA;MACA;MACA;MACA;MACA,MAAMhB,CAAC,GAAGc,KAAK,GAAGtB,mBAAmB,CAACM,OAAO;MAC7C,MAAMI,CAAC,GAAGa,KAAK,GAAGtB,mBAAmB,CAACK,OAAO;MAC7CpB,QAAQ,CAAE;QACTsB,CAAC,EAAEhC,KAAK,CAAEgC,CAAC,GAAGlB,aAAa,EAAEmB,KAAK,EAAE,CAAC,EAAE,CAAE,CAAC,CAACuB,OAAO,CAAE,CAAE,CAAC;QACvDtB,CAAC,EAAElC,KAAK,CAAEkC,CAAC,GAAGpB,aAAa,EAAEqB,MAAM,EAAE,CAAC,EAAE,CAAE,CAAC,CAACqB,OAAO,CAClD,CACD;MACD,CAAE,CAAC;MACH;MACA;MACA;MACAvC,YAAY,CAAIwC,SAAS,IAAMA,SAAS,GAAG,CAAE,CAAC;IAC/C;EACD,CAAE,CAAC,EACJ,CAAE3C,aAAa,EAAEc,GAAG,EAAElB,QAAQ,EAAEC,6BAA6B,CAC9D,CAAC;EAED,MAAM+C,eAAe,GAAG/D,4BAA4B,CACnDG,MAAM,CAAC4D,eAAe,EACtB5D,MAAM,CAAC6D,mBACR,CAAC;EACD,MAAMC,kBAAkB,GAAG,CAC1B1C,kBAAkB,IAAIpB,MAAM,CAAC+D,gBAAgB,EAC7C/D,MAAM,CAACgE,KAAK,CACZ;EACD,MAAMC,kBAAkB,GAAG,CAC1B;IACCC,WAAW,EACV5C,gBAAgB,IAChBA,gBAAgB,CAACa,KAAK,GAAGb,gBAAgB,CAACe,MAAM;IACjD;IACA8B,OAAO,EAAE/C,kBAAkB,GAAG,CAAC,GAAG;EACnC,CAAC,EACDpB,MAAM,CAACoE,KAAK,EACZhD,kBAAkB,IAAIpB,MAAM,CAAC+D,gBAAgB,CAC7C;EACD,MAAMM,qBAAqB,GAAG,CAC7BrE,MAAM,CAACsE,eAAe,EACtB;IACCC,SAAS,EAAE,CACV;MACCC,UAAU,EAAE1C,GAAG,CAACI,CAAC,CAACuC,WAAW,CAAE;QAC9BC,UAAU,EAAE,CAAE,CAAC,EAAE1D,aAAa,EAAEmB,KAAK,IAAI,CAAC,CAAE;QAC5CwC,WAAW,EAAE,CAAE,CAAC,EAAE3D,aAAa,EAAEmB,KAAK,IAAI,CAAC,CAAE;QAC7CyC,WAAW,EAAE;MACd,CAAE;IACH,CAAC,EACD;MACCC,UAAU,EAAE/C,GAAG,CAACM,CAAC,CAACqC,WAAW,CAAE;QAC9BC,UAAU,EAAE,CAAE,CAAC,EAAE1D,aAAa,EAAEqB,MAAM,IAAI,CAAC,CAAE;QAC7CsC,WAAW,EAAE,CAAE,CAAC,EAAE3D,aAAa,EAAEqB,MAAM,IAAI,CAAC,CAAE;QAC9CuC,WAAW,EAAE;MACd,CAAE;IACH,CAAC;EAEH,CAAC,CACD;EACD,MAAME,gBAAgB,GAAG,EAAE;EAC3B,MAAMC,gBAAgB,GAAG9F,UAAU,CAAC+F,OAAO,CAAE,CAC5ChF,MAAM,CAACW,UAAU,EACjB;IACC0B,MAAM,EAAEyC,gBAAgB;IACxBG,UAAU,EAAE,EAAGH,gBAAgB,GAAG,CAAC,CAAE;IACrCI,SAAS,EAAE,EAAGJ,gBAAgB,GAAG,CAAC,CAAE;IACpC3C,KAAK,EAAE2C;EACR,CAAC,CACA,CAAC;EAEH,MAAMK,cAAc,GAAGA,CAAA,KAAM1D,iBAAiB,CAAE,KAAM,CAAC;EACvD,MAAM2D,aAAa,GAAKvC,KAAK,IAAM;IAClC,MAAM;MAAER,MAAM;MAAEF;IAAM,CAAC,GAAGU,KAAK,CAACK,WAAW,CAACmC,MAAM;IAElD,IACClD,KAAK,KAAK,CAAC,IACXE,MAAM,KAAK,CAAC,KACVrB,aAAa,EAAEmB,KAAK,KAAKA,KAAK,IAC/BnB,aAAa,EAAEqB,MAAM,KAAKA,MAAM,CAAE,EAClC;MACDpB,gBAAgB,CAAE;QAAEkB,KAAK;QAAEE;MAAO,CAAE,CAAC;IACtC;EACD,CAAC;EACD,MAAMiD,eAAe,GAAGA,CAAA,KAAMjE,qBAAqB,CAAE,KAAM,CAAC;EAC5D,MAAMkE,WAAW,GAAK1C,KAAK,IAAM;IAChC,MAAM;MAAER,MAAM;MAAEF;IAAM,CAAC,GAAGU,KAAK,CAAC2C,WAAW;IAC3CjE,mBAAmB,CAAE;MAAEc,MAAM;MAAEF;IAAM,CAAE,CAAC;IACxCd,qBAAqB,CAAE,KAAM,CAAC;IAC9B;IACA;IACAO,QAAQ,EAAEI,OAAO,CAACyD,IAAI,CAAE,CAAE,CAAC;EAC5B,CAAC;EACD,MAAMC,mBAAmB,GAAKxD,CAAC,IAC9BtB,QAAQ,CAAE;IAAEsB,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAG,EAAGwB,OAAO,CAAE,CAAE;EAAE,CAAE,CAAC;EAC5C,MAAMiC,mBAAmB,GAAKvD,CAAC,IAC9BxB,QAAQ,CAAE;IAAEwB,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAG,EAAGsB,OAAO,CAAE,CAAE;EAAE,CAAE,CAAC;EAE5C,OACCkC,aAAA,CAAC1G,IAAI;IAAC2G,KAAK,EAAG7F,MAAM,CAAC8F;EAAW,GAC/BF,aAAA,CAAC7F,OAAO;IAACgG,OAAO,EAAGZ,cAAgB;IAACa,OAAO,EAAGxE;EAAgB,GAC7DoE,aAAA,CAAC1G,IAAI;IAAC2G,KAAK,EAAG,CAAE7F,MAAM,CAACiG,KAAK,EAAErC,eAAe;EAAI,GAChDgC,aAAA,CAAC1G,IAAI;IAAA,GACCoD,YAAY,CAAC4D,WAAW;IAC7BC,QAAQ,EAAGf,aAAe;IAC1BS,KAAK,EAAG7F,MAAM,CAACoG;EAAgB,GAE7B,CAAErF,OAAO,IACV6E,aAAA,CAACrG,KAAK;IACL8G,UAAU,EAAG,KAAO;IACpBC,iBAAiB,EAAG,KAAO;IAC3BC,UAAU,EAAG,CAAEnF,kBAAoB;IACnCiB,MAAM,EAAC,MAAM;IACbvB,GAAG,EAAGA,GAAK;IACX+E,KAAK,EAAG/B,kBAAoB;IAC5BwB,eAAe,EAAGA;EAAiB,CACnC,CACD,EACCvE,OAAO,IACR6E,aAAA,CAACzG,KAAK;IACLqH,KAAK;IACLC,MAAM;IACNC,YAAY;IACZC,MAAM,EAAGpB,WAAa;IACtBqB,GAAG,EAAGhF,QAAU;IAChBiF,UAAU,EAAC,SAAS;IACpBC,MAAM,EAAG;MAAEC,GAAG,EAAEjG;IAAI,CAAG;IACvB+E,KAAK,EAAG5B;EAAoB,CAC5B,CACD,EACC,CAAE7C,kBAAkB,IACrBwE,aAAA,CAAC7G,QAAQ,CAACG,IAAI;IACb8H,aAAa,EAAC,MAAM;IACpBnB,KAAK,EAAGxB;EAAuB,GAE/BuB,aAAA,CAAC7F,OAAO,CAACkH,KAAK;IACbC,IAAI,EAAG5H,EAAE,CAAE,4BAA6B,CAAG;IAC3C6H,OAAO,EAAG,EAAGrC,gBAAgB,GAAG,CAAC;EAAI,CACrC,CAAC,EACFc,aAAA,CAAC9F,UAAU;IACVuC,MAAM,EAAG0C,gBAAgB,CAAC1C,MAAQ;IAClCwD,KAAK,EAAGd,gBAAkB;IAC1BqC,MAAM,EAAC,2BAA2B;IAClCjF,KAAK,EAAG4C,gBAAgB,CAAC5C;EAAO,CAChC,CACa,CAEX,CACD,CAAC,EACPyD,aAAA,CAACpG,WAAW;IACX6H,GAAG,EAAI,SAASnG,SAAW,EAAG;IAC9BX,KAAK,EAAGjB,EAAE,CAAE,iBAAkB,CAAG;IACjCgI,GAAG,EAAGlH,kBAAoB;IAC1BmH,GAAG,EAAGpH,kBAAoB;IAC1BS,QAAQ,EAAG8E,mBAAqB;IAChC8B,IAAI,EAAC,GAAG;IACRC,KAAK,EAAGpH,iBAAmB;IAC3BG,KAAK,EAAGkH,IAAI,CAACC,KAAK,CAAEhH,UAAU,CAACuB,CAAC,GAAG,GAAI;EAAG,CAC1C,CAAC,EACF0D,aAAA,CAACpG,WAAW;IACX6H,GAAG,EAAI,SAASnG,SAAW,EAAG;IAC9BX,KAAK,EAAGjB,EAAE,CAAE,iBAAkB,CAAG;IACjCgI,GAAG,EAAGlH,kBAAoB;IAC1BmH,GAAG,EAAGpH,kBAAoB;IAC1BS,QAAQ,EAAG+E,mBAAqB;IAChC6B,IAAI,EAAC,GAAG;IACRC,KAAK,EAAGpH,iBAAmB;IAC3BG,KAAK,EAAGkH,IAAI,CAACC,KAAK,CAAEhH,UAAU,CAACyB,CAAC,GAAG,GAAI;EAAG,CAC1C,CACO,CACJ,CAAC;AAET;AAEA,eAAe3B,gBAAgB"}
+{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","createElement","style","container","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","key","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/focal-point-picker/media.js.map

@@ -1 +1 @@
-{"version":3,"names":["MediaPlaceholder","isVideoType","Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","createElement","className","ref","isVideo","loop","onLoadedData"],"sources":["@wordpress/components/src/focal-point-picker/media.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\nimport type { FocalPointPickerMediaProps } from './types';\n\nexport default function Media( {\n\talt,\n\tautoPlay,\n\tsrc,\n\tonLoad,\n\tmediaRef,\n\t// Exposing muted prop for test rendering purposes\n\t// https://github.com/testing-library/react-testing-library/issues/470\n\tmuted = true,\n\t...props\n}: FocalPointPickerMediaProps ) {\n\tif ( ! src ) {\n\t\treturn (\n\t\t\t<MediaPlaceholder\n\t\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--placeholder\"\n\t\t\t\tref={ mediaRef as Ref< HTMLDivElement > }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isVideo = isVideoType( src );\n\n\treturn isVideo ? (\n\t\t<video\n\t\t\t{ ...props }\n\t\t\tautoPlay={ autoPlay }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--video\"\n\t\t\tloop\n\t\t\tmuted={ muted }\n\t\t\tonLoadedData={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLVideoElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t) : (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\talt={ alt }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--image\"\n\t\t\tonLoad={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLImageElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,WAAW,QAAQ,SAAS;AAGrC,eAAe,SAASC,KAAKA,CAAE;EAC9BC,GAAG;EACHC,QAAQ;EACRC,GAAG;EACHC,MAAM;EACNC,QAAQ;EACR;EACA;EACAC,KAAK,GAAG,IAAI;EACZ,GAAGC;AACwB,CAAC,EAAG;EAC/B,IAAK,CAAEJ,GAAG,EAAG;IACZ,OACCK,aAAA,CAACV,gBAAgB;MAChBW,SAAS,EAAC,wFAAwF;MAClGC,GAAG,EAAGL,QAAmC;MAAA,GACpCE;IAAK,CACV,CAAC;EAEJ;EAEA,MAAMI,OAAO,GAAGZ,WAAW,CAAEI,GAAI,CAAC;EAElC,OAAOQ,OAAO,GACbH,aAAA;IAAA,GACMD,KAAK;IACVL,QAAQ,EAAGA,QAAU;IACrBO,SAAS,EAAC,kFAAkF;IAC5FG,IAAI;IACJN,KAAK,EAAGA,KAAO;IACfO,YAAY,EAAGT,MAAQ;IACvBM,GAAG,EAAGL,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CAAC,GAEFK,aAAA;IAAA,GACMD,KAAK;IACVN,GAAG,EAAGA,GAAK;IACXQ,SAAS,EAAC,kFAAkF;IAC5FL,MAAM,EAAGA,MAAQ;IACjBM,GAAG,EAAGL,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CACD;AACF"}
+{"version":3,"names":["MediaPlaceholder","isVideoType","Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","createElement","className","ref","isVideo","loop","onLoadedData"],"sources":["@wordpress/components/src/focal-point-picker/media.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\nimport type { FocalPointPickerMediaProps } from './types';\n\nexport default function Media( {\n\talt,\n\tautoPlay,\n\tsrc,\n\tonLoad,\n\tmediaRef,\n\t// Exposing muted prop for test rendering purposes\n\t// https://github.com/testing-library/react-testing-library/issues/470\n\tmuted = true,\n\t...props\n}: FocalPointPickerMediaProps ) {\n\tif ( ! src ) {\n\t\treturn (\n\t\t\t<MediaPlaceholder\n\t\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--placeholder\"\n\t\t\t\tref={ mediaRef as Ref< HTMLDivElement > }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isVideo = isVideoType( src );\n\n\treturn isVideo ? (\n\t\t<video\n\t\t\t{ ...props }\n\t\t\tautoPlay={ autoPlay }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--video\"\n\t\t\tloop\n\t\t\tmuted={ muted }\n\t\t\tonLoadedData={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLVideoElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t) : (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\talt={ alt }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--image\"\n\t\t\tonLoad={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLImageElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,WAAW,QAAQ,SAAS;AAGrC,eAAe,SAASC,KAAKA,CAAE;EAC9BC,GAAG;EACHC,QAAQ;EACRC,GAAG;EACHC,MAAM;EACNC,QAAQ;EACR;EACA;EACAC,KAAK,GAAG,IAAI;EACZ,GAAGC;AACwB,CAAC,EAAG;EAC/B,IAAK,CAAEJ,GAAG,EAAG;IACZ,OACCK,aAAA,CAACV,gBAAgB;MAChBW,SAAS,EAAC,wFAAwF;MAClGC,GAAG,EAAGL,QAAmC;MAAA,GACpCE;IAAK,CACV,CAAC;EAEJ;EAEA,MAAMI,OAAO,GAAGZ,WAAW,CAAEI,GAAI,CAAC;EAElC,OAAOQ,OAAO,GACbH,aAAA;IAAA,GACMD,KAAK;IACVL,QAAQ,EAAGA,QAAU;IACrBO,SAAS,EAAC,kFAAkF;IAC5FG,IAAI;IACJN,KAAK,EAAGA,KAAO;IACfO,YAAY,EAAGT,MAAQ;IACvBM,GAAG,EAAGL,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CAAC,GAEFK,aAAA;IAAA,GACMD,KAAK;IACVN,GAAG,EAAGA,GAAK;IACXQ,SAAS,EAAC,kFAAkF;IAC5FL,MAAM,EAAGA,MAAQ;IACjBM,GAAG,EAAGL,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CACD;AACF","ignoreList":[]}