@wordpress/components 27.6.0 → 28.0.1

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

@@ -1 +1 @@
-{"version":3,"names":["PointerCircle","clsx","FocalPoint","left","top","props","classes","style","createElement","className"],"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = clsx( 'components-focal-point-picker__icon_container' );\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,4BAA4B;;AAE1D;AACA;AACA;AACA,OAAOC,IAAI,MAAM,MAAM;AAIvB,eAAe,SAASC,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,OAAO,GAAGL,IAAI,CAAE,+CAAgD,CAAC;EAEvE,MAAMM,KAAK,GAAG;IAAEJ,IAAI;IAAEC;EAAI,CAAC;EAE3B,OAAOI,aAAA,CAACR,aAAa;IAAA,GAAMK,KAAK;IAAGI,SAAS,EAAGH,OAAS;IAACC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC5E","ignoreList":[]}
+{"version":3,"names":["PointerCircle","jsx","_jsx","FocalPoint","left","top","props","style","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 type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst style = { left, top };\n\n\treturn (\n\t\t<PointerCircle\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__icon_container\"\n\t\t\tstyle={ style }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,4BAA4B;;AAE1D;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAMA,eAAe,SAASC,UAAUA,CAAE;EACnCC,IAAI,GAAG,KAAK;EACZC,GAAG,GAAG,KAAK;EACX,GAAGC;AAC+C,CAAC,EAAG;EACtD,MAAMC,KAAK,GAAG;IAAEH,IAAI;IAAEC;EAAI,CAAC;EAE3B,oBACCH,IAAA,CAACF,aAAa;IAAA,GACRM,KAAK;IACVE,SAAS,EAAC,+CAA+C;IACzDD,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -8,23 +7,26 @@ import { Path, SVG } from '@wordpress/primitives';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function FocalPoint({
   height,
   style,
   width
 }) {
-  return createElement(SVG, {
+  return /*#__PURE__*/_jsxs(SVG, {
     height: height,
     style: style,
     viewBox: "0 0 30 30",
     width: width,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, createElement(Path, {
-    style: styles.focalPointIconPathOutline,
-    d: "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"
-  }), createElement(Path, {
-    style: styles.focalPointIconPathFill,
-    d: "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"
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx(Path, {
+      style: styles.focalPointIconPathOutline,
+      d: "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"
+    }), /*#__PURE__*/_jsx(Path, {
+      style: styles.focalPointIconPathFill,
+      d: "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"
+    })]
+  });
 }
 //# sourceMappingURL=focal-point.native.js.map

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

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

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

@@ -1,35 +1,37 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function FocalPointPickerGrid({
   bounds,
   ...props
 }) {
-  return createElement(GridView, {
+  return /*#__PURE__*/_jsxs(GridView, {
     ...props,
     className: "components-focal-point-picker__grid",
     style: {
       width: bounds.width,
       height: bounds.height
-    }
-  }, createElement(GridLineX, {
-    style: {
-      top: '33%'
-    }
-  }), createElement(GridLineX, {
-    style: {
-      top: '66%'
-    }
-  }), createElement(GridLineY, {
-    style: {
-      left: '33%'
-    }
-  }), createElement(GridLineY, {
-    style: {
-      left: '66%'
-    }
-  }));
+    },
+    children: [/*#__PURE__*/_jsx(GridLineX, {
+      style: {
+        top: '33%'
+      }
+    }), /*#__PURE__*/_jsx(GridLineX, {
+      style: {
+        top: '66%'
+      }
+    }), /*#__PURE__*/_jsx(GridLineY, {
+      style: {
+        left: '33%'
+      }
+    }), /*#__PURE__*/_jsx(GridLineY, {
+      style: {
+        left: '66%'
+      }
+    })]
+  });
 }
 //# sourceMappingURL=grid.js.map

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

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

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -22,6 +21,8 @@ import Media from './media';
 import { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
 import { useUpdateEffect } from '../utils/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_OVERLAY_TIMEOUT = 600;
 
 /**
@@ -233,50 +234,53 @@ export function FocalPointPicker({
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return createElement(BaseControl, {
+  return /*#__PURE__*/_jsxs(BaseControl, {
     ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
     help: help,
-    className: classes
-  }, createElement(MediaWrapper, {
-    className: "components-focal-point-picker-wrapper"
-  }, createElement(MediaContainer, {
-    className: "components-focal-point-picker",
-    onKeyDown: arrowKeyStep,
-    onMouseDown: startDrag,
-    onBlur: () => {
-      if (isDragging) {
-        endDrag();
+    className: classes,
+    children: [/*#__PURE__*/_jsx(MediaWrapper, {
+      className: "components-focal-point-picker-wrapper",
+      children: /*#__PURE__*/_jsxs(MediaContainer, {
+        className: "components-focal-point-picker",
+        onKeyDown: arrowKeyStep,
+        onMouseDown: startDrag,
+        onBlur: () => {
+          if (isDragging) {
+            endDrag();
+          }
+        },
+        ref: dragAreaRef,
+        role: "button",
+        tabIndex: -1,
+        children: [/*#__PURE__*/_jsx(Grid, {
+          bounds: bounds,
+          showOverlay: showGridOverlay
+        }), /*#__PURE__*/_jsx(Media, {
+          alt: __('Media preview'),
+          autoPlay: autoPlay,
+          onLoad: refUpdateBounds.current,
+          src: url
+        }), /*#__PURE__*/_jsx(FocalPoint, {
+          ...focalPointPosition,
+          isDragging: isDragging
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Controls, {
+      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      hasHelpText: !!help,
+      point: {
+        x,
+        y
+      },
+      onChange: value => {
+        onChange?.(getFinalValue(value));
       }
-    },
-    ref: dragAreaRef,
-    role: "button",
-    tabIndex: -1
-  }, createElement(Grid, {
-    bounds: bounds,
-    showOverlay: showGridOverlay
-  }), createElement(Media, {
-    alt: __('Media preview'),
-    autoPlay: autoPlay,
-    onLoad: refUpdateBounds.current,
-    src: url
-  }), createElement(FocalPoint, {
-    ...focalPointPosition,
-    isDragging: isDragging
-  }))), createElement(Controls, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    __next40pxDefaultSize: __next40pxDefaultSize,
-    hasHelpText: !!help,
-    point: {
-      x,
-      y
-    },
-    onChange: value => {
-      onChange?.(getFinalValue(value));
-    }
-  }));
+    })]
+  });
 }
 export default FocalPointPicker;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,7 +9,6 @@ import Video from 'react-native-video';
  */
 import { requestFocalPointPickerTooltipShown, setFocalPointPickerTooltipShown } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
-import { Image, UnitControl } from '@wordpress/components';
 import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -22,6 +20,10 @@ import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
+import Image from '../mobile/image';
+import UnitControl from '../unit-control';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
 const FOCAL_POINT_UNITS = [{
@@ -187,66 +189,69 @@ function FocalPointPicker(props) {
   const onYCoordinateChange = y => onChange({
     y: (y / 100).toFixed(2)
   });
-  return createElement(View, {
-    style: styles.container
-  }, createElement(Tooltip, {
-    onPress: onTooltipPress,
-    visible: tooltipVisible
-  }, createElement(View, {
-    style: [styles.media, mediaBackground]
-  }, createElement(View, {
-    ...panResponder.panHandlers,
-    onLayout: onMediaLayout,
-    style: styles.mediaContainer
-  }, !isVideo && createElement(Image, {
-    editButton: false,
-    highlightSelected: false,
-    isSelected: !displayPlaceholder,
-    height: "100%",
-    url: url,
-    style: imagePreviewStyles,
-    onImageDataLoad: onImageDataLoad
-  }), isVideo && createElement(Video, {
-    muted: true,
-    paused: true,
-    disableFocus: true,
-    onLoad: onVideoLoad,
-    ref: videoRef,
-    resizeMode: "contain",
-    source: {
-      uri: url
-    },
-    style: videoPreviewStyles
-  }), !displayPlaceholder && createElement(Animated.View, {
-    pointerEvents: "none",
-    style: focalPointGroupStyles
-  }, createElement(Tooltip.Label, {
-    text: __('Drag to adjust focal point'),
-    yOffset: -(FOCAL_POINT_SIZE / 2)
-  }), createElement(FocalPoint, {
-    height: focalPointStyles.height,
-    style: focalPointStyles,
-    testID: "focal-point-picker-handle",
-    width: focalPointStyles.width
-  })))), createElement(UnitControl, {
-    key: `xAxis-${sliderKey}`,
-    label: __('X-Axis Position'),
-    max: MAX_POSITION_VALUE,
-    min: MIN_POSITION_VALUE,
-    onChange: onXCoordinateChange,
-    unit: "%",
-    units: FOCAL_POINT_UNITS,
-    value: Math.round(focalPoint.x * 100)
-  }), createElement(UnitControl, {
-    key: `yAxis-${sliderKey}`,
-    label: __('Y-Axis Position'),
-    max: MAX_POSITION_VALUE,
-    min: MIN_POSITION_VALUE,
-    onChange: onYCoordinateChange,
-    unit: "%",
-    units: FOCAL_POINT_UNITS,
-    value: Math.round(focalPoint.y * 100)
-  })));
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(Tooltip, {
+      onPress: onTooltipPress,
+      visible: tooltipVisible,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.media, mediaBackground],
+        children: /*#__PURE__*/_jsxs(View, {
+          ...panResponder.panHandlers,
+          onLayout: onMediaLayout,
+          style: styles.mediaContainer,
+          children: [!isVideo && /*#__PURE__*/_jsx(Image, {
+            editButton: false,
+            highlightSelected: false,
+            isSelected: !displayPlaceholder,
+            height: "100%",
+            url: url,
+            style: imagePreviewStyles,
+            onImageDataLoad: onImageDataLoad
+          }), isVideo && /*#__PURE__*/_jsx(Video, {
+            muted: true,
+            paused: true,
+            disableFocus: true,
+            onLoad: onVideoLoad,
+            ref: videoRef,
+            resizeMode: "contain",
+            source: {
+              uri: url
+            },
+            style: videoPreviewStyles
+          }), !displayPlaceholder && /*#__PURE__*/_jsxs(Animated.View, {
+            pointerEvents: "none",
+            style: focalPointGroupStyles,
+            children: [/*#__PURE__*/_jsx(Tooltip.Label, {
+              text: __('Drag to adjust focal point'),
+              yOffset: -(FOCAL_POINT_SIZE / 2)
+            }), /*#__PURE__*/_jsx(FocalPoint, {
+              height: focalPointStyles.height,
+              style: focalPointStyles,
+              testID: "focal-point-picker-handle",
+              width: focalPointStyles.width
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(UnitControl, {
+        label: __('X-Axis Position'),
+        max: MAX_POSITION_VALUE,
+        min: MIN_POSITION_VALUE,
+        onChange: onXCoordinateChange,
+        unit: "%",
+        units: FOCAL_POINT_UNITS,
+        value: Math.round(focalPoint.x * 100)
+      }, `xAxis-${sliderKey}`), /*#__PURE__*/_jsx(UnitControl, {
+        label: __('Y-Axis Position'),
+        max: MAX_POSITION_VALUE,
+        min: MIN_POSITION_VALUE,
+        onChange: onYCoordinateChange,
+        unit: "%",
+        units: FOCAL_POINT_UNITS,
+        value: Math.round(focalPoint.y * 100)
+      }, `yAxis-${sliderKey}`)]
+    })
+  });
 }
 export default FocalPointPicker;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","createElement","style","container","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","key","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Animated","PanResponder","StyleSheet","View","Video","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","clamp","Image","UnitControl","jsx","_jsx","jsxs","_jsxs","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","current","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","style","container","children","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","yOffset","testID","max","min","unit","units","Math","round"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\nimport Image from '../mobile/image';\nimport UnitControl from '../unit-control';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -8,6 +7,7 @@ import { createElement } from "react";
  */
 import { MediaPlaceholder } from './styles/focal-point-picker-style';
 import { isVideoType } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function Media({
   alt,
   autoPlay,
@@ -20,14 +20,14 @@ export default function Media({
   ...props
 }) {
   if (!src) {
-    return createElement(MediaPlaceholder, {
+    return /*#__PURE__*/_jsx(MediaPlaceholder, {
       className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
       ref: mediaRef,
       ...props
     });
   }
   const isVideo = isVideoType(src);
-  return isVideo ? createElement("video", {
+  return isVideo ? /*#__PURE__*/_jsx("video", {
     ...props,
     autoPlay: autoPlay,
     className: "components-focal-point-picker__media components-focal-point-picker__media--video",
@@ -36,7 +36,7 @@ export default function Media({
     onLoadedData: onLoad,
     ref: mediaRef,
     src: src
-  }) : createElement("img", {
+  }) : /*#__PURE__*/_jsx("img", {
     ...props,
     alt: alt,
     className: "components-focal-point-picker__media components-focal-point-picker__media--image",