@wordpress/components 25.8.2 → 25.9.0

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

@@ -1 +1 @@
-{"version":3,"names":["_focalPointPickerStyle","require","FocalPointPickerGrid","bounds","props","_element","createElement","GridView","className","style","width","height","GridLineX","top","GridLineY","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,sBAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAO,QAAQ;IAAA,GACHH,KAAK;IACVI,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEP,MAAM,CAACO,KAAK;MACnBC,MAAM,EAAER,MAAM,CAACQ;IAChB;EAAG,GAEH,IAAAN,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvC,IAAAV,QAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb"}
+{"version":3,"names":["_focalPointPickerStyle","require","FocalPointPickerGrid","bounds","props","_react","createElement","GridView","className","style","width","height","GridLineX","top","GridLineY","left"],"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,sBAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASe,SAASC,oBAAoBA,CAAE;EAC7CC,MAAM;EACN,GAAGC;AACyD,CAAC,EAAG;EAChE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAO,QAAQ;IAAA,GACHH,KAAK;IACVI,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG;MACPC,KAAK,EAAEP,MAAM,CAACO,KAAK;MACnBC,MAAM,EAAER,MAAM,CAACQ;IAChB;EAAG,GAEH,IAAAN,MAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,MAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAY,SAAS;IAACH,KAAK,EAAG;MAAEI,GAAG,EAAE;IAAM;EAAG,CAAE,CAAC,EACtC,IAAAR,MAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAAC,EACvC,IAAAV,MAAA,CAAAC,aAAA,EAACN,sBAAA,CAAAc,SAAS;IAACL,KAAK,EAAG;MAAEM,IAAI,EAAE;IAAM;EAAG,CAAE,CAC7B,CAAC;AAEb"}

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

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FocalPointPicker = FocalPointPicker;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 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"));
@@ -228,16 +229,16 @@ function FocalPointPicker({
     }, GRID_OVERLAY_TIMEOUT);
     return () => window.clearTimeout(timeout);
   }, [x, y]);
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     ...restProps,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: label,
     id: id,
     help: help,
     className: classes
