@wordpress/components 25.5.0 → 25.6.0

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

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocalPointPickerControls;
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
-
 var _utils = require("./utils");
-
 /**
  * WordPress dependencies
  */
@@ -20,11 +15,10 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
+
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
-
 const noop = () => {};
-
 function FocalPointPickerControls({
   __nextHasNoMarginBottom,
   hasHelpText,
@@ -36,18 +30,16 @@ function FocalPointPickerControls({
 }) {
   const valueX = (0, _utils.fractionToPercentage)(point.x);
   const valueY = (0, _utils.fractionToPercentage)(point.y);
-
   const handleChange = (value, axis) => {
     if (value === undefined) return;
     const num = parseInt(value, 10);
-
     if (!isNaN(num)) {
-      onChange({ ...point,
+      onChange({
+        ...point,
         [axis]: num / 100
       });
     }
   };
-
   return (0, _element.createElement)(_focalPointPickerStyle.ControlWrapper, {
     className: "focal-point-picker__controls",
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
@@ -66,7 +58,6 @@ function FocalPointPickerControls({
     dragDirection: "s"
   }));
 }
-
 function FocalPointUnitControl(props) {
   return (0, _element.createElement)(_focalPointPickerStyle.StyledUnitControl, {
     className: "focal-point-picker__controls-position-unit-control",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["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":";;;;;;;;;AAGA;;AAKA;;AAIA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAYA,MAAMA,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEe,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,GAAG,iCAAsBH,KAAK,CAACC,CAA5B,CAAf;AACA,QAAMG,MAAM,GAAG,iCAAsBJ,KAAK,CAACE,CAA5B,CAAf;;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,4BAAC,qCAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,kBAAa,cAAI,2BAAJ,CAFd;AAGC,IAAA,KAAK,EAAG,CAAEK,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,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAG,cAAI,KAAJ,CADT;AAEC,kBAAa,cAAI,0BAAJ,CAFd;AAGC,IAAA,KAAK,EAAG,CAAET,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,4BAAC,wCAAD;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"]}
+{"version":3,"names":["_i18n","require","_focalPointPickerStyle","_utils","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","fractionToPercentage","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","_element","createElement","ControlWrapper","className","FocalPointUnitControl","label","__","join","next","dragDirection","props","StyledUnitControl","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\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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AAIA,IAAAE,MAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAYA,MAAMG,eAAe,GAAG,CAAC;AACzB,MAAMC,eAAe,GAAG,GAAG;AAC3B,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,wBAAwBA,CAAE;EACjDC,uBAAuB;EACvBC,WAAW;EACXC,QAAQ,GAAGJ,IAAI;EACfK,KAAK,GAAG;IACPC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ;AAC8B,CAAC,EAAG;EAClC,MAAMC,MAAM,GAAG,IAAAC,2BAAoB,EAAEJ,KAAK,CAACC,CAAE,CAAC;EAC9C,MAAMI,MAAM,GAAG,IAAAD,2BAAoB,EAAEJ,KAAK,CAACE,CAAE,CAAC;EAE9C,MAAMI,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;MACrBX,QAAQ,CAAE;QAAE,GAAGC,KAAK;QAAE,CAAEQ,IAAI,GAAIE,GAAG,GAAG;MAAI,CAAE,CAAC;IAC9C;EACD,CAAC;EAED,OACC,IAAAG,QAAA,CAAAC,aAAA,EAACvB,sBAAA,CAAAwB,cAAc;IACdC,SAAS,EAAC,8BAA8B;IACxCnB,uBAAuB,EAAGA,uBAAyB;IACnDC,WAAW,EAAGA;EAAa,GAE3B,IAAAe,QAAA,CAAAC,aAAA,EAACG,qBAAqB;IACrBC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtB,cAAa,IAAAA,QAAE,EAAE,2BAA4B,CAAG;IAChDZ,KAAK,EAAG,CAAEJ,MAAM,EAAE,GAAG,CAAE,CAACiB,IAAI,CAAE,EAAG,CAAG;IACpCrB,QAAQ,EACHsB,IAAI,IACPf,YAAY,CACXe,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CAAC,EACF,IAAAT,QAAA,CAAAC,aAAA,EAACG,qBAAqB;IACrBC,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;IACrB,cAAa,IAAAA,QAAE,EAAE,0BAA2B,CAAG;IAC/CZ,KAAK,EAAG,CAAEF,MAAM,EAAE,GAAG,CAAE,CAACe,IAAI,CAAE,EAAG,CAAG;IACpCrB,QAAQ,EACHsB,IAAI,IACPf,YAAY,CACXe,IAAI,EACJ,GACD,CACD;IACDC,aAAa,EAAC;EAAG,CACjB,CACc,CAAC;AAEnB;AAEA,SAASL,qBAAqBA,CAAEM,KAAuB,EAAG;EACzD,OACC,IAAAV,QAAA,CAAAC,aAAA,EAACvB,sBAAA,CAAAiC,iBAAiB;IACjBR,SAAS,EAAC,oDAAoD;IAC9DS,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAGhC,eAAiB;IACvBiC,GAAG,EAAGlC,eAAiB;IACvBmC,KAAK,EAAG,CAAE;MAAErB,KAAK,EAAE,GAAG;MAAEW,KAAK,EAAE;IAAI,CAAC,CAAI;IAAA,GACnCK;EAAK,CACV,CAAC;AAEJ"}

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocalPoint;
-
 var _element = require("@wordpress/element");
-
 var _focalPointStyle = require("./styles/focal-point-style");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 /**
  * Internal dependencies
  */
@@ -20,6 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * External dependencies
  */
+
 function FocalPoint({
   left = '50%',
   top = '50%',
@@ -30,7 +26,8 @@ function FocalPoint({
     left,
     top
   };
-  return (0, _element.createElement)(_focalPointStyle.PointerCircle, { ...props,
+  return (0, _element.createElement)(_focalPointStyle.PointerCircle, {
+    ...props,
     className: classes,
     style: style
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["FocalPoint","left","top","props","classes","style"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,UAAT,CAAqB;AACnCC,EAAAA,IAAI,GAAG,KAD4B;AAEnCC,EAAAA,GAAG,GAAG,KAF6B;AAGnC,KAAGC;AAHgC,CAArB,EAIwC;AACtD,QAAMC,OAAO,GAAG,yBACf,+CADe,CAAhB;AAIA,QAAMC,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,4BAAC,8BAAD,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"]}
+{"version":3,"names":["_focalPointStyle","require","_classnames","_interopRequireDefault","FocalPoint","left","top","props","classes","classnames","style","_element","createElement","PointerCircle","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 '../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"],"mappings":";;;;;;;;AAGA,IAAAA,gBAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASG,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EACzB,+CACD,CAAC;EAED,MAAMC,KAAK,GAAG;IAAEL,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAO,IAAAK,QAAA,CAAAC,aAAA,EAACZ,gBAAA,CAAAa,aAAa;IAAA,GAAMN,KAAK;IAAGO,SAAS,EAAGN,OAAS;IAACE,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E"}

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocalPoint;
-
 var _element = require("@wordpress/element");
-
 var _primitives = require("@wordpress/primitives");
-
 var _style = _interopRequireDefault(require("./style.scss"));
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,7 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
+
 function FocalPoint({
   height,
   style,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["FocalPoint","height","style","width","styles","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,UAAT,CAAqB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAArB,EAAgD;AAC9D,SACC,4BAAC,eAAD;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,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGC,eAAOC,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,4BAAC,gBAAD;AACC,IAAA,KAAK,EAAGD,eAAOE,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,"names":["_primitives","require","_style","_interopRequireDefault","FocalPoint","height","style","width","_element","createElement","SVG","viewBox","xmlns","Path","styles","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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASG,UAAUA,CAAE;EAAEC,MAAM;EAAEC,KAAK;EAAEC;AAAM,CAAC,EAAG;EAC9D,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAU,GAAG;IACHL,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA,KAAO;IACfK,OAAO,EAAC,WAAW;IACnBJ,KAAK,EAAGA,KAAO;IACfK,KAAK,EAAC;EAA4B,GAElC,IAAAJ,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,IAAI;IACJP,KAAK,EAAGQ,cAAM,CAACC,yBAA2B;IAC1CC,CAAC,EAAC;EAAoH,CACtH,CAAC,EACF,IAAAR,QAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,IAAI;IACJP,KAAK,EAAGQ,cAAM,CAACG,sBAAwB;IACvCD,CAAC,EAAC;EAA6H,CAC/H,CACG,CAAC;AAER"}

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

@@ -4,19 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocalPointPickerGrid;
-
 var _element = require("@wordpress/element");
-
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
-
 /**
  * Internal dependencies
  */
+
 function FocalPointPickerGrid({
   bounds,
   ...props
 }) {
-  return (0, _element.createElement)(_focalPointPickerStyle.GridView, { ...props,
+  return (0, _element.createElement)(_focalPointPickerStyle.GridView, {
+    ...props,
     className: "components-focal-point-picker__grid",
     style: {
       width: bounds.width,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AASe,SAASA,oBAAT,CAA+B;AAC7CC,EAAAA,MAD6C;AAE7C,KAAGC;AAF0C,CAA/B,EAGkD;AAChE,SACC,4BAAC,+BAAD,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,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,4BAAC,gCAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,4BAAC,gCAAD;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,"names":["_focalPointPickerStyle","require","FocalPointPickerGrid","bounds","props","_element","createElement","GridView","className","style","width","height","GridLineX","top","GridLineY","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 '../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"],"mappings":";;;;;;;AAGA,IAAAA,sBAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAO,QAAQ;IAAA,GACHH,KAAK;IACVI,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEP,MAAM,CAACO,KAAK;MACnBC,MAAM,EAAER,MAAM,CAACQ;IAChB;EAAG,GAEH,IAAAN,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvC,IAAAV,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb"}

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

@@ -1,37 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocalPointPicker = FocalPointPicker;
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _i18n = require("@wordpress/i18n");
-
 var _compose = require("@wordpress/compose");
-
 var _baseControl = _interopRequireDefault(require("../base-control"));
-
 var _controls = _interopRequireDefault(require("./controls"));
-
 var _focalPoint = _interopRequireDefault(require("./focal-point"));
-
 var _grid = _interopRequireDefault(require("./grid"));
-
 var _media = _interopRequireDefault(require("./media"));
-
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
-
 var _utils = require("./utils");
-
 var _hooks = require("../utils/hooks");
-
 /**
  * External dependencies
  */
@@ -43,7 +29,9 @@ var _hooks = require("../utils/hooks");
 /**
  * Internal dependencies
  */
+
 const GRID_OVERLAY_TIMEOUT = 600;
+
 /**
  * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
  *
@@ -89,7 +77,6 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * };
  * ```
  */
-
 function FocalPointPicker({
   __nextHasNoMarginBottom,
   autoPlay = true,
@@ -117,9 +104,10 @@ function FocalPointPicker({
   } = (0, _compose.__experimentalUseDragging)({
     onDragStart: event => {
       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.
+      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?.(value, event);
       setPoint(value);
@@ -136,8 +124,9 @@ function FocalPointPicker({
       onDragEnd?.();
       onChange?.(point);
     }
-  }); // Uses the internal point while dragging or else the value from props.
+  });
 
+  // Uses the internal point while dragging or else the value from props.
   const {
     x,
     y
@@ -149,14 +138,15 @@ function FocalPointPicker({
     const {
       clientWidth: width,
       clientHeight: height
-    } = dragAreaRef.current; // Falls back to initial bounds if the ref has no size. Since styles
+    } = dragAreaRef.current;
+    // Falls back to initial bounds if the ref has no size. Since styles
     // give the drag area dimensions even when the media has not loaded
     // this should only happen in unit tests (jsdom).
-
     setBounds(width > 0 && height > 0 ? {
       width,
       height
-    } : { ..._utils.INITIAL_BOUNDS
+    } : {
+      ..._utils.INITIAL_BOUNDS
     });
   });
   (0, _element.useEffect)(() => {
@@ -167,11 +157,13 @@ function FocalPointPicker({
     } = dragAreaRef.current.ownerDocument;
     defaultView?.addEventListener('resize', updateBounds);
     return () => defaultView?.removeEventListener('resize', updateBounds);
-  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
+  }, []);
 
-  (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []); // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
-  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
+  // Updates the bounds to cover cases of unspecified media or load failures.
+  (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
 
+  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
+  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
   const getValueWithinDragArea = ({
     clientX,
     clientY,
@@ -183,34 +175,28 @@ function FocalPointPicker({
       left
     } = dragAreaRef.current.getBoundingClientRect();
     let nextX = (clientX - left) / bounds.width;
-    let nextY = (clientY - top) / bounds.height; // Enables holding shift to jump values by 10%.
-
+    let nextY = (clientY - top) / bounds.height;
+    // Enables holding shift to jump values by 10%.
     if (shiftKey) {
       nextX = Math.round(nextX / 0.1) * 0.1;
       nextY = Math.round(nextY / 0.1) * 0.1;
     }
-
     return getFinalValue({
       x: nextX,
       y: nextY
     });
   };
-
   const getFinalValue = value => {
     var _resolvePoint;
-
     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));
-
     const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;
-
     return {
       x: roundToTwoDecimalPlaces(resolvedValue.x),
       y: roundToTwoDecimalPlaces(resolvedValue.y)
     };
   };
-
   const arrowKeyStep = event => {
     const {
       code,
@@ -228,7 +214,6 @@ function FocalPointPicker({
     value[axis] = value[axis] + delta;
     onChange?.(getFinalValue(value));
   };
-
   const focalPointPosition = {
     left: x * bounds.width,
     top: y * bounds.height
@@ -243,7 +228,8 @@ function FocalPointPicker({
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return (0, _element.createElement)(_baseControl.default, { ...restProps,
+  return (0, _element.createElement)(_baseControl.default, {
+    ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
@@ -269,7 +255,8 @@ function FocalPointPicker({
     autoPlay: autoPlay,
     onLoad: refUpdateBounds.current,
     src: url
-  }), (0, _element.createElement)(_focalPoint.default, { ...focalPointPosition,
+  }), (0, _element.createElement)(_focalPoint.default, {
+    ...focalPointPosition,
     isDragging: isDragging
   }))), (0, _element.createElement)(_controls.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
@@ -283,7 +270,6 @@ function FocalPointPicker({
     }
   }));
 }
-
 var _default = FocalPointPicker;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"names":["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","INITIAL_BOUNDS","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,"names":["_element","require","_classnames","_interopRequireDefault","_i18n","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","classnames","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","createElement","default","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"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 '../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"],"mappings":"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"}