@wordpress/components 24.0.0 → 25.1.0

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

@@ -92,25 +92,24 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * ```
  */
 
-function FocalPointPicker(_ref) {
-  let {
-    __nextHasNoMarginBottom,
-    autoPlay = true,
-    className,
-    help,
-    label,
-    onChange,
-    onDrag,
-    onDragEnd,
-    onDragStart,
-    resolvePoint,
-    url,
-    value: valueProp = {
-      x: 0.5,
-      y: 0.5
-    },
-    ...restProps
-  } = _ref;
+function FocalPointPicker({
+  __nextHasNoMarginBottom,
+  autoPlay = true,
+  className,
+  help,
+  label,
+  onChange,
+  onDrag,
+  onDragEnd,
+  onDragStart,
+  resolvePoint,
+  url,
+  value: valueProp = {
+    x: 0.5,
+    y: 0.5
+  },
+  ...restProps
+}) {
   const [point, setPoint] = (0, _element.useState)(valueProp);
   const [showGridOverlay, setShowGridOverlay] = (0, _element.useState)(false);
   const {
@@ -119,14 +118,12 @@ function FocalPointPicker(_ref) {
     isDragging
   } = (0, _compose.__experimentalUseDragging)({
     onDragStart: event => {
-      var _dragAreaRef$current;
-
-      (_dragAreaRef$current = dragAreaRef.current) === null || _dragAreaRef$current === void 0 ? void 0 : _dragAreaRef$current.focus();
+      dragAreaRef.current?.focus();
       const value = getValueWithinDragArea(event); // `value` can technically be undefined if getValueWithinDragArea() is
       // called before dragAreaRef is set, but this shouldn't happen in reality.
 
       if (!value) return;
-      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(value, event);
+      onDragStart?.(value, event);
       setPoint(value);
     },
     onDragMove: event => {
@@ -134,12 +131,12 @@ function FocalPointPicker(_ref) {
       event.preventDefault();
       const value = getValueWithinDragArea(event);
       if (!value) return;
-      onDrag === null || onDrag === void 0 ? void 0 : onDrag(value, event);
+      onDrag?.(value, event);
       setPoint(value);
     },
     onDragEnd: () => {
-      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
-      onChange === null || onChange === void 0 ? void 0 : onChange(point);
+      onDragEnd?.();
+      onChange?.(point);
     }
   }); // Uses the internal point while dragging or else the value from props.
 
@@ -170,19 +167,18 @@ function FocalPointPicker(_ref) {
     const {
       defaultView
     } = dragAreaRef.current.ownerDocument;
-    defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('resize', updateBounds);
-    return () => defaultView === null || defaultView === void 0 ? void 0 : defaultView.removeEventListener('resize', updateBounds);
+    defaultView?.addEventListener('resize', updateBounds);
+    return () => defaultView?.removeEventListener('resize', updateBounds);
   }, []); // Updates the bounds to cover cases of unspecified media or load failures.
 
   (0, _compose.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []); // TODO: Consider refactoring getValueWithinDragArea() into a pure function.
   // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173
 
-  const getValueWithinDragArea = _ref2 => {
-    let {
-      clientX,
-      clientY,
-      shiftKey
-    } = _ref2;
+  const getValueWithinDragArea = ({
+    clientX,
+    clientY,
+    shiftKey
+  }) => {
     if (!dragAreaRef.current) return;
     const {
       top,
@@ -205,7 +201,7 @@ function FocalPointPicker(_ref) {
   const getFinalValue = value => {
     var _resolvePoint;
 
-    const resolvedValue = (_resolvePoint = resolvePoint === null || resolvePoint === void 0 ? void 0 : resolvePoint(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
     resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
     resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
 
@@ -232,7 +228,7 @@ function FocalPointPicker(_ref) {
     const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
     const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
     value[axis] = value[axis] + delta;
-    onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+    onChange?.(getFinalValue(value));
   };
 
   const focalPointPosition = {
@@ -285,7 +281,7 @@ function FocalPointPicker(_ref) {
       y
     },
     onChange: value => {
-      onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+      onChange?.(getFinalValue(value));
     }
   }));
 }

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

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

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

@@ -53,8 +53,6 @@ const FOCAL_POINT_UNITS = [{
 }];
 
 function FocalPointPicker(props) {
-  var _styles$focalPoint, _styles$focalPoint2;
-
   const {
     focalPoint,
     onChange,
@@ -140,8 +138,8 @@ function FocalPointPicker(props) {
       const x = pageX - locationPageOffsetX.current;
       const y = pageY - locationPageOffsetY.current;
       onChange({
-        x: (0, _math.clamp)(x / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width), 0, 1).toFixed(2),
-        y: (0, _math.clamp)(y / (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height), 0, 1).toFixed(2)
+        x: (0, _math.clamp)(x / containerSize?.width, 0, 1).toFixed(2),
+        y: (0, _math.clamp)(y / containerSize?.height, 0, 1).toFixed(2)
       }); // Slider (child of RangeCell) is uncontrolled, so we must increment a
       // key to re-mount and sync the pan gesture values to the sliders
       // https://github.com/callstack/react-native-slider/tree/v3.0.3#value
@@ -159,14 +157,14 @@ function FocalPointPicker(props) {
   const focalPointGroupStyles = [_style.default.focalPointGroup, {
     transform: [{
       translateX: pan.x.interpolate({
-        inputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0],
-        outputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0],
+        inputRange: [0, containerSize?.width || 0],
+        outputRange: [0, containerSize?.width || 0],
         extrapolate: 'clamp'
       })
     }, {
       translateY: pan.y.interpolate({
-        inputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || 0],
-        outputRange: [0, (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || 0],
+        inputRange: [0, containerSize?.height || 0],
+        outputRange: [0, containerSize?.height || 0],
         extrapolate: 'clamp'
       })
     }]
@@ -187,7 +185,7 @@ function FocalPointPicker(props) {
       width
     } = event.nativeEvent.layout;
 
-    if (width !== 0 && height !== 0 && ((containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== width || (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) !== height)) {
+    if (width !== 0 && height !== 0 && (containerSize?.width !== width || containerSize?.height !== height)) {
       setContainerSize({
         width,
         height
@@ -209,7 +207,7 @@ function FocalPointPicker(props) {
     setDisplayPlaceholder(false); // Avoid invisible, paused video on Android, presumably related to
     // https://github.com/react-native-video/react-native-video/issues/1979
 
-    videoRef === null || videoRef === void 0 ? void 0 : videoRef.current.seek(0);
+    videoRef?.current.seek(0);
   };
 
   const onXCoordinateChange = x => onChange({
@@ -256,9 +254,9 @@ function FocalPointPicker(props) {
     text: (0, _i18n.__)('Drag to adjust focal point'),
     yOffset: -(FOCAL_POINT_SIZE / 2)
   }), (0, _element.createElement)(_focalPoint.default, {
-    height: (_styles$focalPoint = _style.default.focalPoint) === null || _styles$focalPoint === void 0 ? void 0 : _styles$focalPoint.height,
+    height: _style.default.focalPoint?.height,
     style: focalPointStyles,
-    width: (_styles$focalPoint2 = _style.default.focalPoint) === null || _styles$focalPoint2 === void 0 ? void 0 : _styles$focalPoint2.width
+    width: _style.default.focalPoint?.width
   })))), (0, _element.createElement)(_components.UnitControl, {
     key: `xAxis-${sliderKey}`,
     label: (0, _i18n.__)('X-Axis Position'),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["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","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, 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 = [\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={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["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","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, 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 = [\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={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.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"]}

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

@@ -22,19 +22,17 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function Media(_ref) {
-  let {
-    alt,
-    autoPlay,
-    src,
-    onLoad,
-    mediaRef,
-    // Exposing muted prop for test rendering purposes
-    // https://github.com/testing-library/react-testing-library/issues/470
-    muted = true,
-    ...props
-  } = _ref;
-
+function Media({
+  alt,
+  autoPlay,
+  src,
+  onLoad,
+  mediaRef,
+  // Exposing muted prop for test rendering purposes
+  // https://github.com/testing-library/react-testing-library/issues/470
+  muted = true,
+  ...props
+}) {
   if (!src) {
     return (0, _element.createElement)(_focalPointPickerStyle.MediaPlaceholder, (0, _extends2.default)({
       className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/media.tsx"],"names":["Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","isVideo"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,KAAT,OAUiB;AAAA,MAVD;AAC9BC,IAAAA,GAD8B;AAE9BC,IAAAA,QAF8B;AAG9BC,IAAAA,GAH8B;AAI9BC,IAAAA,MAJ8B;AAK9BC,IAAAA,QAL8B;AAM9B;AACA;AACAC,IAAAA,KAAK,GAAG,IARsB;AAS9B,OAAGC;AAT2B,GAUC;;AAC/B,MAAK,CAAEJ,GAAP,EAAa;AACZ,WACC,4BAAC,uCAAD;AACC,MAAA,SAAS,EAAC,wFADX;AAEC,MAAA,GAAG,EAAGE;AAFP,OAGME,KAHN,EADD;AAOA;;AAED,QAAMC,OAAO,GAAG,wBAAaL,GAAb,CAAhB;AAEA,SAAOK,OAAO,GACb,gEACMD,KADN;AAEC,IAAA,QAAQ,EAAGL,QAFZ;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,IAAI,MAJL;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,YAAY,EAAGF,MANhB;AAOC,IAAA,GAAG,EAAGC,QAPP;AAQC,IAAA,GAAG,EAAGF;AARP,KADa,GAYb,8DACMI,KADN;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,MAAM,EAAGG,MAJV;AAKC,IAAA,GAAG,EAAGC,QALP;AAMC,IAAA,GAAG,EAAGF;AANP,KAZD;AAqBA","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"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/media.tsx"],"names":["Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","isVideo"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,KAAT,CAAgB;AAC9BC,EAAAA,GAD8B;AAE9BC,EAAAA,QAF8B;AAG9BC,EAAAA,GAH8B;AAI9BC,EAAAA,MAJ8B;AAK9BC,EAAAA,QAL8B;AAM9B;AACA;AACAC,EAAAA,KAAK,GAAG,IARsB;AAS9B,KAAGC;AAT2B,CAAhB,EAUiB;AAC/B,MAAK,CAAEJ,GAAP,EAAa;AACZ,WACC,4BAAC,uCAAD;AACC,MAAA,SAAS,EAAC,wFADX;AAEC,MAAA,GAAG,EAAGE;AAFP,OAGME,KAHN,EADD;AAOA;;AAED,QAAMC,OAAO,GAAG,wBAAaL,GAAb,CAAhB;AAEA,SAAOK,OAAO,GACb,gEACMD,KADN;AAEC,IAAA,QAAQ,EAAGL,QAFZ;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,IAAI,MAJL;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,YAAY,EAAGF,MANhB;AAOC,IAAA,GAAG,EAAGC,QAPP;AAQC,IAAA,GAAG,EAAGF;AARP,KADa,GAYb,8DACMI,KADN;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,SAAS,EAAC,kFAHX;AAIC,IAAA,MAAM,EAAGG,MAJV;AAKC,IAAA,GAAG,EAAGC,QALP;AAMC,IAAA,GAAG,EAAGF;AANP,KAZD;AAqBA","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"]}

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

@@ -84,10 +84,9 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const deprecatedBottomMargin = _ref3 => {
-  let {
-    __nextHasNoMarginBottom
-  } = _ref3;
+const deprecatedBottomMargin = ({
+  __nextHasNoMarginBottom
+}) => {
   return !__nextHasNoMarginBottom ? _ref2 : undefined;
 };
 
@@ -101,10 +100,9 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const extraHelpTextMargin = _ref4 => {
-  let {
-    hasHelpText = false
-  } = _ref4;
+const extraHelpTextMargin = ({
+  hasHelpText = false
+}) => {
   return hasHelpText ? _ref : undefined;
 };
 
@@ -120,12 +118,9 @@ const GridView = (0, _base.default)("div", process.env.NODE_ENV === "production"
 } : {
   target: "eeew7dm3",
   label: "GridView"
-})("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;opacity:", _ref5 => {
-  let {
-    showOverlay
-  } = _ref5;
-  return showOverlay ? 1 : 0;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1waWNrZXItc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0ZrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvY2FsLXBvaW50LXBpY2tlci9zdHlsZXMvZm9jYWwtcG9pbnQtcGlja2VyLXN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRm9jYWxQb2ludFBpY2tlckNvbnRyb2xzUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJTklUSUFMX0JPVU5EUyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IE1lZGlhV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1lZGlhQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHJnYmEoIDAsIDAsIDAsIDAuMiApO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblxuXHRpbWcsXG5cdHZpZGVvIHtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGhlaWdodDogYXV0bztcblx0XHRtYXJnaW46IDA7XG5cdFx0bWF4LWhlaWdodDogMTAwJTtcblx0XHRtYXgtd2lkdGg6IDEwMCU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdFx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdFx0d2lkdGg6IGF1dG87XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBNZWRpYVBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDEwMCBdIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGhlaWdodDogJHsgSU5JVElBTF9CT1VORFMuaGVpZ2h0IH1weDtcblx0bWF4LXdpZHRoOiAyODBweDtcblx0bWluLXdpZHRoOiAkeyBJTklUSUFMX0JPVU5EUy53aWR0aCB9cHg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFVuaXRDb250cm9sID0gc3R5bGVkKCBVbml0Q29udHJvbCApYFxuXHR3aWR0aDogMTAwcHg7XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxufTogRm9jYWxQb2ludFBpY2tlckNvbnRyb2xzUHJvcHMgKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdHBhZGRpbmctYm90dG9tOiAxZW07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCBleHRyYUhlbHBUZXh0TWFyZ2luID0gKCB7XG5cdGhhc0hlbHBUZXh0ID0gZmFsc2UsXG59OiBGb2NhbFBvaW50UGlja2VyQ29udHJvbHNQcm9wcyApID0+IHtcblx0cmV0dXJuIGhhc0hlbHBUZXh0XG5cdFx0PyBjc3NgXG5cdFx0XHRcdHBhZGRpbmctYm90dG9tOiAxZW07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udHJvbFdyYXBwZXIgPSBzdHlsZWQoIEZsZXggKWBcblx0bWF4LXdpZHRoOiAzMjBweDtcblx0cGFkZGluZy10b3A6IDFlbTtcblxuXHQkeyBleHRyYUhlbHBUZXh0TWFyZ2luIH1cblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRsZWZ0OiA1MCU7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogNTAlO1xuXHR0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKCAtNTAlLCAtNTAlLCAwICk7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuXHR6LWluZGV4OiAxO1xuXG5cdG9wYWNpdHk6ICR7ICggeyBzaG93T3ZlcmxheSB9OiB7IHNob3dPdmVybGF5PzogYm9vbGVhbiB9ICkgPT5cblx0XHRzaG93T3ZlcmxheSA/IDEgOiAwIH07XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmUgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiB3aGl0ZTtcblx0Ym94LXNoYWRvdzogMCAwIDJweCByZ2JhKCAwLCAwLCAwLCAwLjYgKTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRvcGFjaXR5OiAwLjQ7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWiggMCApO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWCA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0aGVpZ2h0OiAxcHg7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWSA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0d2lkdGg6IDFweDtcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5gO1xuIl19 */"));
+})("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;opacity:", ({
+  showOverlay
+}) => showOverlay ? 1 : 0, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1waWNrZXItc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0ZrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2ZvY2FsLXBvaW50LXBpY2tlci9zdHlsZXMvZm9jYWwtcG9pbnQtcGlja2VyLXN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRm9jYWxQb2ludFBpY2tlckNvbnRyb2xzUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJTklUSUFMX0JPVU5EUyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IE1lZGlhV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IE1lZGlhQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym94LXNoYWRvdzogMCAwIDAgMXB4IHJnYmEoIDAsIDAsIDAsIDAuMiApO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblxuXHRpbWcsXG5cdHZpZGVvIHtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGhlaWdodDogYXV0bztcblx0XHRtYXJnaW46IDA7XG5cdFx0bWF4LWhlaWdodDogMTAwJTtcblx0XHRtYXgtd2lkdGg6IDEwMCU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdFx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdFx0d2lkdGg6IGF1dG87XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBNZWRpYVBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDEwMCBdIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGhlaWdodDogJHsgSU5JVElBTF9CT1VORFMuaGVpZ2h0IH1weDtcblx0bWF4LXdpZHRoOiAyODBweDtcblx0bWluLXdpZHRoOiAkeyBJTklUSUFMX0JPVU5EUy53aWR0aCB9cHg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFVuaXRDb250cm9sID0gc3R5bGVkKCBVbml0Q29udHJvbCApYFxuXHR3aWR0aDogMTAwcHg7XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxufTogRm9jYWxQb2ludFBpY2tlckNvbnRyb2xzUHJvcHMgKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdHBhZGRpbmctYm90dG9tOiAxZW07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCBleHRyYUhlbHBUZXh0TWFyZ2luID0gKCB7XG5cdGhhc0hlbHBUZXh0ID0gZmFsc2UsXG59OiBGb2NhbFBvaW50UGlja2VyQ29udHJvbHNQcm9wcyApID0+IHtcblx0cmV0dXJuIGhhc0hlbHBUZXh0XG5cdFx0PyBjc3NgXG5cdFx0XHRcdHBhZGRpbmctYm90dG9tOiAxZW07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udHJvbFdyYXBwZXIgPSBzdHlsZWQoIEZsZXggKWBcblx0bWF4LXdpZHRoOiAzMjBweDtcblx0cGFkZGluZy10b3A6IDFlbTtcblxuXHQkeyBleHRyYUhlbHBUZXh0TWFyZ2luIH1cblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRsZWZ0OiA1MCU7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogNTAlO1xuXHR0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKCAtNTAlLCAtNTAlLCAwICk7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuXHR6LWluZGV4OiAxO1xuXG5cdG9wYWNpdHk6ICR7ICggeyBzaG93T3ZlcmxheSB9OiB7IHNob3dPdmVybGF5PzogYm9vbGVhbiB9ICkgPT5cblx0XHRzaG93T3ZlcmxheSA/IDEgOiAwIH07XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZExpbmUgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiB3aGl0ZTtcblx0Ym94LXNoYWRvdzogMCAwIDJweCByZ2JhKCAwLCAwLCAwLCAwLjYgKTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRvcGFjaXR5OiAwLjQ7XG5cdHRyYW5zZm9ybTogdHJhbnNsYXRlWiggMCApO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWCA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0aGVpZ2h0OiAxcHg7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEdyaWRMaW5lWSA9IHN0eWxlZCggR3JpZExpbmUgKWBcblx0d2lkdGg6IDFweDtcblx0dG9wOiAwO1xuXHRib3R0b206IDA7XG5gO1xuIl19 */"));
 exports.GridView = GridView;
 const GridLine = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "eeew7dm2"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","gray","INITIAL_BOUNDS","height","width","StyledUnitControl","UnitControl","deprecatedBottomMargin","__nextHasNoMarginBottom","undefined","extraHelpTextMargin","hasHelpText","ControlWrapper","Flex","GridView","showOverlay","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AAEA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAMA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAwBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,IAAP,CAAa,GAAb,CADa,oCAGjBC,uBAAeC,MAHE,mCAKdD,uBAAeE,KALD,0yHAAtB;;AASA,MAAMC,iBAAiB,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;;;;;;;;;;;;AAIP,MAAMC,sBAAsB,GAAG,SAEO;AAAA,MAFL;AAChCC,IAAAA;AADgC,GAEK;AACrC,SAAO,CAAEA,uBAAF,WAIJC,SAJH;AAKA,CARD;;;;;;;;;;;;AAUA,MAAMC,mBAAmB,GAAG,SAEU;AAAA,MAFR;AAC7BC,IAAAA,WAAW,GAAG;AADe,GAEQ;AACrC,SAAOA,WAAW,UAIfF,SAJH;AAKA,CARD;;AAUO,MAAMG,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,qCAIvBH,mBAJuB,OAKvBH,sBALuB,6xHAApB;;AAQA,MAAMO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,uKAUR;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACXA,WAAW,GAAG,CAAH,GAAO,CADP;AAAA,CAVQ,6xHAAd;;AAcA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AAQA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport UnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\nimport type { FocalPointPickerControlsProps } from '../types';\nimport { INITIAL_BOUNDS } from '../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.gray[ 100 ] };\n\tbox-sizing: border-box;\n\theight: ${ INITIAL_BOUNDS.height }px;\n\tmax-width: 280px;\n\tmin-width: ${ INITIAL_BOUNDS.width }px;\n\twidth: 100%;\n`;\n\nexport const StyledUnitControl = styled( UnitControl )`\n\twidth: 100px;\n`;\n\nconst deprecatedBottomMargin = ( {\n\t__nextHasNoMarginBottom,\n}: FocalPointPickerControlsProps ) => {\n\treturn ! __nextHasNoMarginBottom\n\t\t? css`\n\t\t\t\tpadding-bottom: 1em;\n\t\t  `\n\t\t: undefined;\n};\n\nconst extraHelpTextMargin = ( {\n\thasHelpText = false,\n}: FocalPointPickerControlsProps ) => {\n\treturn hasHelpText\n\t\t? css`\n\t\t\t\tpadding-bottom: 1em;\n\t\t  `\n\t\t: undefined;\n};\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding-top: 1em;\n\n\t${ extraHelpTextMargin }\n\t${ deprecatedBottomMargin }\n`;\n\nexport const GridView = styled.div`\n\tleft: 50%;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\topacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>\n\t\tshowOverlay ? 1 : 0 };\n`;\n\nexport const GridLine = styled.div`\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":["MediaWrapper","MediaContainer","MediaPlaceholder","COLORS","gray","INITIAL_BOUNDS","height","width","StyledUnitControl","UnitControl","deprecatedBottomMargin","__nextHasNoMarginBottom","undefined","extraHelpTextMargin","hasHelpText","ControlWrapper","Flex","GridView","showOverlay","GridLine","GridLineX","GridLineY"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AAEA;;;;AAEO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAMA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAwBA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbC,cAAOC,IAAP,CAAa,GAAb,CADa,oCAGjBC,uBAAeC,MAHE,mCAKdD,uBAAeE,KALD,0yHAAtB;;AASA,MAAMC,iBAAiB,GAAG,iCAAQC,oBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;;;;;;;;;;;;AAIP,MAAMC,sBAAsB,GAAG,CAAE;AAChCC,EAAAA;AADgC,CAAF,KAEO;AACrC,SAAO,CAAEA,uBAAF,WAIJC,SAJH;AAKA,CARD;;;;;;;;;;;;AAUA,MAAMC,mBAAmB,GAAG,CAAE;AAC7BC,EAAAA,WAAW,GAAG;AADe,CAAF,KAEU;AACrC,SAAOA,WAAW,UAIfF,SAJH;AAKA,CARD;;AAUO,MAAMG,cAAc,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,qCAIvBH,mBAJuB,OAKvBH,sBALuB,6xHAApB;;AAQA,MAAMO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,uKAUR,CAAE;AAAEC,EAAAA;AAAF,CAAF,KACXA,WAAW,GAAG,CAAH,GAAO,CAXC,6xHAAd;;AAcA,MAAMC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAd;;AAQA,MAAMC,SAAS,GAAG,iCAAQD,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;;AAMA,MAAME,SAAS,GAAG,iCAAQF,QAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport UnitControl from '../../unit-control';\nimport { COLORS } from '../../utils';\nimport type { FocalPointPickerControlsProps } from '../types';\nimport { INITIAL_BOUNDS } from '../utils';\n\nexport const MediaWrapper = styled.div`\n\tbackground-color: transparent;\n\ttext-align: center;\n\twidth: 100%;\n`;\n\nexport const MediaContainer = styled.div`\n\talign-items: center;\n\tbox-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\tmargin: auto;\n\tposition: relative;\n\theight: 100%;\n\n\timg,\n\tvideo {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\twidth: auto;\n\t}\n`;\n\nexport const MediaPlaceholder = styled.div`\n\tbackground: ${ COLORS.gray[ 100 ] };\n\tbox-sizing: border-box;\n\theight: ${ INITIAL_BOUNDS.height }px;\n\tmax-width: 280px;\n\tmin-width: ${ INITIAL_BOUNDS.width }px;\n\twidth: 100%;\n`;\n\nexport const StyledUnitControl = styled( UnitControl )`\n\twidth: 100px;\n`;\n\nconst deprecatedBottomMargin = ( {\n\t__nextHasNoMarginBottom,\n}: FocalPointPickerControlsProps ) => {\n\treturn ! __nextHasNoMarginBottom\n\t\t? css`\n\t\t\t\tpadding-bottom: 1em;\n\t\t  `\n\t\t: undefined;\n};\n\nconst extraHelpTextMargin = ( {\n\thasHelpText = false,\n}: FocalPointPickerControlsProps ) => {\n\treturn hasHelpText\n\t\t? css`\n\t\t\t\tpadding-bottom: 1em;\n\t\t  `\n\t\t: undefined;\n};\n\nexport const ControlWrapper = styled( Flex )`\n\tmax-width: 320px;\n\tpadding-top: 1em;\n\n\t${ extraHelpTextMargin }\n\t${ deprecatedBottomMargin }\n`;\n\nexport const GridView = styled.div`\n\tleft: 50%;\n\toverflow: hidden;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translate3d( -50%, -50%, 0 );\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\topacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>\n\t\tshowOverlay ? 1 : 0 };\n`;\n\nexport const GridLine = styled.div`\n\tbackground: white;\n\tbox-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );\n\tposition: absolute;\n\topacity: 0.4;\n\ttransform: translateZ( 0 );\n`;\n\nexport const GridLineX = styled( GridLine )`\n\theight: 1px;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const GridLineY = styled( GridLine )`\n\twidth: 1px;\n\ttop: 0;\n\tbottom: 0;\n`;\n"]}

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

