@wordpress/components 25.0.0 → 25.1.1

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -16,16 +15,15 @@ const TEXTCONTROL_MAX = 100;
 
 const noop = () => {};
 
-export default function FocalPointPickerControls(_ref) {
-  let {
-    __nextHasNoMarginBottom,
-    hasHelpText,
-    onChange = noop,
-    point = {
-      x: 0.5,
-      y: 0.5
-    }
-  } = _ref;
+export default function FocalPointPickerControls({
+  __nextHasNoMarginBottom,
+  hasHelpText,
+  onChange = noop,
+  point = {
+    x: 0.5,
+    y: 0.5
+  }
+}) {
   const valueX = fractionToPercentage(point.x);
   const valueY = fractionToPercentage(point.y);
 
@@ -46,11 +44,13 @@ export default function FocalPointPickerControls(_ref) {
     hasHelpText: hasHelpText
   }, createElement(FocalPointUnitControl, {
     label: __('Left'),
+    "aria-label": __('Focal point left position'),
     value: [valueX, '%'].join(''),
     onChange: next => handleChange(next, 'x'),
     dragDirection: "e"
   }), createElement(FocalPointUnitControl, {
     label: __('Top'),
+    "aria-label": __('Focal point top position'),
     value: [valueY, '%'].join(''),
     onChange: next => handleChange(next, 'y'),
     dragDirection: "s"
@@ -58,7 +58,7 @@ export default function FocalPointPickerControls(_ref) {
 }
 
 function FocalPointUnitControl(props) {
-  return createElement(StyledUnitControl, _extends({
+  return createElement(StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",
     labelPosition: "top",
     max: TEXTCONTROL_MAX,
@@ -66,7 +66,8 @@ function FocalPointUnitControl(props) {
     units: [{
       value: '%',
       label: '%'
-    }]
-  }, props));
+    }],
+    ...props
+  });
 }
 //# sourceMappingURL=controls.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,OAQoB;AAAA,MARe;AACjDC,IAAAA,uBADiD;AAEjDC,IAAAA,WAFiD;AAGjDC,IAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,IAAAA,KAAK,GAAG;AACPC,MAAAA,CAAC,EAAE,GADI;AAEPC,MAAAA,CAAC,EAAE;AAFI;AAJyC,GAQf;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IALD,EAiBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IAjBD,CADD;AAgCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF;AALT,KAMMD,KANN,EADD;AAUA","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\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>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\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\tlabel={ __( 'Top' ) }\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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,CAAmC;AACjDC,EAAAA,uBADiD;AAEjDC,EAAAA,WAFiD;AAGjDC,EAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,EAAAA,KAAK,GAAG;AACPC,IAAAA,CAAC,EAAE,GADI;AAEPC,IAAAA,CAAC,EAAE;AAFI;AAJyC,CAAnC,EAQoB;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,2BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IALD,EAkBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,0BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IAlBD,CADD;AAkCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF,CALT;AAAA,OAMMD;AANN,IADD;AAUA","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\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>\n\t\t\t<FocalPointUnitControl\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\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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -10,20 +9,19 @@ import { PointerCircle } from './styles/focal-point-style';
  */
 
 import classnames from 'classnames';
-export default function FocalPoint(_ref) {
-  let {
-    left = '50%',
-    top = '50%',
-    ...props
-  } = _ref;
+export default function FocalPoint({
+  left = '50%',
+  top = '50%',
+  ...props
+}) {
   const classes = classnames('components-focal-point-picker__icon_container');
   const style = {
     left,
     top
   };
-  return createElement(PointerCircle, _extends({}, props, {
+  return createElement(PointerCircle, { ...props,
     className: classes,
     style: style
-  }));
+  });
 }
 //# sourceMappingURL=focal-point.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,4BAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,OAIwC;AAAA,MAJnB;AACnCC,IAAAA,IAAI,GAAG,KAD4B;AAEnCC,IAAAA,GAAG,GAAG,KAF6B;AAGnC,OAAGC;AAHgC,GAImB;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,cAAC,aAAD,eAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,KAAP;AACA","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 '../ui/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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,4BAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,CAAqB;AACnCC,EAAAA,IAAI,GAAG,KAD4B;AAEnCC,EAAAA,GAAG,GAAG,KAF6B;AAGnC,KAAGC;AAHgC,CAArB,EAIwC;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,cAAC,aAAD,OAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,IAAP;AACA","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 '../ui/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"]}

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

@@ -9,12 +9,11 @@ import { Path, SVG } from '@wordpress/primitives';
  */
 
 import styles from './style.scss';
-export default function FocalPoint(_ref) {
-  let {
-    height,
-    style,
-    width
-  } = _ref;
+export default function FocalPoint({
+  height,
+  style,
+  width
+}) {
   return createElement(SVG, {
     height: height,
     style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["Path","SVG","styles","FocalPoint","height","style","width","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,eAAe,SAASC,UAAT,OAAgD;AAAA,MAA3B;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA;AAAjB,GAA2B;AAC9D,SACC,cAAC,GAAD;AACC,IAAA,MAAM,EAAGF,MADV;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAC,WAHT;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,KAAK,EAAC;AALP,KAOC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,MAAM,CAACK,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,MAAM,CAACM,sBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAXD,CADD;AAkBA","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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["Path","SVG","styles","FocalPoint","height","style","width","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,eAAe,SAASC,UAAT,CAAqB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAArB,EAAgD;AAC9D,SACC,cAAC,GAAD;AACC,IAAA,MAAM,EAAGF,MADV;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAC,WAHT;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,KAAK,EAAC;AALP,KAOC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,MAAM,CAACK,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,MAAM,CAACM,sBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAXD,CADD;AAkBA","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"]}

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

@@ -1,22 +1,20 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * Internal dependencies
  */
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
-export default function FocalPointPickerGrid(_ref) {
-  let {
-    bounds,
-    ...props
-  } = _ref;
-  return createElement(GridView, _extends({}, props, {
+export default function FocalPointPickerGrid({
+  bounds,
+  ...props
+}) {
+  return createElement(GridView, { ...props,
     className: "components-focal-point-picker__grid",
     style: {
       width: bounds.width,
       height: bounds.height
     }
-  }), createElement(GridLineX, {
+  }, createElement(GridLineX, {
     style: {
       top: '33%'
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,OAGkD;AAAA,MAHnB;AAC7CC,IAAAA,MAD6C;AAE7C,OAAGC;AAF0C,GAGmB;AAChE,SACC,cAAC,QAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,MAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","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 '../ui/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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,MAD6C;AAE7C,KAAGC;AAF0C,CAA/B,EAGkD;AAChE,SACC,cAAC,QAAD,OACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,KAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","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 '../ui/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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -71,25 +70,24 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * ```
  */
 
-export function FocalPointPicker(_ref) {
-  let {
-    __nextHasNoMarginBottom,
-    autoPlay = true,
-    className,
-    help,
-    label,
-    onChange,
-    onDrag,
-    onDragEnd,
-    onDragStart,
-    resolvePoint,
-    url,
-    value: valueProp = {
-      x: 0.5,
-      y: 0.5
-    },
-    ...restProps
-  } = _ref;
+export function FocalPointPicker({
+  __nextHasNoMarginBottom,
+  autoPlay = true,
+  className,
+  help,
+  label,
+  onChange,
+  onDrag,
+  onDragEnd,
+  onDragStart,
+  resolvePoint,
+  url,
+  value: valueProp = {
+    x: 0.5,
+    y: 0.5
+  },
+  ...restProps
+}) {
   const [point, setPoint] = useState(valueProp);
   const [showGridOverlay, setShowGridOverlay] = useState(false);
   const {
@@ -98,14 +96,12 @@ export function FocalPointPicker(_ref) {
     isDragging
   } = useDragging({
     onDragStart: event => {
-      var _dragAreaRef$current;
-
-      (_dragAreaRef$current = dragAreaRef.current) === null || _dragAreaRef$current === void 0 ? void 0 : _dragAreaRef$current.focus();
+      dragAreaRef.current?.focus();
       const value = getValueWithinDragArea(event); // `value` can technically be undefined if getValueWithinDragArea() is
       // called before dragAreaRef is set, but this shouldn't happen in reality.
 
       if (!value) return;
-      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(value, event);
+      onDragStart?.(value, event);
       setPoint(value);
     },
     onDragMove: event => {
@@ -113,12 +109,12 @@ export function FocalPointPicker(_ref) {
       event.preventDefault();
       const value = getValueWithinDragArea(event);
       if (!value) return;
-      onDrag === null || onDrag === void 0 ? void 0 : onDrag(value, event);
+      onDrag?.(value, event);
       setPoint(value);
     },
     onDragEnd: () => {
-      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
-      onChange === null || onChange === void 0 ? void 0 : onChange(point);
+      onDragEnd?.();
+      onChange?.(point);
     }
   }); // Uses the internal point while dragging or else the value from props.
 
@@ -149,19 +145,18 @@ export function FocalPointPicker(_ref) {
     const {
       defaultView
     } = dragAreaRef.current.ownerDocument;
-    defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('resize', updateBounds);
-    return () => defaultView === null || defaultView === void 0 ? void 0 : defaultView.removeEventListener('resize', updateBounds);
+    defaultView?.addEventListener('resize', updateBounds);
+    return () => defaultView?.removeEventListener('resize', updateBounds);
   }, []); // Updates the bounds to cover cases of unspecified media or load failures.
 
   useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []); // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
   // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
 
-  const getValueWithinDragArea = _ref2 => {
-    let {
-      clientX,
-      clientY,
-      shiftKey
-    } = _ref2;
+  const getValueWithinDragArea = ({
+    clientX,
+    clientY,
+    shiftKey
+  }) => {
     if (!dragAreaRef.current) return;
     const {
       top,
@@ -184,7 +179,7 @@ export function FocalPointPicker(_ref) {
   const getFinalValue = value => {
     var _resolvePoint;
 
-    const resolvedValue = (_resolvePoint = resolvePoint === null || resolvePoint === void 0 ? void 0 : resolvePoint(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
     resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
     resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
 
@@ -211,7 +206,7 @@ export function FocalPointPicker(_ref) {
     const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
     const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
     value[axis] = value[axis] + delta;
-    onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+    onChange?.(getFinalValue(value));
   };
 
   const focalPointPosition = {
@@ -228,13 +223,13 @@ export function FocalPointPicker(_ref) {
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return createElement(BaseControl, _extends({}, restProps, {
+  return createElement(BaseControl, { ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
     help: help,
     className: classes
-  }), createElement(MediaWrapper, {
+  }, createElement(MediaWrapper, {
     className: "components-focal-point-picker-wrapper"
   }, createElement(MediaContainer, {
     className: "components-focal-point-picker",
@@ -254,9 +249,9 @@ export function FocalPointPicker(_ref) {
     autoPlay: autoPlay,
     onLoad: refUpdateBounds.current,
     src: url
-  }), createElement(FocalPoint, _extends({}, focalPointPosition, {
+  }), createElement(FocalPoint, { ...focalPointPosition,
     isDragging: isDragging
-  })))), createElement(Controls, {
+  }))), createElement(Controls, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     hasHelpText: !!help,
     point: {
@@ -264,7 +259,7 @@ export function FocalPointPicker(_ref) {
       y
     },
     onChange: value => {
-      onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+      onChange?.(getFinalValue(value));
     }
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","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","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout"],"mappings":"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","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 '../ui/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\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 * bounds.width,\n\t\ttop: y * 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\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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"names":["classnames","__","useEffect","useRef","useState","__experimentalUseDragging","useDragging","useInstanceId","useIsomorphicLayoutEffect","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","INITIAL_BOUNDS","useUpdateEffect","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","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","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","instanceId","id","timeout","window","setTimeout","clearTimeout"],"mappings":"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","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 '../ui/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\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 * bounds.width,\n\t\ttop: y * 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\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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -33,8 +32,6 @@ const FOCAL_POINT_UNITS = [{
 }];
 
 function FocalPointPicker(props) {
-  var _styles$focalPoint, _styles$focalPoint2;
-
   const {
     focalPoint,
     onChange,
@@ -120,8 +117,8 @@ function FocalPointPicker(props) {
       const x = pageX - locationPageOffsetX.current;
       const y = pageY - locationPageOffsetY.current;
       onChange({
-        x: clamp(x / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width), 0, 1).toFixed(2),
-        y: clamp(y / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height), 0, 1).toFixed(2)
+        x: clamp(x / containerSize?.width, 0, 1).toFixed(2),
+        y: clamp(y / containerSize?.height, 0, 1).toFixed(2)
       }); // Slider (child of RangeCell) is uncontrolled, so we must increment a
       // key to re-mount and sync the pan gesture values to the sliders
       // https://github.com/callstack/react-native-slider/tree/v3.0.3#value
@@ -139,14 +136,14 @@ function FocalPointPicker(props) {
   const focalPointGroupStyles = [styles.focalPointGroup, {
     transform: [{
       translateX: pan.x.interpolate({
-        inputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0],
-        outputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0],
+        inputRange: [0, containerSize?.width || 0],
+        outputRange: [0, containerSize?.width || 0],
         extrapolate: 'clamp'
       })
     }, {
       translateY: pan.y.interpolate({
-        inputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || 0],
-        outputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || 0],
+        inputRange: [0, containerSize?.height || 0],
+        outputRange: [0, containerSize?.height || 0],
         extrapolate: 'clamp'
       })
     }]
@@ -167,7 +164,7 @@ function FocalPointPicker(props) {
       width
     } = event.nativeEvent.layout;
 
-    if (width !== 0 && height !== 0 && ((containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== width || (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) !== height)) {
+    if (width !== 0 && height !== 0 && (containerSize?.width !== width || containerSize?.height !== height)) {
       setContainerSize({
         width,
         height
@@ -189,7 +186,7 @@ function FocalPointPicker(props) {
     setDisplayPlaceholder(false); // Avoid invisible, paused video on Android, presumably related to
     // https://github.com/react-native-video/react-native-video/issues/1979
 
-    videoRef === null || videoRef === void 0 ? void 0 : videoRef.current.seek(0);
+    videoRef?.current.seek(0);
   };
 
   const onXCoordinateChange = x => onChange({
@@ -207,10 +204,10 @@ function FocalPointPicker(props) {
     visible: tooltipVisible
   }, createElement(View, {
     style: [styles.media, mediaBackground]
-  }, createElement(View, _extends({}, panResponder.panHandlers, {
+  }, createElement(View, { ...panResponder.panHandlers,
     onLayout: onMediaLayout,
     style: styles.mediaContainer
-  }), !isVideo && createElement(Image, {
+  }, !isVideo && createElement(Image, {
     editButton: false,
     highlightSelected: false,
     isSelected: !displayPlaceholder,
@@ -236,9 +233,9 @@ function FocalPointPicker(props) {
     text: __('Drag to adjust focal point'),
     yOffset: -(FOCAL_POINT_SIZE / 2)
   }), createElement(FocalPoint, {
-    height: (_styles$focalPoint = styles.focalPoint) === null || _styles$focalPoint === void 0 ? void 0 : _styles$focalPoint.height,
+    height: styles.focalPoint?.height,
     style: focalPointStyles,
-    width: (_styles$focalPoint2 = styles.focalPoint) === null || _styles$focalPoint2 === void 0 ? void 0 : _styles$focalPoint2.width
+    width: styles.focalPoint?.width
   })))), createElement(UnitControl, {
     key: `xAxis-${sliderKey}`,
     label: __('X-Axis Position'),