-  }, (0, _element.createElement)(_focalPointPickerStyle.MediaWrapper, {
+  }, (0, _react.createElement)(_focalPointPickerStyle.MediaWrapper, {
     className: "components-focal-point-picker-wrapper"
-  }, (0, _element.createElement)(_focalPointPickerStyle.MediaContainer, {
+  }, (0, _react.createElement)(_focalPointPickerStyle.MediaContainer, {
     className: "components-focal-point-picker",
     onKeyDown: arrowKeyStep,
     onMouseDown: startDrag,
@@ -247,18 +248,18 @@ function FocalPointPicker({
     ref: dragAreaRef,
     role: "button",
     tabIndex: -1
-  }, (0, _element.createElement)(_grid.default, {
+  }, (0, _react.createElement)(_grid.default, {
     bounds: bounds,
     showOverlay: showGridOverlay
-  }), (0, _element.createElement)(_media.default, {
+  }), (0, _react.createElement)(_media.default, {
     alt: (0, _i18n.__)('Media preview'),
     autoPlay: autoPlay,
     onLoad: refUpdateBounds.current,
     src: url
-  }), (0, _element.createElement)(_focalPoint.default, {
+  }), (0, _react.createElement)(_focalPoint.default, {
     ...focalPointPosition,
     isDragging: isDragging
-  }))), (0, _element.createElement)(_controls.default, {
+  }))), (0, _react.createElement)(_controls.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     hasHelpText: !!help,
     point: {

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_i18n","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","classnames","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","createElement","default","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) return;\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) return;\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_compose","_baseControl","_controls","_focalPoint","_grid","_media","_focalPointPickerStyle","_utils","_hooks","GRID_OVERLAY_TIMEOUT","FocalPointPicker","__nextHasNoMarginBottom","autoPlay","className","help","label","onChange","onDrag","onDragEnd","onDragStart","resolvePoint","url","value","valueProp","x","y","restProps","point","setPoint","useState","showGridOverlay","setShowGridOverlay","startDrag","endDrag","isDragging","useDragging","event","dragAreaRef","current","focus","getValueWithinDragArea","onDragMove","preventDefault","useRef","bounds","setBounds","INITIAL_BOUNDS","refUpdateBounds","clientWidth","width","clientHeight","height","useEffect","updateBounds","defaultView","ownerDocument","addEventListener","removeEventListener","useIsomorphicLayoutEffect","clientX","clientY","shiftKey","top","left","getBoundingClientRect","nextX","nextY","Math","round","getFinalValue","_resolvePoint","resolvedValue","max","min","roundToTwoDecimalPlaces","n","arrowKeyStep","code","includes","step","delta","axis","focalPointPosition","classes","classnames","instanceId","useInstanceId","id","useUpdateEffect","timeout","window","setTimeout","clearTimeout","_react","createElement","default","MediaWrapper","MediaContainer","onKeyDown","onMouseDown","onBlur","ref","role","tabIndex","showOverlay","alt","__","onLoad","src","hasHelpText","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\t__experimentalUseDragging as useDragging,\n\tuseInstanceId,\n\tuseIsomorphicLayoutEffect,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport {\n\tMediaWrapper,\n\tMediaContainer,\n} from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type {\n\tFocalPoint as FocalPointType,\n\tFocalPointPickerProps,\n} from './types';\nimport type { KeyboardEventHandler } from 'react';\n\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker( {\n\t__nextHasNoMarginBottom,\n\tautoPlay = true,\n\tclassName,\n\thelp,\n\tlabel,\n\tonChange,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tresolvePoint,\n\turl,\n\tvalue: valueProp = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\t...restProps\n}: WordPressComponentProps< FocalPointPickerProps, 'div', false > ) {\n\tconst [ point, setPoint ] = useState( valueProp );\n\tconst [ showGridOverlay, setShowGridOverlay ] = useState( false );\n\n\tconst { startDrag, endDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tdragAreaRef.current?.focus();\n\t\t\tconst value = getValueWithinDragArea( event );\n\n\t\t\t// `value` can technically be undefined if getValueWithinDragArea() is\n\t\t\t// called before dragAreaRef is set, but this shouldn't happen in reality.\n\t\t\tif ( ! value ) return;\n\n\t\t\tonDragStart?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragMove: ( event ) => {\n\t\t\t// Prevents text-selection when dragging.\n\t\t\tevent.preventDefault();\n\t\t\tconst value = getValueWithinDragArea( event );\n\t\t\tif ( ! value ) return;\n\t\t\tonDrag?.( value, event );\n\t\t\tsetPoint( value );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tonDragEnd?.();\n\t\t\tonChange?.( point );\n\t\t},\n\t} );\n\n\t// Uses the internal point while dragging or else the value from props.\n\tconst { x, y } = isDragging ? point : valueProp;\n\n\tconst dragAreaRef = useRef< HTMLDivElement >( null );\n\tconst [ bounds, setBounds ] = useState( INITIAL_BOUNDS );\n\tconst refUpdateBounds = useRef( () => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { clientWidth: width, clientHeight: height } =\n\t\t\tdragAreaRef.current;\n\t\t// Falls back to initial bounds if the ref has no size. Since styles\n\t\t// give the drag area dimensions even when the media has not loaded\n\t\t// this should only happen in unit tests (jsdom).\n\t\tsetBounds(\n\t\t\twidth > 0 && height > 0 ? { width, height } : { ...INITIAL_BOUNDS }\n\t\t);\n\t} );\n\n\tuseEffect( () => {\n\t\tconst updateBounds = refUpdateBounds.current;\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { defaultView } = dragAreaRef.current.ownerDocument;\n\t\tdefaultView?.addEventListener( 'resize', updateBounds );\n\t\treturn () => defaultView?.removeEventListener( 'resize', updateBounds );\n\t}, [] );\n\n\t// Updates the bounds to cover cases of unspecified media or load failures.\n\tuseIsomorphicLayoutEffect( () => void refUpdateBounds.current(), [] );\n\n\t// TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n\t// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n\tconst getValueWithinDragArea = ( {\n\t\tclientX,\n\t\tclientY,\n\t\tshiftKey,\n\t}: {\n\t\tclientX: number;\n\t\tclientY: number;\n\t\tshiftKey: boolean;\n\t} ) => {\n\t\tif ( ! dragAreaRef.current ) return;\n\n\t\tconst { top, left } = dragAreaRef.current.getBoundingClientRect();\n\t\tlet nextX = ( clientX - left ) / bounds.width;\n\t\tlet nextY = ( clientY - top ) / bounds.height;\n\t\t// Enables holding shift to jump values by 10%.\n\t\tif ( shiftKey ) {\n\t\t\tnextX = Math.round( nextX / 0.1 ) * 0.1;\n\t\t\tnextY = Math.round( nextY / 0.1 ) * 0.1;\n\t\t}\n\t\treturn getFinalValue( { x: nextX, y: nextY } );\n\t};\n\n\tconst getFinalValue = ( value: FocalPointType ): FocalPointType => {\n\t\tconst resolvedValue = resolvePoint?.( value ) ?? value;\n\t\tresolvedValue.x = Math.max( 0, Math.min( resolvedValue.x, 1 ) );\n\t\tresolvedValue.y = Math.max( 0, Math.min( resolvedValue.y, 1 ) );\n\t\tconst roundToTwoDecimalPlaces = ( n: number ) =>\n\t\t\tMath.round( n * 1e2 ) / 1e2;\n\n\t\treturn {\n\t\t\tx: roundToTwoDecimalPlaces( resolvedValue.x ),\n\t\t\ty: roundToTwoDecimalPlaces( resolvedValue.y ),\n\t\t};\n\t};\n\n\tconst arrowKeyStep: KeyboardEventHandler< HTMLDivElement > = ( event ) => {\n\t\tconst { code, shiftKey } = event;\n\t\tif (\n\t\t\t! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t)\n\t\t\treturn;\n\n\t\tevent.preventDefault();\n\t\tconst value = { x, y };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta =\n\t\t\tcode === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n\t\tconst axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n\t\tvalue[ axis ] = value[ axis ] + delta;\n\t\tonChange?.( getFinalValue( value ) );\n\t};\n\n\tconst focalPointPosition = {\n\t\tleft: x * bounds.width,\n\t\ttop: y * bounds.height,\n\t};\n\n\tconst classes = classnames(\n\t\t'components-focal-point-picker-control',\n\t\tclassName\n\t);\n\n\tconst instanceId = useInstanceId( FocalPointPicker );\n\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\tuseUpdateEffect( () => {\n\t\tsetShowGridOverlay( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetShowGridOverlay( false );\n\t\t}, GRID_OVERLAY_TIMEOUT );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ x, y ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t{ ...restProps }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\tonKeyDown={ arrowKeyStep }\n\t\t\t\t\tonMouseDown={ startDrag }\n\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\tif ( isDragging ) endDrag();\n\t\t\t\t\t} }\n\t\t\t\t\tref={ dragAreaRef }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<Grid bounds={ bounds } showOverlay={ showGridOverlay } />\n\t\t\t\t\t<Media\n\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\tonLoad={ refUpdateBounds.current }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t{ ...focalPointPosition }\n\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t/>\n\t\t\t\t</MediaContainer>\n\t\t\t</MediaWrapper>\n\t\t\t<Controls\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\thasHelpText={ !! help }\n\t\t\t\tpoint={ { x, y } }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange?.( getFinalValue( value ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,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;AA7BA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;;AAmBA,MAAMY,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;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;MAEfH,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;MACfL,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;IAE7B,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;IAE7B,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;IAE7B,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,EAED;IAEDzC,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,GAAGoB,MAAM,CAACK,KAAK;IACtBa,GAAG,EAAErC,CAAC,GAAGmB,MAAM,CAACO;EACjB,CAAC;EAED,MAAMgC,OAAO,GAAG,IAAAC,mBAAU,EACzB,uCAAuC,EACvCvE,SACD,CAAC;EAED,MAAMwE,UAAU,GAAG,IAAAC,sBAAa,EAAE5E,gBAAiB,CAAC;EACpD,MAAM6E,EAAE,GAAI,wCAAwCF,UAAY,EAAC;EAEjE,IAAAG,sBAAe,EAAE,MAAM;IACtBzD,kBAAkB,CAAE,IAAK,CAAC;IAC1B,MAAM0D,OAAO,GAAGC,MAAM,CAACC,UAAU,CAAE,MAAM;MACxC5D,kBAAkB,CAAE,KAAM,CAAC;IAC5B,CAAC,EAAEtB,oBAAqB,CAAC;IAEzB,OAAO,MAAMiF,MAAM,CAACE,YAAY,CAAEH,OAAQ,CAAC;EAC5C,CAAC,EAAE,CAAEjE,CAAC,EAAEC,CAAC,CAAG,CAAC;EAEb,OACC,IAAAoE,MAAA,CAAAC,aAAA,EAAC7F,YAAA,CAAA8F,OAAW;IAAA,GACNrE,SAAS;IACdf,uBAAuB,EAAGA,uBAAyB;IACnDI,KAAK,EAAGA,KAAO;IACfwE,EAAE,EAAGA,EAAI;IACTzE,IAAI,EAAGA,IAAM;IACbD,SAAS,EAAGsE;EAAS,GAErB,IAAAU,MAAA,CAAAC,aAAA,EAACxF,sBAAA,CAAA0F,YAAY;IAACnF,SAAS,EAAC;EAAuC,GAC9D,IAAAgF,MAAA,CAAAC,aAAA,EAACxF,sBAAA,CAAA2F,cAAc;IACdpF,SAAS,EAAC,+BAA+B;IACzCqF,SAAS,EAAGtB,YAAc;IAC1BuB,WAAW,EAAGnE,SAAW;IACzBoE,MAAM,EAAGA,CAAA,KAAM;MACd,IAAKlE,UAAU,EAAGD,OAAO,CAAC,CAAC;IAC5B,CAAG;IACHoE,GAAG,EAAGhE,WAAa;IACnBiE,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAG,CAAC;EAAG,GAEf,IAAAV,MAAA,CAAAC,aAAA,EAAC1F,KAAA,CAAA2F,OAAI;IAACnD,MAAM,EAAGA,MAAQ;IAAC4D,WAAW,EAAG1E;EAAiB,CAAE,CAAC,EAC1D,IAAA+D,MAAA,CAAAC,aAAA,EAACzF,MAAA,CAAA0F,OAAK;IACLU,GAAG,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;IAC7B9F,QAAQ,EAAGA,QAAU;IACrB+F,MAAM,EAAG5D,eAAe,CAACT,OAAS;IAClCsE,GAAG,EAAGvF;EAAK,CACX,CAAC,EACF,IAAAwE,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAA4F,OAAU;IAAA,GACLb,kBAAkB;IACvBhD,UAAU,EAAGA;EAAY,CACzB,CACc,CACH,CAAC,EACf,IAAA2D,MAAA,CAAAC,aAAA,EAAC5F,SAAA,CAAA6F,OAAQ;IACRpF,uBAAuB,EAAGA,uBAAyB;IACnDkG,WAAW,EAAG,CAAC,CAAE/F,IAAM;IACvBa,KAAK,EAAG;MAAEH,CAAC;MAAEC;IAAE,CAAG;IAClBT,QAAQ,EAAKM,KAAK,IAAM;MACvBN,QAAQ,GAAIqD,aAAa,CAAE/C,KAAM,CAAE,CAAC;IACrC;EAAG,CACH,CACW,CAAC;AAEhB;AAAC,IAAAwF,QAAA,GAEcpG,gBAAgB;AAAAqG,OAAA,CAAAhB,OAAA,GAAAe,QAAA"}

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
 var _reactNativeBridge = require("@wordpress/react-native-bridge");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _focalPoint = _interopRequireDefault(require("./focal-point"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
@@ -195,18 +196,18 @@ function FocalPointPicker(props) {
   const onYCoordinateChange = y => onChange({
     y: (y / 100).toFixed(2)
   });
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: _style.default.container
-  }, (0, _element.createElement)(_tooltip.default, {
+  }, (0, _react.createElement)(_tooltip.default, {
     onPress: onTooltipPress,
     visible: tooltipVisible
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: [_style.default.media, mediaBackground]
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     ...panResponder.panHandlers,
     onLayout: onMediaLayout,
     style: _style.default.mediaContainer
-  }, !isVideo && (0, _element.createElement)(_components.Image, {
+  }, !isVideo && (0, _react.createElement)(_components.Image, {
     editButton: false,
     highlightSelected: false,
     isSelected: !displayPlaceholder,
@@ -214,7 +215,7 @@ function FocalPointPicker(props) {
     url: url,
     style: imagePreviewStyles,
     onImageDataLoad: onImageDataLoad
-  }), isVideo && (0, _element.createElement)(_reactNativeVideo.default, {
+  }), isVideo && (0, _react.createElement)(_reactNativeVideo.default, {
     muted: true,
     paused: true,
     disableFocus: true,
@@ -225,18 +226,18 @@ function FocalPointPicker(props) {
       uri: url
     },
     style: videoPreviewStyles
-  }), !displayPlaceholder && (0, _element.createElement)(_reactNative.Animated.View, {
+  }), !displayPlaceholder && (0, _react.createElement)(_reactNative.Animated.View, {
     pointerEvents: "none",
     style: focalPointGroupStyles
-  }, (0, _element.createElement)(_tooltip.default.Label, {
+  }, (0, _react.createElement)(_tooltip.default.Label, {
     text: (0, _i18n.__)('Drag to adjust focal point'),
     yOffset: -(FOCAL_POINT_SIZE / 2)
-  }), (0, _element.createElement)(_focalPoint.default, {
+  }), (0, _react.createElement)(_focalPoint.default, {
     height: focalPointStyles.height,
     style: focalPointStyles,
     testID: "focal-point-picker-handle",
     width: focalPointStyles.width
-  })))), (0, _element.createElement)(_components.UnitControl, {
+  })))), (0, _react.createElement)(_components.UnitControl, {
     key: `xAxis-${sliderKey}`,
     label: (0, _i18n.__)('X-Axis Position'),
     max: MAX_POSITION_VALUE,
@@ -245,7 +246,7 @@ function FocalPointPicker(props) {
     unit: "%",
     units: FOCAL_POINT_UNITS,
     value: Math.round(focalPoint.x * 100)
-  }), (0, _element.createElement)(_components.UnitControl, {
+  }), (0, _react.createElement)(_components.UnitControl, {
     key: `yAxis-${sliderKey}`,
     label: (0, _i18n.__)('Y-Axis Position'),
     max: MAX_POSITION_VALUE,

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

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Media;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
 var _utils = require("./utils");
 /**
@@ -27,14 +27,14 @@ function Media({
   ...props
 }) {
   if (!src) {
-    return (0, _element.createElement)(_focalPointPickerStyle.MediaPlaceholder, {
+    return (0, _react.createElement)(_focalPointPickerStyle.MediaPlaceholder, {
       className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
       ref: mediaRef,
       ...props
     });
   }
   const isVideo = (0, _utils.isVideoType)(src);
-  return isVideo ? (0, _element.createElement)("video", {
+  return isVideo ? (0, _react.createElement)("video", {
     ...props,
     autoPlay: autoPlay,
     className: "components-focal-point-picker__media components-focal-point-picker__media--video",
@@ -43,7 +43,7 @@ function Media({
     onLoadedData: onLoad,
     ref: mediaRef,
     src: src
-  }) : (0, _element.createElement)("img", {
+  }) : (0, _react.createElement)("img", {
     ...props,
     alt: alt,
     className: "components-focal-point-picker__media components-focal-point-picker__media--image",

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

@@ -1 +1 @@
-{"version":3,"names":["_focalPointPickerStyle","require","_utils","Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","_element","createElement","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;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASE,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,OACC,IAAAK,QAAA,CAAAC,aAAA,EAACZ,sBAAA,CAAAa,gBAAgB;MAChBC,SAAS,EAAC,wFAAwF;MAClGC,GAAG,EAAGP,QAAmC;MAAA,GACpCE;IAAK,CACV,CAAC;EAEJ;EAEA,MAAMM,OAAO,GAAG,IAAAC,kBAAW,EAAEX,GAAI,CAAC;EAElC,OAAOU,OAAO,GACb,IAAAL,QAAA,CAAAC,aAAA;IAAA,GACMF,KAAK;IACVL,QAAQ,EAAGA,QAAU;IACrBS,SAAS,EAAC,kFAAkF;IAC5FI,IAAI;IACJT,KAAK,EAAGA,KAAO;IACfU,YAAY,EAAGZ,MAAQ;IACvBQ,GAAG,EAAGP,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CAAC,GAEF,IAAAK,QAAA,CAAAC,aAAA;IAAA,GACMF,KAAK;IACVN,GAAG,EAAGA,GAAK;IACXU,SAAS,EAAC,kFAAkF;IAC5FP,MAAM,EAAGA,MAAQ;IACjBQ,GAAG,EAAGP,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CACD;AACF"}
+{"version":3,"names":["_focalPointPickerStyle","require","_utils","Media","alt","autoPlay","src","onLoad","mediaRef","muted","props","_react","createElement","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;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASE,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,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACZ,sBAAA,CAAAa,gBAAgB;MAChBC,SAAS,EAAC,wFAAwF;MAClGC,GAAG,EAAGP,QAAmC;MAAA,GACpCE;IAAK,CACV,CAAC;EAEJ;EAEA,MAAMM,OAAO,GAAG,IAAAC,kBAAW,EAAEX,GAAI,CAAC;EAElC,OAAOU,OAAO,GACb,IAAAL,MAAA,CAAAC,aAAA;IAAA,GACMF,KAAK;IACVL,QAAQ,EAAGA,QAAU;IACrBS,SAAS,EAAC,kFAAkF;IAC5FI,IAAI;IACJT,KAAK,EAAGA,KAAO;IACfU,YAAY,EAAGZ,MAAQ;IACvBQ,GAAG,EAAGP,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CAAC,GAEF,IAAAK,MAAA,CAAAC,aAAA;IAAA,GACMF,KAAK;IACVN,GAAG,EAAGA,GAAK;IACXU,SAAS,EAAC,kFAAkF;IAC5FP,MAAM,EAAGA,MAAQ;IACjBQ,GAAG,EAAGP,QAAqC;IAC3CF,GAAG,EAAGA;EAAK,CACX,CACD;AACF"}

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
+var _element = require("@wordpress/element");
 var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * External dependencies
@@ -44,9 +45,9 @@ function Tooltip({
       return false;
     }
   })).current;
-  return (0, _element.createElement)(TooltipContext.Provider, {
+  return (0, _react.createElement)(TooltipContext.Provider, {
     value: visible
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     ...(visible ? panResponder.panHandlers : {}),
     style: style
   }, children));
@@ -97,7 +98,7 @@ function Label({
     transform: tooltipTransforms
   }, align === 'left' && _style.default.tooltipLeftAlign];
   const arrowStyles = [_style.default.arrow, align === 'left' && _style.default.arrowLeftAlign];
-  return (0, _element.createElement)(_reactNative.Animated.View, {
+  return (0, _react.createElement)(_reactNative.Animated.View, {
     style: {
       opacity: animationValue,
       transform: [{
@@ -107,7 +108,7 @@ function Label({
         })
       }]
     }
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     onLayout: ({
       nativeEvent
     }) => {
@@ -121,9 +122,9 @@ function Label({
       });
     },
     style: tooltipStyles
-  }, (0, _element.createElement)(_reactNative.Text, {
+  }, (0, _react.createElement)(_reactNative.Text, {
     style: _style.default.text
-  }, text), (0, _element.createElement)(_reactNative.View, {
+  }, text), (0, _react.createElement)(_reactNative.View, {
     style: arrowStyles
   })));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_style","_interopRequireDefault","TooltipContext","createContext","Tooltip","children","onPress","style","visible","panResponder","useRef","PanResponder","create","onStartShouldSetPanResponderCapture","current","createElement","Provider","value","View","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","useState","useContext","Error","useEffect","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","onLayout","nativeEvent","layout","Text","defaultProps","_default","exports","default"],"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tconst startAnimation = () => {\n\t\t\tAnimated.timing( animationValue, {\n\t\t\t\ttoValue: visible ? 1 : 0,\n\t\t\t\tduration: visible ? 300 : 150,\n\t\t\t\tuseNativeDriver: true,\n\t\t\t\tdelay: visible ? 500 : 0,\n\t\t\t\teasing: Easing.out( Easing.quad ),\n\t\t\t} ).start();\n\t\t};\n\t\tstartAnimation();\n\t}, [ animationValue, visible ] );\n\n\t// Transforms rely upon onLayout to enable custom offsets additions.\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_element","_style","_interopRequireDefault","TooltipContext","createContext","Tooltip","children","onPress","style","visible","panResponder","useRef","PanResponder","create","onStartShouldSetPanResponderCapture","current","_react","createElement","Provider","value","View","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","useState","useContext","Error","useEffect","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","onLayout","nativeEvent","layout","Text","defaultProps","_default","exports","default"],"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align, text, xOffset, yOffset } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tconst startAnimation = () => {\n\t\t\tAnimated.timing( animationValue, {\n\t\t\t\ttoValue: visible ? 1 : 0,\n\t\t\t\tduration: visible ? 300 : 150,\n\t\t\t\tuseNativeDriver: true,\n\t\t\t\tdelay: visible ? 500 : 0,\n\t\t\t\teasing: Easing.out( Easing.quad ),\n\t\t\t} ).start();\n\t\t};\n\t\tstartAnimation();\n\t}, [ animationValue, visible ] );\n\n\t// Transforms rely upon onLayout to enable custom offsets additions.\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nLabel.defaultProps = {\n\talign: 'center',\n\txOffset: 0,\n\tyOffset: 0,\n};\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"],"mappings":"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"}

package/build/focusable-iframe/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FocusableIframe;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 /**
@@ -25,7 +25,7 @@ function FocusableIframe({
   // assigning props inherited from the rendering parent. It's the
   // responsibility of the parent to assign a title.
   // eslint-disable-next-line jsx-a11y/iframe-has-title
-  return (0, _element.createElement)("iframe", {
+  return (0, _react.createElement)("iframe", {
     ref: ref,
     ...props
   });

package/build/focusable-iframe/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_deprecated","_interopRequireDefault","FocusableIframe","iframeRef","props","ref","useMergeRefs","useFocusableIframe","deprecated","since","alternative","_element","createElement"],"sources":["@wordpress/components/src/focusable-iframe/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useFocusableIframe } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n/**\n * Internal dependencies\n */\nimport type { FocusableIframeProps } from './types';\n\nexport default function FocusableIframe( {\n\tiframeRef,\n\t...props\n}: FocusableIframeProps ) {\n\tconst ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );\n\tdeprecated( 'wp.components.FocusableIframe', {\n\t\tsince: '5.9',\n\t\talternative: 'wp.compose.useFocusableIframe',\n\t} );\n\t// Disable reason: The rendered iframe is a pass-through component,\n\t// assigning props inherited from the rendering parent. It's the\n\t// responsibility of the parent to assign a title.\n\t// eslint-disable-next-line jsx-a11y/iframe-has-title\n\treturn <iframe ref={ ref } { ...props } />;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAQe,SAASG,eAAeA,CAAE;EACxCC,SAAS;EACT,GAAGC;AACkB,CAAC,EAAG;EACzB,MAAMC,GAAG,GAAG,IAAAC,qBAAY,EAAE,CAAEH,SAAS,EAAE,IAAAI,2BAAkB,EAAC,CAAC,CAAG,CAAC;EAC/D,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EACH;EACA;EACA;EACA;EACA,OAAO,IAAAC,QAAA,CAAAC,aAAA;IAAQP,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC3C"}
+{"version":3,"names":["_compose","require","_deprecated","_interopRequireDefault","FocusableIframe","iframeRef","props","ref","useMergeRefs","useFocusableIframe","deprecated","since","alternative","_react","createElement"],"sources":["@wordpress/components/src/focusable-iframe/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs, useFocusableIframe } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n/**\n * Internal dependencies\n */\nimport type { FocusableIframeProps } from './types';\n\nexport default function FocusableIframe( {\n\tiframeRef,\n\t...props\n}: FocusableIframeProps ) {\n\tconst ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );\n\tdeprecated( 'wp.components.FocusableIframe', {\n\t\tsince: '5.9',\n\t\talternative: 'wp.compose.useFocusableIframe',\n\t} );\n\t// Disable reason: The rendered iframe is a pass-through component,\n\t// assigning props inherited from the rendering parent. It's the\n\t// responsibility of the parent to assign a title.\n\t// eslint-disable-next-line jsx-a11y/iframe-has-title\n\treturn <iframe ref={ ref } { ...props } />;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAQe,SAASG,eAAeA,CAAE;EACxCC,SAAS;EACT,GAAGC;AACkB,CAAC,EAAG;EACzB,MAAMC,GAAG,GAAG,IAAAC,qBAAY,EAAE,CAAEH,SAAS,EAAE,IAAAI,2BAAkB,EAAC,CAAC,CAAG,CAAC;EAC/D,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EACH;EACA;EACA;EACA;EACA,OAAO,IAAAC,MAAA,CAAAC,aAAA;IAAQP,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAK,CAAI,CAAC;AAC3C"}

package/build/font-size-picker/font-size-picker-select.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));
 var _unitControl = require("../unit-control");
@@ -56,7 +56,7 @@ const FontSizePickerSelect = props => {
     };
   }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];
   const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;
-  return (0, _element.createElement)(_customSelectControl.default, {
+  return (0, _react.createElement)(_customSelectControl.default, {
     __nextUnconstrainedWidth: true,
     className: "components-font-size-picker__select",
     label: (0, _i18n.__)('Font size'),

package/build/font-size-picker/font-size-picker-select.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_customSelectControl","_interopRequireDefault","_unitControl","_utils","DEFAULT_OPTION","key","name","__","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","getCommonSizeUnit","options","map","fontSize","hint","quantity","parseQuantityAndUnitFromRawValue","String","isSimpleCssValue","slug","__experimentalHint","selectedOption","find","option","_element","createElement","default","__nextUnconstrainedWidth","className","label","hideLabelFromVision","describedBy","sprintf","__experimentalShowSelectedHint","selectedItem","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__nextUnconstrainedWidth\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,oBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AASA,MAAMK,cAA0C,GAAG;EAClDC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACrBC,KAAK,EAAEC;AACR,CAAC;AAED,MAAMC,aAAyC,GAAG;EACjDL,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE,IAAAC,QAAE,EAAE,QAAS;AACpB,CAAC;AAED,MAAMI,oBAAoB,GAAKC,KAAgC,IAAM;EAAA,IAAAC,aAAA;EACpE,MAAM;IACLC,SAAS;IACTN,KAAK;IACLO,sBAAsB;IACtBC,IAAI;IACJC,QAAQ;IACRC;EACD,CAAC,GAAGN,KAAK;EAET,MAAMO,mBAAmB,GAAG,CAAC,CAAE,IAAAC,wBAAiB,EAAEN,SAAU,CAAC;EAE7D,MAAMO,OAAqC,GAAG,CAC7CjB,cAAc,EACd,GAAGU,SAAS,CAACQ,GAAG,CAAIC,QAAQ,IAAM;IACjC,IAAIC,IAAI;IACR,IAAKL,mBAAmB,EAAG;MAC1B,MAAM,CAAEM,QAAQ,CAAE,GAAG,IAAAC,6CAAgC,EACpDH,QAAQ,CAACP,IACV,CAAC;MACD,IAAKS,QAAQ,KAAKhB,SAAS,EAAG;QAC7Be,IAAI,GAAGG,MAAM,CAAEF,QAAS,CAAC;MAC1B;IACD,CAAC,MAAM,IAAK,IAAAG,uBAAgB,EAAEL,QAAQ,CAACP,IAAK,CAAC,EAAG;MAC/CQ,IAAI,GAAGG,MAAM,CAAEJ,QAAQ,CAACP,IAAK,CAAC;IAC/B;IACA,OAAO;MACNX,GAAG,EAAEkB,QAAQ,CAACM,IAAI;MAClBvB,IAAI,EAAEiB,QAAQ,CAACjB,IAAI,IAAIiB,QAAQ,CAACM,IAAI;MACpCrB,KAAK,EAAEe,QAAQ,CAACP,IAAI;MACpBc,kBAAkB,EAAEN;IACrB,CAAC;EACF,CAAE,CAAC,EACH,IAAKT,sBAAsB,GAAG,EAAE,GAAG,CAAEL,aAAa,CAAE,CAAE,CACtD;EAED,MAAMqB,cAAc,GAAGvB,KAAK,IAAAK,aAAA,GACzBQ,OAAO,CAACW,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACzB,KAAK,KAAKA,KAAM,CAAC,cAAAK,aAAA,cAAAA,aAAA,GAAIH,aAAa,GACrEN,cAAc;EAEjB,OACC,IAAA8B,QAAA,CAAAC,aAAA,EAACnC,oBAAA,CAAAoC,OAAmB;IACnBC,wBAAwB;IACxBC,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG,IAAAhC,QAAE,EAAE,WAAY,CAAG;IAC3BiC,mBAAmB;IACnBC,WAAW,EAAG,IAAAC,aAAO;IACpB;IACA,IAAAnC,QAAE,EAAE,kCAAmC,CAAC,EACxCwB,cAAc,CAACzB,IAChB,CAAG;IACHe,OAAO,EAAGA,OAAS;IACnBb,KAAK,EAAGuB,cAAgB;IACxBY,8BAA8B;IAC9B1B,QAAQ,EAAGA,CAAE;MACZ2B;IAGD,CAAC,KAAM;MACN,IAAKA,YAAY,KAAKlC,aAAa,EAAG;QACrCQ,cAAc,CAAC,CAAC;MACjB,CAAC,MAAM;QACND,QAAQ,CAAE2B,YAAY,CAACpC,KAAM,CAAC;MAC/B;IACD,CAAG;IACHQ,IAAI,EAAGA;EAAM,CACb,CAAC;AAEJ,CAAC;AAAC,IAAA6B,QAAA,GAEalC,oBAAoB;AAAAmC,OAAA,CAAAV,OAAA,GAAAS,QAAA"}
+{"version":3,"names":["_i18n","require","_customSelectControl","_interopRequireDefault","_unitControl","_utils","DEFAULT_OPTION","key","name","__","value","undefined","CUSTOM_OPTION","FontSizePickerSelect","props","_options$find","fontSizes","disableCustomFontSizes","size","onChange","onSelectCustom","areAllSizesSameUnit","getCommonSizeUnit","options","map","fontSize","hint","quantity","parseQuantityAndUnitFromRawValue","String","isSimpleCssValue","slug","__experimentalHint","selectedOption","find","option","_react","createElement","default","__nextUnconstrainedWidth","className","label","hideLabelFromVision","describedBy","sprintf","__experimentalShowSelectedHint","selectedItem","_default","exports"],"sources":["@wordpress/components/src/font-size-picker/font-size-picker-select.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomSelectControl from '../custom-select-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport type {\n\tFontSizePickerSelectProps,\n\tFontSizePickerSelectOption,\n} from './types';\nimport { getCommonSizeUnit, isSimpleCssValue } from './utils';\n\nconst DEFAULT_OPTION: FontSizePickerSelectOption = {\n\tkey: 'default',\n\tname: __( 'Default' ),\n\tvalue: undefined,\n};\n\nconst CUSTOM_OPTION: FontSizePickerSelectOption = {\n\tkey: 'custom',\n\tname: __( 'Custom' ),\n};\n\nconst FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {\n\tconst {\n\t\tfontSizes,\n\t\tvalue,\n\t\tdisableCustomFontSizes,\n\t\tsize,\n\t\tonChange,\n\t\tonSelectCustom,\n\t} = props;\n\n\tconst areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );\n\n\tconst options: FontSizePickerSelectOption[] = [\n\t\tDEFAULT_OPTION,\n\t\t...fontSizes.map( ( fontSize ) => {\n\t\t\tlet hint;\n\t\t\tif ( areAllSizesSameUnit ) {\n\t\t\t\tconst [ quantity ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\t\tfontSize.size\n\t\t\t\t);\n\t\t\t\tif ( quantity !== undefined ) {\n\t\t\t\t\thint = String( quantity );\n\t\t\t\t}\n\t\t\t} else if ( isSimpleCssValue( fontSize.size ) ) {\n\t\t\t\thint = String( fontSize.size );\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tkey: fontSize.slug,\n\t\t\t\tname: fontSize.name || fontSize.slug,\n\t\t\t\tvalue: fontSize.size,\n\t\t\t\t__experimentalHint: hint,\n\t\t\t};\n\t\t} ),\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),\n\t];\n\n\tconst selectedOption = value\n\t\t? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION\n\t\t: DEFAULT_OPTION;\n\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__nextUnconstrainedWidth\n\t\t\tclassName=\"components-font-size-picker__select\"\n\t\t\tlabel={ __( 'Font size' ) }\n\t\t\thideLabelFromVision\n\t\t\tdescribedBy={ sprintf(\n\t\t\t\t// translators: %s: Currently selected font size.\n\t\t\t\t__( 'Currently selected font size: %s' ),\n\t\t\t\tselectedOption.name\n\t\t\t) }\n\t\t\toptions={ options }\n\t\t\tvalue={ selectedOption }\n\t\t\t__experimentalShowSelectedHint\n\t\t\tonChange={ ( {\n\t\t\t\tselectedItem,\n\t\t\t}: {\n\t\t\t\tselectedItem: FontSizePickerSelectOption;\n\t\t\t} ) => {\n\t\t\t\tif ( selectedItem === CUSTOM_OPTION ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selectedItem.value );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t/>\n\t);\n};\n\nexport default FontSizePickerSelect;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,oBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AASA,MAAMK,cAA0C,GAAG;EAClDC,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACrBC,KAAK,EAAEC;AACR,CAAC;AAED,MAAMC,aAAyC,GAAG;EACjDL,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE,IAAAC,QAAE,EAAE,QAAS;AACpB,CAAC;AAED,MAAMI,oBAAoB,GAAKC,KAAgC,IAAM;EAAA,IAAAC,aAAA;EACpE,MAAM;IACLC,SAAS;IACTN,KAAK;IACLO,sBAAsB;IACtBC,IAAI;IACJC,QAAQ;IACRC;EACD,CAAC,GAAGN,KAAK;EAET,MAAMO,mBAAmB,GAAG,CAAC,CAAE,IAAAC,wBAAiB,EAAEN,SAAU,CAAC;EAE7D,MAAMO,OAAqC,GAAG,CAC7CjB,cAAc,EACd,GAAGU,SAAS,CAACQ,GAAG,CAAIC,QAAQ,IAAM;IACjC,IAAIC,IAAI;IACR,IAAKL,mBAAmB,EAAG;MAC1B,MAAM,CAAEM,QAAQ,CAAE,GAAG,IAAAC,6CAAgC,EACpDH,QAAQ,CAACP,IACV,CAAC;MACD,IAAKS,QAAQ,KAAKhB,SAAS,EAAG;QAC7Be,IAAI,GAAGG,MAAM,CAAEF,QAAS,CAAC;MAC1B;IACD,CAAC,MAAM,IAAK,IAAAG,uBAAgB,EAAEL,QAAQ,CAACP,IAAK,CAAC,EAAG;MAC/CQ,IAAI,GAAGG,MAAM,CAAEJ,QAAQ,CAACP,IAAK,CAAC;IAC/B;IACA,OAAO;MACNX,GAAG,EAAEkB,QAAQ,CAACM,IAAI;MAClBvB,IAAI,EAAEiB,QAAQ,CAACjB,IAAI,IAAIiB,QAAQ,CAACM,IAAI;MACpCrB,KAAK,EAAEe,QAAQ,CAACP,IAAI;MACpBc,kBAAkB,EAAEN;IACrB,CAAC;EACF,CAAE,CAAC,EACH,IAAKT,sBAAsB,GAAG,EAAE,GAAG,CAAEL,aAAa,CAAE,CAAE,CACtD;EAED,MAAMqB,cAAc,GAAGvB,KAAK,IAAAK,aAAA,GACzBQ,OAAO,CAACW,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACzB,KAAK,KAAKA,KAAM,CAAC,cAAAK,aAAA,cAAAA,aAAA,GAAIH,aAAa,GACrEN,cAAc;EAEjB,OACC,IAAA8B,MAAA,CAAAC,aAAA,EAACnC,oBAAA,CAAAoC,OAAmB;IACnBC,wBAAwB;IACxBC,SAAS,EAAC,qCAAqC;IAC/CC,KAAK,EAAG,IAAAhC,QAAE,EAAE,WAAY,CAAG;IAC3BiC,mBAAmB;IACnBC,WAAW,EAAG,IAAAC,aAAO;IACpB;IACA,IAAAnC,QAAE,EAAE,kCAAmC,CAAC,EACxCwB,cAAc,CAACzB,IAChB,CAAG;IACHe,OAAO,EAAGA,OAAS;IACnBb,KAAK,EAAGuB,cAAgB;IACxBY,8BAA8B;IAC9B1B,QAAQ,EAAGA,CAAE;MACZ2B;IAGD,CAAC,KAAM;MACN,IAAKA,YAAY,KAAKlC,aAAa,EAAG;QACrCQ,cAAc,CAAC,CAAC;MACjB,CAAC,MAAM;QACND,QAAQ,CAAE2B,YAAY,CAACpC,KAAM,CAAC;MAC/B;IACD,CAAG;IACHQ,IAAI,EAAGA;EAAM,CACb,CAAC;AAEJ,CAAC;AAAC,IAAA6B,QAAA,GAEalC,oBAAoB;AAAAmC,OAAA,CAAAV,OAAA,GAAAS,QAAA"}

package/build/font-size-picker/font-size-picker-toggle-group.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _toggleGroupControl = require("../toggle-group-control");
 var _constants = require("./constants");
@@ -24,7 +24,7 @@ const FontSizePickerToggleGroup = props => {
     size,
     onChange
   } = props;
-  return (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
+  return (0, _react.createElement)(_toggleGroupControl.ToggleGroupControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: (0, _i18n.__)('Font size'),
     hideLabelFromVision: true,
@@ -32,7 +32,7 @@ const FontSizePickerToggleGroup = props => {
     onChange: onChange,
     isBlock: true,
     size: size
-  }, fontSizes.map((fontSize, index) => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
+  }, fontSizes.map((fontSize, index) => (0, _react.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
     key: fontSize.slug,
     value: fontSize.size,
     label: _constants.T_SHIRT_ABBREVIATIONS[index],