@@ -17,11 +17,8 @@ const PointerCircle = (0, _base.default)("div", process.env.NODE_ENV === "produc
 } : {
   target: "e19snlhg0",
   label: "PointerCircle"
-})("background-color:transparent;cursor:grab;height:48px;margin:-24px 0 0 -24px;position:absolute;user-select:none;width:48px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.6 );border-radius:50%;backdrop-filter:blur( 4px );box-shadow:rgb( 0 0 0 / 20% ) 0px 0px 10px;", _ref => {
-  let {
-    isDragging
-  } = _ref;
-  return isDragging && 'cursor: grabbing;';
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckNpcmNsZSA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogNDhweDtcblx0bWFyZ2luOiAtMjRweCAwIDAgLTI0cHg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiA0OHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblx0YmFja2dyb3VuZDogcmdiYSggMjU1LCAyNTUsIDI1NSwgMC42ICk7XG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0YmFja2Ryb3AtZmlsdGVyOiBibHVyKCA0cHggKTtcblx0Ym94LXNoYWRvdzogcmdiKCAwIDAgMCAvIDIwJSApIDBweCAwcHggMTBweDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9OiB7IGlzRHJhZ2dpbmc6IGJvb2xlYW4gfSApID0+XG5cdFx0aXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG4iXX0= */"));
+})("background-color:transparent;cursor:grab;height:48px;margin:-24px 0 0 -24px;position:absolute;user-select:none;width:48px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.6 );border-radius:50%;backdrop-filter:blur( 4px );box-shadow:rgb( 0 0 0 / 20% ) 0px 0px 10px;", ({
+  isDragging
+}) => isDragging && 'cursor: grabbing;', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZm9jYWwtcG9pbnQtcGlja2VyL3N0eWxlcy9mb2NhbC1wb2ludC1zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9mb2NhbC1wb2ludC1waWNrZXIvc3R5bGVzL2ZvY2FsLXBvaW50LXN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlckNpcmNsZSA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogNDhweDtcblx0bWFyZ2luOiAtMjRweCAwIDAgLTI0cHg7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdHdpZHRoOiA0OHB4O1xuXHR3aWxsLWNoYW5nZTogdHJhbnNmb3JtO1xuXHR6LWluZGV4OiAxMDAwMDtcblx0YmFja2dyb3VuZDogcmdiYSggMjU1LCAyNTUsIDI1NSwgMC42ICk7XG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0YmFja2Ryb3AtZmlsdGVyOiBibHVyKCA0cHggKTtcblx0Ym94LXNoYWRvdzogcmdiKCAwIDAgMCAvIDIwJSApIDBweCAwcHggMTBweDtcblxuXHQkeyAoIHsgaXNEcmFnZ2luZyB9OiB7IGlzRHJhZ2dpbmc6IGJvb2xlYW4gfSApID0+XG5cdFx0aXNEcmFnZ2luZyAmJiAnY3Vyc29yOiBncmFiYmluZzsnIH1cbmA7XG4iXX0= */"));
 exports.PointerCircle = PointerCircle;
 //# sourceMappingURL=focal-point-style.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.ts"],"names":["PointerCircle","isDragging"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAGO,MAAMA,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,oSAetB;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,UAAU,IAAI,mBADZ;AAAA,CAfsB,6qCAAnB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\nexport const PointerCircle = styled.div`\n\tbackground-color: transparent;\n\tcursor: grab;\n\theight: 48px;\n\tmargin: -24px 0 0 -24px;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 48px;\n\twill-change: transform;\n\tz-index: 10000;\n\tbackground: rgba( 255, 255, 255, 0.6 );\n\tborder-radius: 50%;\n\tbackdrop-filter: blur( 4px );\n\tbox-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;\n\n\t${ ( { isDragging }: { isDragging: boolean } ) =>\n\t\tisDragging && 'cursor: grabbing;' }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/styles/focal-point-style.ts"],"names":["PointerCircle","isDragging"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAGO,MAAMA,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,oSAetB,CAAE;AAAEC,EAAAA;AAAF,CAAF,KACFA,UAAU,IAAI,mBAhBU,6qCAAnB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\nexport const PointerCircle = styled.div`\n\tbackground-color: transparent;\n\tcursor: grab;\n\theight: 48px;\n\tmargin: -24px 0 0 -24px;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 48px;\n\twill-change: transform;\n\tz-index: 10000;\n\tbackground: rgba( 255, 255, 255, 0.6 );\n\tborder-radius: 50%;\n\tbackdrop-filter: blur( 4px );\n\tbox-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;\n\n\t${ ( { isDragging }: { isDragging: boolean } ) =>\n\t\tisDragging && 'cursor: grabbing;' }\n`;\n"]}

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

@@ -28,13 +28,12 @@ var _style = _interopRequireDefault(require("./style.scss"));
  */
 const TooltipContext = (0, _element.createContext)();
 
-function Tooltip(_ref) {
-  let {
-    children,
-    onPress,
-    style,
-    visible
-  } = _ref;
+function Tooltip({
+  children,
+  onPress,
+  style,
+  visible
+}) {
   const panResponder = (0, _element.useRef)(_reactNative.PanResponder.create({
     /**
      * To allow dimissing the tooltip on press while also avoiding blocking
@@ -60,15 +59,12 @@ function Tooltip(_ref) {
   }), children));
 }
 
-function Label(_ref2) {
-  var _styles$tooltipShadow;
-
-  let {
-    align,
-    text,
-    xOffset,
-    yOffset
-  } = _ref2;
+function Label({
+  align,
+  text,
+  xOffset,
+  yOffset
+}) {
   const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
   const [dimensions, setDimensions] = (0, _element.useState)(null);
   const visible = (0, _element.useContext)(TooltipContext);
@@ -102,7 +98,7 @@ function Label(_ref2) {
   }
 
   const tooltipStyles = [_style.default.tooltip, {
-    shadowColor: (_styles$tooltipShadow = _style.default.tooltipShadow) === null || _styles$tooltipShadow === void 0 ? void 0 : _styles$tooltipShadow.color,
+    shadowColor: _style.default.tooltipShadow?.color,
     shadowOffset: {
       width: 0,
       height: 2
@@ -124,10 +120,9 @@ function Label(_ref2) {
       }]
     }
   }, (0, _element.createElement)(_reactNative.View, {
-    onLayout: _ref3 => {
-      let {
-        nativeEvent
-      } = _ref3;
+    onLayout: ({
+      nativeEvent
+    }) => {
       const {
         height,
         width