@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

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

@@ -1,84 +1,51 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var focal_point_picker_exports = {};
+__export(focal_point_picker_exports, {
+  FocalPointPicker: () => FocalPointPicker,
+  default: () => focal_point_picker_default
 });
-exports.FocalPointPicker = FocalPointPicker;
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-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");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(focal_point_picker_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_base_control = __toESM(require("../base-control"));
+var import_controls = __toESM(require("./controls"));
+var import_focal_point = __toESM(require("./focal-point"));
+var import_grid = __toESM(require("./grid"));
+var import_media = __toESM(require("./media"));
+var import_focal_point_picker_style = require("./styles/focal-point-picker-style");
+var import_utils = require("./utils");
+var import_hooks = require("../utils/hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
 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.
- *
- * This component addresses a specific problem: with large background images it is common to see undesirable crops,
- * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of
- * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.
- * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the
- * focal point is never cropped out, regardless of viewport.
- *
- * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`
- * - Corresponding CSS: `background-position: 50% 10%;`
- *
- * ```jsx
- * import { FocalPointPicker } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ focalPoint, setFocalPoint ] = useState( {
- * 		x: 0.5,
- * 		y: 0.5,
- * 	} );
- *
- * 	const url = '/path/to/image';
- *
- * 	// Example function to render the CSS styles based on Focal Point Picker value
- * 	const style = {
- * 		backgroundImage: `url(${ url })`,
- * 		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
- * 	};
- *
- * 	return (
- * 		<>
- * 			<FocalPointPicker
- *        __nextHasNoMarginBottom
- * 				url={ url }
- * 				value={ focalPoint }
- * 				onDragStart={ setFocalPoint }
- * 				onDrag={ setFocalPoint }
- * 				onChange={ setFocalPoint }
- * 			/>
- * 			<div style={ style } />
- * 		</>
- * 	);
- * };
- * ```
- */
 function FocalPointPicker({
   __nextHasNoMarginBottom,
   autoPlay = true,
@@ -97,27 +64,23 @@ function FocalPointPicker({
   },
   ...restProps
 }) {
-  const [point, setPoint] = (0, _element.useState)(valueProp);
-  const [showGridOverlay, setShowGridOverlay] = (0, _element.useState)(false);
+  const [point, setPoint] = (0, import_element.useState)(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = (0, import_element.useState)(false);
   const {
     startDrag,
     endDrag,
     isDragging
-  } = (0, _compose.__experimentalUseDragging)({
-    onDragStart: event => {
+  } = (0, import_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.
       if (!value) {
         return;
       }
       onDragStart?.(value, event);
       setPoint(value);
     },
-    onDragMove: event => {
-      // Prevents text-selection when dragging.
+    onDragMove: (event) => {
       event.preventDefault();
       const value = getValueWithinDragArea(event);
       if (!value) {
@@ -131,15 +94,13 @@ function FocalPointPicker({
       onChange?.(point);
     }
   });
-
-  // Uses the internal point while dragging or else the value from props.
   const {
     x,
     y
   } = isDragging ? point : valueProp;
-  const dragAreaRef = (0, _element.useRef)(null);
-  const [bounds, setBounds] = (0, _element.useState)(_utils.INITIAL_BOUNDS);
-  const refUpdateBounds = (0, _element.useRef)(() => {
+  const dragAreaRef = (0, import_element.useRef)(null);
+  const [bounds, setBounds] = (0, import_element.useState)(import_utils.INITIAL_BOUNDS);
+  const refUpdateBounds = (0, import_element.useRef)(() => {
     if (!dragAreaRef.current) {
       return;
     }
@@ -147,17 +108,14 @@ function FocalPointPicker({
       clientWidth: width,
       clientHeight: height
     } = 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
+      ...import_utils.INITIAL_BOUNDS
     });
   });
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     const updateBounds = refUpdateBounds.current;
     if (!dragAreaRef.current) {
       return;
@@ -165,15 +123,10 @@ function FocalPointPicker({
     const {
       defaultView
     } = dragAreaRef.current.ownerDocument;
-    defaultView?.addEventListener('resize', updateBounds);
-    return () => defaultView?.removeEventListener('resize', updateBounds);
+    defaultView?.addEventListener("resize", updateBounds);
+    return () => defaultView?.removeEventListener("resize", updateBounds);
   }, []);
-
-  // Updates the bounds to cover cases of unspecified media or load failures.
-  (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
-
-  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
-  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
+  (0, import_compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);
   const getValueWithinDragArea = ({
     clientX,
     clientY,
@@ -188,7 +141,6 @@ function FocalPointPicker({
     } = dragAreaRef.current.getBoundingClientRect();
     let nextX = (clientX - left) / bounds.width;
     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;
@@ -198,23 +150,23 @@ function FocalPointPicker({
       y: nextY
     });
   };
-  const getFinalValue = value => {
+  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;
+    const roundToTwoDecimalPlaces = (n) => Math.round(n * 100) / 100;
     return {
       x: roundToTwoDecimalPlaces(resolvedValue.x),
       y: roundToTwoDecimalPlaces(resolvedValue.y)
     };
   };
-  const arrowKeyStep = event => {
+  const arrowKeyStep = (event) => {
     const {
       code,
       shiftKey
     } = event;
-    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(code)) {
       return;
     }
     event.preventDefault();
@@ -223,36 +175,36 @@ function FocalPointPicker({
       y
     };
     const step = shiftKey ? 0.1 : 0.01;
-    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
-    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
+    const delta = code === "ArrowUp" || code === "ArrowLeft" ? -1 * step : step;
+    const axis = code === "ArrowUp" || code === "ArrowDown" ? "y" : "x";
     value[axis] = value[axis] + delta;
     onChange?.(getFinalValue(value));
   };
   const focalPointPosition = {
-    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
-    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height
+    left: x !== void 0 ? x * bounds.width : 0.5 * bounds.width,
+    top: y !== void 0 ? y * bounds.height : 0.5 * bounds.height
   };
-  const classes = (0, _clsx.default)('components-focal-point-picker-control', className);
-  const instanceId = (0, _compose.useInstanceId)(FocalPointPicker);
+  const classes = (0, import_clsx.default)("components-focal-point-picker-control", className);
+  const instanceId = (0, import_compose.useInstanceId)(FocalPointPicker);
   const id = `inspector-focal-point-picker-control-${instanceId}`;
-  (0, _hooks.useUpdateEffect)(() => {
+  (0, import_hooks.useUpdateEffect)(() => {
     setShowGridOverlay(true);
     const timeout = window.setTimeout(() => {
       setShowGridOverlay(false);
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControl.default, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_base_control.default, {
     ...restProps,
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    __nextHasNoMarginBottom,
     __associatedWPComponentName: "FocalPointPicker",
-    label: label,
-    id: id,
-    help: help,
+    label,
+    id,
+    help,
     className: classes,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointPickerStyle.MediaWrapper, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.MediaWrapper, {
       className: "components-focal-point-picker-wrapper",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_focalPointPickerStyle.MediaContainer, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_focal_point_picker_style.MediaContainer, {
         className: "components-focal-point-picker",
         onKeyDown: arrowKeyStep,
         onMouseDown: startDrag,
@@ -264,31 +216,35 @@ function FocalPointPicker({
         ref: dragAreaRef,
         role: "button",
         tabIndex: -1,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_grid.default, {
-          bounds: bounds,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid.default, {
+          bounds,
           showOverlay: showGridOverlay
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_media.default, {
-          alt: (0, _i18n.__)('Media preview'),
-          autoPlay: autoPlay,
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media.default, {
+          alt: (0, import_i18n.__)("Media preview"),
+          autoPlay,
           onLoad: refUpdateBounds.current,
           src: url
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPoint.default, {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point.default, {
           ...focalPointPosition,
-          isDragging: isDragging
+          isDragging
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_controls.default, {
-      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.default, {
+      __nextHasNoMarginBottom,
       hasHelpText: !!help,
       point: {
         x,
         y
       },
-      onChange: value => {
+      onChange: (value) => {
         onChange?.(getFinalValue(value));
       }
     })]
   });
 }
-var _default = exports.default = FocalPointPicker;
-//# sourceMappingURL=index.js.map
+var focal_point_picker_default = FocalPointPicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FocalPointPicker
+});
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","_jsxRuntime","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","undefined","classes","clsx","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","jsxs","default","__associatedWPComponentName","children","jsx","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 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 *        __nextHasNoMarginBottom\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 ) {\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\t__associatedWPComponentName=\"FocalPointPicker\"\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\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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AASA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,SAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,WAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,KAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,sBAAA,GAAAT,OAAA;AAIA,IAAAU,MAAA,GAAAV,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AAAiD,IAAAY,WAAA,GAAAZ,OAAA;AA7BjD;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;;AAmBA,MAAMa,oBAAoB,GAAG,GAAG;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAAE;EACjCC,uBAAuB;EACvBC,QAAQ,GAAG,IAAI;EACfC,SAAS;EACTC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,WAAW;EACXC,YAAY;EACZC,GAAG;EACHC,KAAK,EAAEC,SAAS,GAAG;IAClBC,CAAC,EAAE,GAAG;IACNC,CAAC,EAAE;EACJ,CAAC;EACD,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEN,SAAU,CAAC;EACjD,MAAM,CAAEO,eAAe,EAAEC,kBAAkB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;EAEjE,MAAM;IAAEG,SAAS;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAG,IAAAC,kCAAW,EAAE;IACvDhB,WAAW,EAAIiB,KAAK,IAAM;MACzBC,WAAW,CAACC,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC5B,MAAMjB,KAAK,GAAGkB,sBAAsB,CAAEJ,KAAM,CAAC;;MAE7C;MACA;MACA,IAAK,CAAEd,KAAK,EAAG;QACd;MACD;MAEAH,WAAW,GAAIG,KAAK,EAAEc,KAAM,CAAC;MAC7BR,QAAQ,CAAEN,KAAM,CAAC;IAClB,CAAC;IACDmB,UAAU,EAAIL,KAAK,IAAM;MACxB;MACAA,KAAK,CAACM,cAAc,CAAC,CAAC;MACtB,MAAMpB,KAAK,GAAGkB,sBAAsB,CAAEJ,KAAM,CAAC;MAC7C,IAAK,CAAEd,KAAK,EAAG;QACd;MACD;MACAL,MAAM,GAAIK,KAAK,EAAEc,KAAM,CAAC;MACxBR,QAAQ,CAAEN,KAAM,CAAC;IAClB,CAAC;IACDJ,SAAS,EAAEA,CAAA,KAAM;MAChBA,SAAS,GAAG,CAAC;MACbF,QAAQ,GAAIW,KAAM,CAAC;IACpB;EACD,CAAE,CAAC;;EAEH;EACA,MAAM;IAAEH,CAAC;IAAEC;EAAE,CAAC,GAAGS,UAAU,GAAGP,KAAK,GAAGJ,SAAS;EAE/C,MAAMc,WAAW,GAAG,IAAAM,eAAM,EAAoB,IAAK,CAAC;EACpD,MAAM,CAAEC,MAAM,EAAEC,SAAS,CAAE,GAAG,IAAAhB,iBAAQ,EAAEiB,qBAAe,CAAC;EACxD,MAAMC,eAAe,GAAG,IAAAJ,eAAM,EAAE,MAAM;IACrC,IAAK,CAAEN,WAAW,CAACC,OAAO,EAAG;MAC5B;IACD;IAEA,MAAM;MAAEU,WAAW,EAAEC,KAAK;MAAEC,YAAY,EAAEC;IAAO,CAAC,GACjDd,WAAW,CAACC,OAAO;IACpB;IACA;IACA;IACAO,SAAS,CACRI,KAAK,GAAG,CAAC,IAAIE,MAAM,GAAG,CAAC,GAAG;MAAEF,KAAK;MAAEE;IAAO,CAAC,GAAG;MAAE,GAAGL;IAAe,CACnE,CAAC;EACF,CAAE,CAAC;EAEH,IAAAM,kBAAS,EAAE,MAAM;IAChB,MAAMC,YAAY,GAAGN,eAAe,CAACT,OAAO;IAC5C,IAAK,CAAED,WAAW,CAACC,OAAO,EAAG;MAC5B;IACD;IAEA,MAAM;MAAEgB;IAAY,CAAC,GAAGjB,WAAW,CAACC,OAAO,CAACiB,aAAa;IACzDD,WAAW,EAAEE,gBAAgB,CAAE,QAAQ,EAAEH,YAAa,CAAC;IACvD,OAAO,MAAMC,WAAW,EAAEG,mBAAmB,CAAE,QAAQ,EAAEJ,YAAa,CAAC;EACxE,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,IAAAK,kCAAyB,EAAE,MAAM,KAAKX,eAAe,CAACT,OAAO,CAAC,CAAC,EAAE,EAAG,CAAC;;EAErE;EACA;EACA,MAAME,sBAAsB,GAAGA,CAAE;IAChCmB,OAAO;IACPC,OAAO;IACPC;EAKD,CAAC,KAAM;IACN,IAAK,CAAExB,WAAW,CAACC,OAAO,EAAG;MAC5B;IACD;IAEA,MAAM;MAAEwB,GAAG;MAAEC;IAAK,CAAC,GAAG1B,WAAW,CAACC,OAAO,CAAC0B,qBAAqB,CAAC,CAAC;IACjE,IAAIC,KAAK,GAAG,CAAEN,OAAO,GAAGI,IAAI,IAAKnB,MAAM,CAACK,KAAK;IAC7C,IAAIiB,KAAK,GAAG,CAAEN,OAAO,GAAGE,GAAG,IAAKlB,MAAM,CAACO,MAAM;IAC7C;IACA,IAAKU,QAAQ,EAAG;MACfI,KAAK,GAAGE,IAAI,CAACC,KAAK,CAAEH,KAAK,GAAG,GAAI,CAAC,GAAG,GAAG;MACvCC,KAAK,GAAGC,IAAI,CAACC,KAAK,CAAEF,KAAK,GAAG,GAAI,CAAC,GAAG,GAAG;IACxC;IACA,OAAOG,aAAa,CAAE;MAAE7C,CAAC,EAAEyC,KAAK;MAAExC,CAAC,EAAEyC;IAAM,CAAE,CAAC;EAC/C,CAAC;EAED,MAAMG,aAAa,GAAK/C,KAAqB,IAAsB;IAAA,IAAAgD,aAAA;IAClE,MAAMC,aAAa,IAAAD,aAAA,GAAGlD,YAAY,GAAIE,KAAM,CAAC,cAAAgD,aAAA,cAAAA,aAAA,GAAIhD,KAAK;IACtDiD,aAAa,CAAC/C,CAAC,GAAG2C,IAAI,CAACK,GAAG,CAAE,CAAC,EAAEL,IAAI,CAACM,GAAG,CAAEF,aAAa,CAAC/C,CAAC,EAAE,CAAE,CAAE,CAAC;IAC/D+C,aAAa,CAAC9C,CAAC,GAAG0C,IAAI,CAACK,GAAG,CAAE,CAAC,EAAEL,IAAI,CAACM,GAAG,CAAEF,aAAa,CAAC9C,CAAC,EAAE,CAAE,CAAE,CAAC;IAC/D,MAAMiD,uBAAuB,GAAKC,CAAS,IAC1CR,IAAI,CAACC,KAAK,CAAEO,CAAC,GAAG,GAAI,CAAC,GAAG,GAAG;IAE5B,OAAO;MACNnD,CAAC,EAAEkD,uBAAuB,CAAEH,aAAa,CAAC/C,CAAE,CAAC;MAC7CC,CAAC,EAAEiD,uBAAuB,CAAEH,aAAa,CAAC9C,CAAE;IAC7C,CAAC;EACF,CAAC;EAED,MAAMmD,YAAoD,GAAKxC,KAAK,IAAM;IACzE,MAAM;MAAEyC,IAAI;MAAEhB;IAAS,CAAC,GAAGzB,KAAK;IAChC,IACC,CAAE,CAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAE,CAAC0C,QAAQ,CAC/DD,IACD,CAAC,EACA;MACD;IACD;IAEAzC,KAAK,CAACM,cAAc,CAAC,CAAC;IACtB,MAAMpB,KAAK,GAAG;MAAEE,CAAC;MAAEC;IAAE,CAAC;IACtB,MAAMsD,IAAI,GAAGlB,QAAQ,GAAG,GAAG,GAAG,IAAI;IAClC,MAAMmB,KAAK,GACVH,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,WAAW,GAAG,CAAC,CAAC,GAAGE,IAAI,GAAGA,IAAI;IAC9D,MAAME,IAAI,GAAGJ,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG;IACnEvD,KAAK,CAAE2D,IAAI,CAAE,GAAG3D,KAAK,CAAE2D,IAAI,CAAE,GAAGD,KAAK;IACrChE,QAAQ,GAAIqD,aAAa,CAAE/C,KAAM,CAAE,CAAC;EACrC,CAAC;EAED,MAAM4D,kBAAkB,GAAG;IAC1BnB,IAAI,EAAEvC,CAAC,KAAK2D,SAAS,GAAG3D,CAAC,GAAGoB,MAAM,CAACK,KAAK,GAAG,GAAG,GAAGL,MAAM,CAACK,KAAK;IAC7Da,GAAG,EAAErC,CAAC,KAAK0D,SAAS,GAAG1D,CAAC,GAAGmB,MAAM,CAACO,MAAM,GAAG,GAAG,GAAGP,MAAM,CAACO;EACzD,CAAC;EAED,MAAMiC,OAAO,GAAG,IAAAC,aAAI,EAAE,uCAAuC,EAAExE,SAAU,CAAC;EAE1E,MAAMyE,UAAU,GAAG,IAAAC,sBAAa,EAAE7E,gBAAiB,CAAC;EACpD,MAAM8E,EAAE,GAAG,wCAAyCF,UAAU,EAAG;EAEjE,IAAAG,sBAAe,EAAE,MAAM;IACtB1D,kBAAkB,CAAE,IAAK,CAAC;IAC1B,MAAM2D,OAAO,GAAGC,MAAM,CAACC,UAAU,CAAE,MAAM;MACxC7D,kBAAkB,CAAE,KAAM,CAAC;IAC5B,CAAC,EAAEtB,oBAAqB,CAAC;IAEzB,OAAO,MAAMkF,MAAM,CAACE,YAAY,CAAEH,OAAQ,CAAC;EAC5C,CAAC,EAAE,CAAElE,CAAC,EAAEC,CAAC,CAAG,CAAC;EAEb,oBACC,IAAAjB,WAAA,CAAAsF,IAAA,EAAC9F,YAAA,CAAA+F,OAAW;IAAA,GACNrE,SAAS;IACdf,uBAAuB,EAAGA,uBAAyB;IACnDqF,2BAA2B,EAAC,kBAAkB;IAC9CjF,KAAK,EAAGA,KAAO;IACfyE,EAAE,EAAGA,EAAI;IACT1E,IAAI,EAAGA,IAAM;IACbD,SAAS,EAAGuE,OAAS;IAAAa,QAAA,gBAErB,IAAAzF,WAAA,CAAA0F,GAAA,EAAC7F,sBAAA,CAAA8F,YAAY;MAACtF,SAAS,EAAC,uCAAuC;MAAAoF,QAAA,eAC9D,IAAAzF,WAAA,CAAAsF,IAAA,EAACzF,sBAAA,CAAA+F,cAAc;QACdvF,SAAS,EAAC,+BAA+B;QACzCwF,SAAS,EAAGzB,YAAc;QAC1B0B,WAAW,EAAGtE,SAAW;QACzBuE,MAAM,EAAGA,CAAA,KAAM;UACd,IAAKrE,UAAU,EAAG;YACjBD,OAAO,CAAC,CAAC;UACV;QACD,CAAG;QACHuE,GAAG,EAAGnE,WAAa;QACnBoE,IAAI,EAAC,QAAQ;QACbC,QAAQ,EAAG,CAAC,CAAG;QAAAT,QAAA,gBAEf,IAAAzF,WAAA,CAAA0F,GAAA,EAAC/F,KAAA,CAAA4F,OAAI;UAACnD,MAAM,EAAGA,MAAQ;UAAC+D,WAAW,EAAG7E;QAAiB,CAAE,CAAC,eAC1D,IAAAtB,WAAA,CAAA0F,GAAA,EAAC9F,MAAA,CAAA2F,OAAK;UACLa,GAAG,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;UAC7BjG,QAAQ,EAAGA,QAAU;UACrBkG,MAAM,EAAG/D,eAAe,CAACT,OAAS;UAClCyE,GAAG,EAAG1F;QAAK,CACX,CAAC,eACF,IAAAb,WAAA,CAAA0F,GAAA,EAAChG,WAAA,CAAA6F,OAAU;UAAA,GACLb,kBAAkB;UACvBhD,UAAU,EAAGA;QAAY,CACzB,CAAC;MAAA,CACa;IAAC,CACJ,CAAC,eACf,IAAA1B,WAAA,CAAA0F,GAAA,EAACjG,SAAA,CAAA8F,OAAQ;MACRpF,uBAAuB,EAAGA,uBAAyB;MACnDqG,WAAW,EAAG,CAAC,CAAElG,IAAM;MACvBa,KAAK,EAAG;QAAEH,CAAC;QAAEC;MAAE,CAAG;MAClBT,QAAQ,EAAKM,KAAK,IAAM;QACvBN,QAAQ,GAAIqD,aAAa,CAAE/C,KAAM,CAAE,CAAC;MACrC;IAAG,CACH,CAAC;EAAA,CACU,CAAC;AAEhB;AAAC,IAAA2F,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEcrF,gBAAgB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../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 { __experimentalUseDragging as useDragging, useInstanceId, useIsomorphicLayoutEffect } 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 { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\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 *        __nextHasNoMarginBottom\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  __nextHasNoMarginBottom,\n  autoPlay = true,\n  className,\n  help,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    var _resolvePoint;\n    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const instanceId = useInstanceId(FocalPointPicker);\n  const id = `inspector-focal-point-picker-control-${instanceId}`;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(BaseControl, {\n    ...restProps,\n    __nextHasNoMarginBottom: __nextHasNoMarginBottom,\n    __associatedWPComponentName: \"FocalPointPicker\",\n    label: label,\n    id: id,\n    help: help,\n    className: classes,\n    children: [/*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      __nextHasNoMarginBottom: __nextHasNoMarginBottom,\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    })]\n  });\n}\nexport default FocalPointPicker;"],
+  "mappings": "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",
+  "names": ["useDragging", "clsx", "_jsxs", "BaseControl", "_jsx", "Grid", "Media", "FocalPoint", "Controls"]
+}

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

@@ -1,20 +1,29 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var media_exports = {};
+__export(media_exports, {
+  default: () => Media
 });
-exports.default = Media;
-var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(media_exports);
+var import_focal_point_picker_style = require("./styles/focal-point-picker-style");
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Media({
   alt,
   autoPlay,
@@ -27,29 +36,29 @@ function Media({
   ...props
 }) {
   if (!src) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointPickerStyle.MediaPlaceholder, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focal_point_picker_style.MediaPlaceholder, {
       className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
       ref: mediaRef,
       ...props
     });
   }
-  const isVideo = (0, _utils.isVideoType)(src);
-  return isVideo ? /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+  const isVideo = (0, import_utils.isVideoType)(src);
+  return isVideo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", {
     ...props,
-    autoPlay: autoPlay,
+    autoPlay,
     className: "components-focal-point-picker__media components-focal-point-picker__media--video",
     loop: true,
-    muted: muted,
+    muted,
     onLoadedData: onLoad,
     ref: mediaRef,
-    src: src
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    src
+  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     ...props,
-    alt: alt,
+    alt,
     className: "components-focal-point-picker__media components-focal-point-picker__media--image",
-    onLoad: onLoad,
+    onLoad,
     ref: mediaRef,
-    src: src
+    src
   });
 }
-//# sourceMappingURL=media.js.map
+//# sourceMappingURL=media.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_focalPointPickerStyle","require","_utils","_jsxRuntime","Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","jsx","MediaPlaceholder","className","ref","isVideo","isVideoType","loop","onLoadedData"],"sources":["@wordpress/components/src/focal-point-picker/media.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\nimport type { FocalPointPickerMediaProps } from './types';\n\nexport default function Media( {\n\talt,\n\tautoPlay,\n\tsrc,\n\tonLoad,\n\tmediaRef,\n\t// Exposing muted prop for test rendering purposes\n\t// https://github.com/testing-library/react-testing-library/issues/470\n\tmuted = true,\n\t...props\n}: FocalPointPickerMediaProps ) {\n\tif ( ! src ) {\n\t\treturn (\n\t\t\t<MediaPlaceholder\n\t\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--placeholder\"\n\t\t\t\tref={ mediaRef as Ref< HTMLDivElement > }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst isVideo = isVideoType( src );\n\n\treturn isVideo ? (\n\t\t<video\n\t\t\t{ ...props }\n\t\t\tautoPlay={ autoPlay }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--video\"\n\t\t\tloop\n\t\t\tmuted={ muted }\n\t\t\tonLoadedData={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLVideoElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t) : (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\talt={ alt }\n\t\t\tclassName=\"components-focal-point-picker__media components-focal-point-picker__media--image\"\n\t\t\tonLoad={ onLoad }\n\t\t\tref={ mediaRef as Ref< HTMLImageElement > }\n\t\t\tsrc={ src }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAQA,IAAAA,sBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,IAAAE,WAAA,GAAAF,OAAA;AATtC;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASG,KAAKA,CAAE;EAC9BC,GAAG;EACHC,QAAQ;EACRC,GAAG;EACHC,MAAM;EACNC,QAAQ;EACR;EACA;EACAC,KAAK,GAAG,IAAI;EACZ,GAAGC;AACwB,CAAC,EAAG;EAC/B,IAAK,CAAEJ,GAAG,EAAG;IACZ,oBACC,IAAAJ,WAAA,CAAAS,GAAA,EAACZ,sBAAA,CAAAa,gBAAgB;MAChBC,SAAS,EAAC,wFAAwF;MAClGC,GAAG,EAAGN,QAAmC;MAAA,GACpCE;IAAK,CACV,CAAC;EAEJ;EAEA,MAAMK,OAAO,GAAG,IAAAC,kBAAW,EAAEV,GAAI,CAAC;EAElC,OAAOS,OAAO,gBACb,IAAAb,WAAA,CAAAS,GAAA;IAAA,GACMD,KAAK;IACVL,QAAQ,EAAGA,QAAU;IACrBQ,SAAS,EAAC,kFAAkF;IAC5FI,IAAI;IACJR,KAAK,EAAGA,KAAO;IACfS,YAAY,EAAGX,MAAQ;IACvBO,GAAG,EAAGN,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CAAC,gBAEF,IAAAJ,WAAA,CAAAS,GAAA;IAAA,GACMD,KAAK;IACVN,GAAG,EAAGA,GAAK;IACXS,SAAS,EAAC,kFAAkF;IAC5FN,MAAM,EAAGA,MAAQ;IACjBO,GAAG,EAAGN,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CACD;AACF","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/focal-point-picker/media.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { MediaPlaceholder } from './styles/focal-point-picker-style';\nimport { isVideoType } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function Media({\n  alt,\n  autoPlay,\n  src,\n  onLoad,\n  mediaRef,\n  // Exposing muted prop for test rendering purposes\n  // https://github.com/testing-library/react-testing-library/issues/470\n  muted = true,\n  ...props\n}) {\n  if (!src) {\n    return /*#__PURE__*/_jsx(MediaPlaceholder, {\n      className: \"components-focal-point-picker__media components-focal-point-picker__media--placeholder\",\n      ref: mediaRef,\n      ...props\n    });\n  }\n  const isVideo = isVideoType(src);\n  return isVideo ? /*#__PURE__*/_jsx(\"video\", {\n    ...props,\n    autoPlay: autoPlay,\n    className: \"components-focal-point-picker__media components-focal-point-picker__media--video\",\n    loop: true,\n    muted: muted,\n    onLoadedData: onLoad,\n    ref: mediaRef,\n    src: src\n  }) : /*#__PURE__*/_jsx(\"img\", {\n    ...props,\n    alt: alt,\n    className: \"components-focal-point-picker__media components-focal-point-picker__media--image\",\n    onLoad: onLoad,\n    ref: mediaRef,\n    src: src\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,sCAAiC;AACjC,mBAA4B;AAC5B,yBAA4B;AACb,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,MAAI,CAAC,KAAK;AACR,WAAoB,uCAAAA,KAAK,kDAAkB;AAAA,MACzC,WAAW;AAAA,MACX,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,QAAM,cAAU,0BAAY,GAAG;AAC/B,SAAO,UAAuB,uCAAAA,KAAK,SAAS;AAAA,IAC1C,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,MAAM;AAAA,IACN;AAAA,IACA,cAAc;AAAA,IACd,KAAK;AAAA,IACL;AAAA,EACF,CAAC,IAAiB,uCAAAA,KAAK,OAAO;AAAA,IAC5B,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;",
+  "names": ["_jsx"]
+}