npm - @wordpress/components - Versions diffs - 19.4.1-next.f435e9e01b.0 → 19.6.0 - Mend

@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (944) hide show

package/build-module/draggable/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/draggable/index.js"],"names":["useEffect","useRef","throttle","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","parseInt","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","persist","timerId","setTimeout","remove","removeEventListener","clearTimeout","onDraggableStart","onDraggableEnd","display"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useEffect, useRef } from '@wordpress/element';\n\n/\n External dependencies\n /\nimport { throttle } from 'lodash';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/\n @typedef RenderProp\n * @property {(event: import('react').DragEvent) => void} onDraggableStart `onDragStart` handler.\n * @property {(event: import('react').DragEvent) => void} onDraggableEnd `onDragEnd` handler.\n /\n\n/\n @typedef Props\n * @property {(props: RenderProp) => JSX.Element \| null} children Children.\n * @property {(event: import('react').DragEvent) => void} [onDragStart] Callback when dragging starts.\n * @property {(event: import('react').DragEvent) => void} [onDragOver] Callback when dragging happens over the document.\n * @property {(event: import('react').DragEvent) => void} [onDragEnd] Callback when dragging ends.\n * @property {string} [cloneClassname] Classname for the cloned element.\n * @property {string} [elementId] ID for the element.\n * @property {any} [transferData] Transfer data for the drag event.\n * @property {string} [__experimentalTransferDataType] The transfer data type to set.\n * @property {import('react').ReactNode} __experimentalDragComponent Component to show when dragging.\n /\n\n/\n @param {Props} props\n * @return {JSX.Element} A draggable component.\n /\nexport default function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n} ) {\n\t/* @type {import('react').MutableRefObject<HTMLDivElement \| null>} /\n\tconst dragComponentRef = useRef( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/\n\t Removes the element clone, resets cursor, and removes drag listener.\n\t \n\t @param {import('react').DragEvent} event The non-custom DragEvent.\n\t /\n\tfunction end( event ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/\n\t This method does a couple of things:\n\t \n\t - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t \n\t @param {import('react').DragEvent} event The non-custom DragEvent.\n\t /\n\tfunction start( event ) {\n\t\t// @ts-ignore We know that ownerDocument does exist on an Element\n\t\tconst { ownerDocument } = event.target;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = 0;\n\t\tcloneWrapper.style.left = 0;\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById( elementId );\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = parseInt( elementRect.top, 10 );\n\t\t\tconst elementLeftOffset = parseInt( elementRect.left, 10 );\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true );\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze\n\t\t\tArray.from(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\telementWrapper.appendChild( cloneWrapper );\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\t/*\n\t\t @param {import('react').DragEvent<Element>} e\n\t\t /\n\t\tfunction over( e ) {\n\t\t\t//Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\t// Allow the Synthetic Event to be accessed from asynchronous code.\n\t\t// https://reactjs.org/docs/events.html#event-pooling\n\t\tevent.persist();\n\n\t\t/* @type {number \| undefined} */\n\t\tlet timerId;\n\n\t\tif ( onDragStart ) {\n\t\t\ttimerId = setTimeout( () => onDragStart( event ) );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\n\t\t\tclearTimeout( timerId );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/draggable/index.js"],"names":["useEffect","useRef","throttle","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","parseInt","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","persist","timerId","setTimeout","remove","removeEventListener","clearTimeout","onDraggableStart","onDraggableEnd","display"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useEffect, useRef } from '@wordpress/element';\n\n/\n External dependencies\n /\nimport { throttle } from 'lodash';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/\n @typedef RenderProp\n * @property {(event: import('react').DragEvent) => void} onDraggableStart `onDragStart` handler.\n * @property {(event: import('react').DragEvent) => void} onDraggableEnd `onDragEnd` handler.\n /\n\n/\n @typedef Props\n * @property {(props: RenderProp) => JSX.Element \| null} children Children.\n * @property {(event: import('react').DragEvent) => void} [onDragStart] Callback when dragging starts.\n * @property {(event: import('react').DragEvent) => void} [onDragOver] Callback when dragging happens over the document.\n * @property {(event: import('react').DragEvent) => void} [onDragEnd] Callback when dragging ends.\n * @property {string} [cloneClassname] Classname for the cloned element.\n * @property {string} [elementId] ID for the element.\n * @property {any} [transferData] Transfer data for the drag event.\n * @property {string} [__experimentalTransferDataType] The transfer data type to set.\n * @property {import('react').ReactNode} __experimentalDragComponent Component to show when dragging.\n /\n\n/\n @param {Props} props\n * @return {JSX.Element} A draggable component.\n /\nexport default function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n} ) {\n\t/* @type {import('react').MutableRefObject<HTMLDivElement \| null>} /\n\tconst dragComponentRef = useRef( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/\n\t Removes the element clone, resets cursor, and removes drag listener.\n\t \n\t @param {import('react').DragEvent} event The non-custom DragEvent.\n\t /\n\tfunction end( event ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/\n\t This method does a couple of things:\n\t \n\t - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t \n\t @param {import('react').DragEvent} event The non-custom DragEvent.\n\t /\n\tfunction start( event ) {\n\t\t// @ts-ignore We know that ownerDocument does exist on an Element\n\t\tconst { ownerDocument } = event.target;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = 0;\n\t\tcloneWrapper.style.left = 0;\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById( elementId );\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = parseInt( elementRect.top, 10 );\n\t\t\tconst elementLeftOffset = parseInt( elementRect.left, 10 );\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true );\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\telementWrapper.appendChild( cloneWrapper );\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\t/*\n\t\t @param {import('react').DragEvent<Element>} e\n\t\t /\n\t\tfunction over( e ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\t// Allow the Synthetic Event to be accessed from asynchronous code.\n\t\t// https://reactjs.org/docs/events.html#event-pooling\n\t\tevent.persist();\n\n\t\t/* @type {number \| undefined} */\n\t\tlet timerId;\n\n\t\tif ( onDragStart ) {\n\t\t\ttimerId = setTimeout( () => onDragStart( event ) );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\n\t\t\tclearTimeout( timerId );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build-module/elevation/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { View } from '../view';
 import { useElevation } from './hook';
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Elevation(props, forwardedRef) {

package/build-module/elevation/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/elevation/component.js"],"names":["contextConnect","View","useElevation","Elevation","props","forwardedRef","elevationProps","ConnectedElevation"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,eAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\n\n/\n @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction Elevation( props, forwardedRef ) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/\n `Elevation` is a core component that renders shadow, using the library's shadow system.\n \n The shadow effect is generated using the `value` prop.\n \n @example\n * ```jsx\n * import {\n \t__experimentalElevation as Elevation,\n \t__experimentalSurface as Surface,\n \t__experimentalText as Text,\n } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<Surface>\n * \t\t\t<Text>Code is Poetry</Text>\n * \t\t\t<Elevation value={ 5 } />\n * \t\t</Surface>\n * \t);\n * }\n * ```\n */\nconst ConnectedElevation = contextConnect( Elevation, 'Elevation' );\n\nexport default ConnectedElevation;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/elevation/component.js"],"names":["contextConnect","View","useElevation","Elevation","props","forwardedRef","elevationProps","ConnectedElevation"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,eAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\n\n/\n @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction Elevation( props, forwardedRef ) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/\n `Elevation` is a core component that renders shadow, using the library's shadow system.\n \n The shadow effect is generated using the `value` prop.\n \n @example\n * ```jsx\n * import {\n \t__experimentalElevation as Elevation,\n \t__experimentalSurface as Surface,\n \t__experimentalText as Text,\n } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<Surface>\n * \t\t\t<Text>Code is Poetry</Text>\n * \t\t\t<Elevation value={ 5 } />\n * \t\t</Surface>\n * \t);\n * }\n * ```\n */\nconst ConnectedElevation = contextConnect( Elevation, 'Elevation' );\n\nexport default ConnectedElevation;\n"]}

package/build-module/flex/flex/component.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { FlexContext } from './../context';
 import { View } from '../../view';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function Flex(props, forwardedRef) {

package/build-module/flex/flex/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex/component.js"],"names":["contextConnect","useFlex","FlexContext","View","Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA;AACA;AACA;AACA;;AACA,SAASC,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwCR,OAAO,CAAEI,KAAF,CAArD;AAEA,SACC,cAAC,WAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,cAAC,IAAD,eAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;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,MAAMK,aAAa,GAAGZ,cAAc,CAAEI,IAAF,EAAQ,MAAR,CAApC;AAEA,eAAeQ,aAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction Flex( props, forwardedRef ) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/\n `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n \n `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.\n \n @example\n * ```jsx\n * import {\n * \t__experimentalFlex as Flex,\n * \t__experimentalFlexBlock as FlexBlock,\n * \t__experimentalFlexItem as FlexItem,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n \n function Example() {\n * \treturn (\n * \t\t<Flex>\n * \t\t\t<FlexItem>\n * \t\t\t\t<Text>Code</Text>\n * \t\t\t</FlexItem>\n * \t\t\t<FlexBlock>\n * \t\t\t\t<Text>Poetry</Text>\n * \t\t\t</FlexBlock>\n * \t\t</Flex>\n * \t);\n * }\n * ```\n \n /\nconst ConnectedFlex = contextConnect( Flex, 'Flex' );\n\nexport default ConnectedFlex;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flex/flex/component.js"],"names":["contextConnect","useFlex","FlexContext","View","Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,WAAT,QAA4B,cAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA;AACA;AACA;AACA;;AACA,SAASC,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwCR,OAAO,CAAEI,KAAF,CAArD;AAEA,SACC,cAAC,WAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,cAAC,IAAD,eAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;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,MAAMK,aAAa,GAAGZ,cAAc,CAAEI,IAAF,EAAQ,MAAR,CAApC;AAEA,eAAeQ,aAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction Flex( props, forwardedRef ) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/\n `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n \n `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.\n \n @example\n * ```jsx\n * import {\n * \t__experimentalFlex as Flex,\n * \t__experimentalFlexBlock as FlexBlock,\n * \t__experimentalFlexItem as FlexItem,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n \n function Example() {\n * \treturn (\n * \t\t<Flex>\n * \t\t\t<FlexItem>\n * \t\t\t\t<Text>Code</Text>\n * \t\t\t</FlexItem>\n * \t\t\t<FlexBlock>\n * \t\t\t\t<Text>Poetry</Text>\n * \t\t\t</FlexBlock>\n * \t\t</Flex>\n * \t);\n * }\n * ```\n \n /\nconst ConnectedFlex = contextConnect( Flex, 'Flex' );\n\nexport default ConnectedFlex;\n"]}

package/build-module/flex/flex-block/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { View } from '../../view';
 import { useFlexBlock } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                     forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
  */
 function FlexBlock(props, forwardedRef) {

package/build-module/flex/flex-block/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.js"],"names":["contextConnect","View","useFlexBlock","FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexBlock } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction FlexBlock( props, forwardedRef ) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/\n `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.\n \n @example\n * ```jsx\n * <Flex>\n * \t<FlexBlock>...</FlexBlock>\n * </Flex>\n * ```\n */\nconst ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );\n\nexport default ConnectedFlexBlock;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.js"],"names":["contextConnect","View","useFlexBlock","FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,YAAT,QAA6B,QAA7B;AAEA;AACA;AACA;AACA;;AACA,SAASC,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAGJ,YAAY,CAAEE,KAAF,CAAnC;AAEA,SAAO,cAAC,IAAD,eAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAGP,cAAc,CAAEG,SAAF,EAAa,WAAb,CAAzC;AAEA,eAAeI,kBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexBlock } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction FlexBlock( props, forwardedRef ) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/\n `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.\n \n @example\n * ```jsx\n * <Flex>\n * \t<FlexBlock>...</FlexBlock>\n * </Flex>\n * ```\n */\nconst ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );\n\nexport default ConnectedFlexBlock;\n"]}

package/build-module/flex/flex-item/component.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { View } from '../../view';
 import { useFlexItem } from './hook';
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                    forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
  */
 function FlexItem(props, forwardedRef) {

package/build-module/flex/flex-item/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.js"],"names":["contextConnect","View","useFlexItem","FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAGJ,WAAW,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAGP,cAAc,CAAEG,QAAF,EAAY,UAAZ,CAAxC;AAEA,eAAeI,iBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction FlexItem( props, forwardedRef ) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/\n `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.\n \n @example\n * ```jsx\n * <Flex>\n * \t<FlexItem>...</FlexItem>\n * </Flex>\n * ```\n */\nconst ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );\n\nexport default ConnectedFlexItem;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.js"],"names":["contextConnect","View","useFlexItem","FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,cAAT,QAA+B,kBAA/B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,WAAT,QAA4B,QAA5B;AAEA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAGJ,WAAW,CAAEE,KAAF,CAAjC;AAEA,SAAO,cAAC,IAAD,eAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAGP,cAAc,CAAEG,QAAF,EAAY,UAAZ,CAAxC;AAEA,eAAeI,iBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useFlexItem } from './hook';\n\n/\n @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction FlexItem( props, forwardedRef ) {\n\tconst flexItemProps = useFlexItem( props );\n\n\treturn <View { ...flexItemProps } ref={ forwardedRef } />;\n}\n\n/\n `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.\n \n @example\n * ```jsx\n * <Flex>\n * \t<FlexItem>...</FlexItem>\n * </Flex>\n * ```\n */\nconst ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );\n\nexport default ConnectedFlexItem;\n"]}

package/build-module/flyout/flyout/component.js CHANGED Viewed

@@ -24,7 +24,7 @@ import { useFlyout } from './hook';
 /**
  *
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                   forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                          forwardedRef
  */
 function Flyout(props, forwardedRef) {

package/build-module/flyout/flyout/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flyout/flyout/component.js"],"names":["PopoverDisclosure","Portal","useCallback","useMemo","cloneElement","contextConnect","FlyoutContext","useFlyoutResizeUpdater","FlyoutContent","useUpdateEffect","useFlyout","Flyout","props","forwardedRef","children","elevation","label","maxWidth","onVisibleChange","trigger","flyoutState","otherProps","resizeListener","onResize","unstable_update","uniqueId","baseId","labelId","contextProps","triggerContent","triggerProps","visible","ref","ConnectedFlyout"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,iBAAT,EAA4BC,MAA5B,QAA0C,QAA1C;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,YAA/B,QAAmD,oBAAnD;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,aAAT,QAA8B,YAA9B;AACA,SAASC,sBAAT,QAAuC,UAAvC;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,MAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAuC;AACtC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,KAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,eALK;AAMLC,IAAAA,OANK;AAOLC,IAAAA,WAPK;AAQL,OAAGC;AARE,MASFX,SAAS,CAAEE,KAAF,CATb;AAWA,QAAMU,cAAc,GAAGf,sBAAsB,CAAE;AAC9CgB,IAAAA,QAAQ,EAAEH,WAAW,CAACI;AADwB,GAAF,CAA7C;AAIA,QAAMC,QAAQ,GAAI,UAAUL,WAAW,CAACM,MAAQ,EAAhD;AACA,QAAMC,OAAO,GAAGX,KAAK,IAAIS,QAAzB;AAEA,QAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;AACPa,IAAAA,KAAK,EAAEW,OADA;AAEPP,IAAAA;AAFO,GAAR,CAD2B,EAK3B,CAAEO,OAAF,EAAWP,WAAX,CAL2B,CAA5B;AAQA,QAAMS,cAAc,GAAG3B,WAAW,CAC/B4B,YAAF,IAAoB;AACnB,WAAO1B,YAAY,CAAEe,OAAF,EAAWW,YAAX,CAAnB;AACA,GAHgC,EAIjC,CAAEX,OAAF,CAJiC,CAAlC;AAOAV,EAAAA,eAAe,CAAE,MAAM;AACtBS,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAIE,WAAW,CAACW,OAAhB,CAAf;AACA,GAFc,EAEZ,CAAEX,WAAW,CAACW,OAAd,CAFY,CAAf;AAIA,SACC,cAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGH;AAAhC,KACGT,OAAO,IACR,cAAC,iBAAD,eACMC,WADN;AAEC,IAAA,GAAG,EAAGD,OAAO,CAACa;AAFf,KAGMb,OAAO,CAACP,KAHd,GAKGiB,cALH,CAFF,EAUC,cAAC,MAAD,QACC,cAAC,aAAD;AACC,IAAA,GAAG,EAAGhB;AADP,KAEMQ,UAFN;AAGC,IAAA,SAAS,EAAGN,SAHb;AAIC,IAAA,QAAQ,EAAGE;AAJZ,MAMGK,cANH,EAOGR,QAPH,CADD,CAVD,CADD;AAwBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMmB,eAAe,GAAG5B,cAAc,CAAEM,MAAF,EAAU,QAAV,CAAtC;AAEA,eAAesB,eAAf","sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport { PopoverDisclosure, Portal } from 'reakit';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useMemo, cloneElement } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { FlyoutContext } from '../context';\nimport { useFlyoutResizeUpdater } from '../utils';\nimport FlyoutContent from '../flyout-content';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport { useFlyout } from './hook';\n\n/\n \n * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n /\nfunction Flyout( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tlabel,\n\t\tmaxWidth,\n\t\tonVisibleChange,\n\t\ttrigger,\n\t\tflyoutState,\n\t\t...otherProps\n\t} = useFlyout( props );\n\n\tconst resizeListener = useFlyoutResizeUpdater( {\n\t\tonResize: flyoutState.unstable_update,\n\t} );\n\n\tconst uniqueId = `flyout-${ flyoutState.baseId }`;\n\tconst labelId = label \|\| uniqueId;\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\tlabel: labelId,\n\t\t\tflyoutState,\n\t\t} ),\n\t\t[ labelId, flyoutState ]\n\t);\n\n\tconst triggerContent = useCallback(\n\t\t( triggerProps ) => {\n\t\t\treturn cloneElement( trigger, triggerProps );\n\t\t},\n\t\t[ trigger ]\n\t);\n\n\tuseUpdateEffect( () => {\n\t\tonVisibleChange?.( flyoutState.visible );\n\t}, [ flyoutState.visible ] );\n\n\treturn (\n\t\t<FlyoutContext.Provider value={ contextProps }>\n\t\t\t{ trigger && (\n\t\t\t\t<PopoverDisclosure\n\t\t\t\t\t{ ...flyoutState }\n\t\t\t\t\tref={ trigger.ref }\n\t\t\t\t\t{ ...trigger.props }\n\t\t\t\t>\n\t\t\t\t\t{ triggerContent }\n\t\t\t\t</PopoverDisclosure>\n\t\t\t) }\n\t\t\t<Portal>\n\t\t\t\t<FlyoutContent\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t\televation={ elevation }\n\t\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\t>\n\t\t\t\t\t{ resizeListener }\n\t\t\t\t\t{ children }\n\t\t\t\t</FlyoutContent>\n\t\t\t</Portal>\n\t\t</FlyoutContext.Provider>\n\t);\n}\n\n/\n `Flyout` is a component to render a floating content modal.\n * It is similar in purpose to a tooltip, but renders content of any sort,\n * not only simple text.\n \n @example\n * ```jsx\n * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<Flyout trigger={ <Button>Show/Hide content</Button> }>\n \t\t\t<Text>Code is Poetry</Text>\n \t\t</Flyout>\n * \t);\n * }\n * ```\n */\nconst ConnectedFlyout = contextConnect( Flyout, 'Flyout' );\n\nexport default ConnectedFlyout;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flyout/flyout/component.js"],"names":["PopoverDisclosure","Portal","useCallback","useMemo","cloneElement","contextConnect","FlyoutContext","useFlyoutResizeUpdater","FlyoutContent","useUpdateEffect","useFlyout","Flyout","props","forwardedRef","children","elevation","label","maxWidth","onVisibleChange","trigger","flyoutState","otherProps","resizeListener","onResize","unstable_update","uniqueId","baseId","labelId","contextProps","triggerContent","triggerProps","visible","ref","ConnectedFlyout"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,iBAAT,EAA4BC,MAA5B,QAA0C,QAA1C;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,YAA/B,QAAmD,oBAAnD;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,aAAT,QAA8B,YAA9B;AACA,SAASC,sBAAT,QAAuC,UAAvC;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,MAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAuC;AACtC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,KAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,eALK;AAMLC,IAAAA,OANK;AAOLC,IAAAA,WAPK;AAQL,OAAGC;AARE,MASFX,SAAS,CAAEE,KAAF,CATb;AAWA,QAAMU,cAAc,GAAGf,sBAAsB,CAAE;AAC9CgB,IAAAA,QAAQ,EAAEH,WAAW,CAACI;AADwB,GAAF,CAA7C;AAIA,QAAMC,QAAQ,GAAI,UAAUL,WAAW,CAACM,MAAQ,EAAhD;AACA,QAAMC,OAAO,GAAGX,KAAK,IAAIS,QAAzB;AAEA,QAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;AACPa,IAAAA,KAAK,EAAEW,OADA;AAEPP,IAAAA;AAFO,GAAR,CAD2B,EAK3B,CAAEO,OAAF,EAAWP,WAAX,CAL2B,CAA5B;AAQA,QAAMS,cAAc,GAAG3B,WAAW,CAC/B4B,YAAF,IAAoB;AACnB,WAAO1B,YAAY,CAAEe,OAAF,EAAWW,YAAX,CAAnB;AACA,GAHgC,EAIjC,CAAEX,OAAF,CAJiC,CAAlC;AAOAV,EAAAA,eAAe,CAAE,MAAM;AACtBS,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAIE,WAAW,CAACW,OAAhB,CAAf;AACA,GAFc,EAEZ,CAAEX,WAAW,CAACW,OAAd,CAFY,CAAf;AAIA,SACC,cAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGH;AAAhC,KACGT,OAAO,IACR,cAAC,iBAAD,eACMC,WADN;AAEC,IAAA,GAAG,EAAGD,OAAO,CAACa;AAFf,KAGMb,OAAO,CAACP,KAHd,GAKGiB,cALH,CAFF,EAUC,cAAC,MAAD,QACC,cAAC,aAAD;AACC,IAAA,GAAG,EAAGhB;AADP,KAEMQ,UAFN;AAGC,IAAA,SAAS,EAAGN,SAHb;AAIC,IAAA,QAAQ,EAAGE;AAJZ,MAMGK,cANH,EAOGR,QAPH,CADD,CAVD,CADD;AAwBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMmB,eAAe,GAAG5B,cAAc,CAAEM,MAAF,EAAU,QAAV,CAAtC;AAEA,eAAesB,eAAf","sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport { PopoverDisclosure, Portal } from 'reakit';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useMemo, cloneElement } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { contextConnect } from '../../ui/context';\nimport { FlyoutContext } from '../context';\nimport { useFlyoutResizeUpdater } from '../utils';\nimport FlyoutContent from '../flyout-content';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport { useFlyout } from './hook';\n\n/\n \n * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef\n /\nfunction Flyout( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tlabel,\n\t\tmaxWidth,\n\t\tonVisibleChange,\n\t\ttrigger,\n\t\tflyoutState,\n\t\t...otherProps\n\t} = useFlyout( props );\n\n\tconst resizeListener = useFlyoutResizeUpdater( {\n\t\tonResize: flyoutState.unstable_update,\n\t} );\n\n\tconst uniqueId = `flyout-${ flyoutState.baseId }`;\n\tconst labelId = label \|\| uniqueId;\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\tlabel: labelId,\n\t\t\tflyoutState,\n\t\t} ),\n\t\t[ labelId, flyoutState ]\n\t);\n\n\tconst triggerContent = useCallback(\n\t\t( triggerProps ) => {\n\t\t\treturn cloneElement( trigger, triggerProps );\n\t\t},\n\t\t[ trigger ]\n\t);\n\n\tuseUpdateEffect( () => {\n\t\tonVisibleChange?.( flyoutState.visible );\n\t}, [ flyoutState.visible ] );\n\n\treturn (\n\t\t<FlyoutContext.Provider value={ contextProps }>\n\t\t\t{ trigger && (\n\t\t\t\t<PopoverDisclosure\n\t\t\t\t\t{ ...flyoutState }\n\t\t\t\t\tref={ trigger.ref }\n\t\t\t\t\t{ ...trigger.props }\n\t\t\t\t>\n\t\t\t\t\t{ triggerContent }\n\t\t\t\t</PopoverDisclosure>\n\t\t\t) }\n\t\t\t<Portal>\n\t\t\t\t<FlyoutContent\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t\televation={ elevation }\n\t\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\t>\n\t\t\t\t\t{ resizeListener }\n\t\t\t\t\t{ children }\n\t\t\t\t</FlyoutContent>\n\t\t\t</Portal>\n\t\t</FlyoutContext.Provider>\n\t);\n}\n\n/\n `Flyout` is a component to render a floating content modal.\n * It is similar in purpose to a tooltip, but renders content of any sort,\n * not only simple text.\n \n @example\n * ```jsx\n * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';\n \n function Example() {\n * \treturn (\n * \t\t<Flyout trigger={ <Button>Show/Hide content</Button> }>\n \t\t\t<Text>Code is Poetry</Text>\n \t\t</Flyout>\n * \t);\n * }\n * ```\n */\nconst ConnectedFlyout = contextConnect( Flyout, 'Flyout' );\n\nexport default ConnectedFlyout;\n"]}

package/build-module/flyout/flyout-content/component.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { contextConnect, useContextSystem } from '../../ui/context';
 /**
  *
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props
- * @param {import('react').Ref<any>}                                                                          forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                 forwardedRef forwardedRef
  */
 function FlyoutContent(props, forwardedRef) {

package/build-module/flyout/flyout-content/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flyout/flyout-content/component.js"],"names":["useFlyoutContext","FlyoutContentView","CardView","contextConnect","useContextSystem","FlyoutContent","props","forwardedRef","children","elevation","maxWidth","style","otherProps","label","flyoutState","Error","showContent","visible","animating","ConnectedFlyoutContent"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,gBAAT,QAAiC,YAAjC;AACA,SAASC,iBAAT,EAA4BC,QAA5B,QAA4C,WAA5C;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,kBAAjD;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwBC,KAAxB,EAA+BC,YAA/B,EAA8C;AAC7C,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,KAAK,GAAG,EAJH;AAKL,OAAGC;AALE,MAMFR,gBAAgB,CAAEE,KAAF,EAAS,eAAT,CANpB;AAQA,QAAM;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyBd,gBAAgB,EAA/C;;AAEA,MAAK,CAAEc,WAAP,EAAqB;AACpB,UAAM,IAAIC,KAAJ,CACL,sDADK,CAAN;AAGA;;AAED,QAAMC,WAAW,GAAGF,WAAW,CAACG,OAAZ,IAAuBH,WAAW,CAACI,SAAvD;AAEA,SACC,cAAC,iBAAD;AACC,kBAAaL,KADd,CAEC;AACA;AACA;AAJD;AAKC,IAAA,KAAK,EAAG;AAAEH,MAAAA,QAAF;AAAY,SAAGC;AAAf;AALT,KAMMC,UANN,EAOME,WAPN,GASGE,WAAW,IACZ,cAAC,QAAD;AAAU,IAAA,SAAS,EAAGP,SAAtB;AAAkC,IAAA,GAAG,EAAGF;AAAxC,KACGC,QADH,CAVF,CADD;AAiBA;;AAED,MAAMW,sBAAsB,GAAGhB,cAAc,CAAEE,aAAF,EAAiB,eAAjB,CAA7C;AAEA,eAAec,sBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { useFlyoutContext } from '../context';\nimport { FlyoutContentView, CardView } from '../styles';\nimport { contextConnect, useContextSystem } from '../../ui/context';\n\n/\n \n * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props\n * @param {import('react').~~Ref~~<any>} forwardedRef\n */\nfunction FlyoutContent( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tmaxWidth,\n\t\tstyle = {},\n\t\t...otherProps\n\t} = useContextSystem( props, 'FlyoutContent' );\n\n\tconst { label, flyoutState } = useFlyoutContext();\n\n\tif ( ! flyoutState ) {\n\t\tthrow new Error(\n\t\t\t'`FlyoutContent` must only be used inside a `Flyout`.'\n\t\t);\n\t}\n\n\tconst showContent = flyoutState.visible \|\| flyoutState.animating;\n\n\treturn (\n\t\t<FlyoutContentView\n\t\t\taria-label={ label }\n\t\t\t// maxWidth is applied via inline styles in order to avoid the `React does\n\t\t\t// not recognize the maxWidth prop on a DOM element` error that comes from\n\t\t\t// passing `maxWidth` as a prop to `FlyoutContentView`\n\t\t\tstyle={ { maxWidth, ...style } }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...flyoutState }\n\t\t>\n\t\t\t{ showContent && (\n\t\t\t\t<CardView elevation={ elevation } ref={ forwardedRef }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CardView>\n\t\t\t) }\n\t\t</FlyoutContentView>\n\t);\n}\n\nconst ConnectedFlyoutContent = contextConnect( FlyoutContent, 'FlyoutContent' );\n\nexport default ConnectedFlyoutContent;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/flyout/flyout-content/component.js"],"names":["useFlyoutContext","FlyoutContentView","CardView","contextConnect","useContextSystem","FlyoutContent","props","forwardedRef","children","elevation","maxWidth","style","otherProps","label","flyoutState","Error","showContent","visible","animating","ConnectedFlyoutContent"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,gBAAT,QAAiC,YAAjC;AACA,SAASC,iBAAT,EAA4BC,QAA5B,QAA4C,WAA5C;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,kBAAjD;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwBC,KAAxB,EAA+BC,YAA/B,EAA8C;AAC7C,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,KAAK,GAAG,EAJH;AAKL,OAAGC;AALE,MAMFR,gBAAgB,CAAEE,KAAF,EAAS,eAAT,CANpB;AAQA,QAAM;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyBd,gBAAgB,EAA/C;;AAEA,MAAK,CAAEc,WAAP,EAAqB;AACpB,UAAM,IAAIC,KAAJ,CACL,sDADK,CAAN;AAGA;;AAED,QAAMC,WAAW,GAAGF,WAAW,CAACG,OAAZ,IAAuBH,WAAW,CAACI,SAAvD;AAEA,SACC,cAAC,iBAAD;AACC,kBAAaL,KADd,CAEC;AACA;AACA;AAJD;AAKC,IAAA,KAAK,EAAG;AAAEH,MAAAA,QAAF;AAAY,SAAGC;AAAf;AALT,KAMMC,UANN,EAOME,WAPN,GASGE,WAAW,IACZ,cAAC,QAAD;AAAU,IAAA,SAAS,EAAGP,SAAtB;AAAkC,IAAA,GAAG,EAAGF;AAAxC,KACGC,QADH,CAVF,CADD;AAiBA;;AAED,MAAMW,sBAAsB,GAAGhB,cAAc,CAAEE,aAAF,EAAiB,eAAjB,CAA7C;AAEA,eAAec,sBAAf","sourcesContent":["/*\n Internal dependencies\n /\nimport { useFlyoutContext } from '../context';\nimport { FlyoutContentView, CardView } from '../styles';\nimport { contextConnect, useContextSystem } from '../../ui/context';\n\n/\n \n * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props\n * @param {import('react').ForwardedRef<any>} forwardedRef forwardedRef\n */\nfunction FlyoutContent( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tmaxWidth,\n\t\tstyle = {},\n\t\t...otherProps\n\t} = useContextSystem( props, 'FlyoutContent' );\n\n\tconst { label, flyoutState } = useFlyoutContext();\n\n\tif ( ! flyoutState ) {\n\t\tthrow new Error(\n\t\t\t'`FlyoutContent` must only be used inside a `Flyout`.'\n\t\t);\n\t}\n\n\tconst showContent = flyoutState.visible \|\| flyoutState.animating;\n\n\treturn (\n\t\t<FlyoutContentView\n\t\t\taria-label={ label }\n\t\t\t// maxWidth is applied via inline styles in order to avoid the `React does\n\t\t\t// not recognize the maxWidth prop on a DOM element` error that comes from\n\t\t\t// passing `maxWidth` as a prop to `FlyoutContentView`\n\t\t\tstyle={ { maxWidth, ...style } }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...flyoutState }\n\t\t>\n\t\t\t{ showContent && (\n\t\t\t\t<CardView elevation={ elevation } ref={ forwardedRef }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CardView>\n\t\t\t) }\n\t\t</FlyoutContentView>\n\t);\n}\n\nconst ConnectedFlyoutContent = contextConnect( FlyoutContent, 'FlyoutContent' );\n\nexport default ConnectedFlyoutContent;\n"]}

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

@@ -46,8 +46,9 @@ export class FocalPointPicker extends Component {
     };
     this.onChangeAtControls = value => {
-      this.updateValue(value);
-      this.props.onChange(value);
+      this.updateValue(value, () => {
+        this.props.onChange(this.state.percentages);
+      });
     };
     this.updateBounds = this.updateBounds.bind(this);
@@ -141,18 +142,22 @@ export class FocalPointPicker extends Component {
   }
   updateValue() {
+    var _this$props$resolvePo, _this$props$resolvePo2, _this$props;
     let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let callback = arguments.length > 1 ? arguments[1] : undefined;
+    const resolvedValue = (_this$props$resolvePo = (_this$props$resolvePo2 = (_this$props = this.props).resolvePoint) === null || _this$props$resolvePo2 === void 0 ? void 0 : _this$props$resolvePo2.call(_this$props, nextValue)) !== null && _this$props$resolvePo !== void 0 ? _this$props$resolvePo : nextValue;
     const {
       x,
       y
-    } = nextValue;
+    } = resolvedValue;
     const nextPercentage = {
       x: parseFloat(x).toFixed(2),
       y: parseFloat(y).toFixed(2)
     };
     this.setState({
       percentages: nextPercentage
-    });
+    }, callback);
   }
   updateBounds() {
@@ -162,7 +167,7 @@ export class FocalPointPicker extends Component {
   }
   startDrag(event) {
-    var _this$props$onDragSta, _this$props;
+    var _this$props$onDragSta, _this$props2;
     event.persist();
     this.containerRef.current.focus();
@@ -179,11 +184,11 @@ export class FocalPointPicker extends Component {
       y: event.pageY
     }, event.shiftKey);
     this.updateValue(value);
-    (_this$props$onDragSta = (_this$props = this.props).onDragStart) === null || _this$props$onDragSta === void 0 ? void 0 : _this$props$onDragSta.call(_this$props, value, event);
+    (_this$props$onDragSta = (_this$props2 = this.props).onDragStart) === null || _this$props$onDragSta === void 0 ? void 0 : _this$props$onDragSta.call(_this$props2, value, event);
   }
   stopDrag(event) {
-    var _this$props$onDragEnd, _this$props2;
+    var _this$props$onDragEnd, _this$props3;
     const {
       ownerDocument
@@ -195,7 +200,7 @@ export class FocalPointPicker extends Component {
     }, () => {
       this.props.onChange(this.state.percentages);
     });
-    (_this$props$onDragEnd = (_this$props2 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props2, event);
+    (_this$props$onDragEnd = (_this$props3 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props3, event);
   }
   onKeyDown(event) {
@@ -212,12 +217,13 @@ export class FocalPointPicker extends Component {
     const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
     const value = parseFloat(next[axis]) + delta;
     next[axis] = roundClamp(value, 0, 1, step);
-    this.updateValue(next);
-    this.props.onChange(next);
+    this.updateValue(next, () => {
+      this.props.onChange(this.state.percentages);
+    });
   }
   doDrag(event) {
-    var _this$props$onDrag, _this$props3;
+    var _this$props$onDrag, _this$props4;
     // Prevents text-selection when dragging.
     event.preventDefault();
@@ -226,7 +232,7 @@ export class FocalPointPicker extends Component {
       y: event.pageY
     }, event.shiftKey);
     this.updateValue(value);
-    (_this$props$onDrag = (_this$props3 = this.props).onDrag) === null || _this$props$onDrag === void 0 ? void 0 : _this$props$onDrag.call(_this$props3, value, event);
+    (_this$props$onDrag = (_this$props4 = this.props).onDrag) === null || _this$props$onDrag === void 0 ? void 0 : _this$props$onDrag.call(_this$props4, value, event);
   }
   getValueFromPoint(point, byTenths) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["classnames","__","Component","createRef","withInstanceId","UP","DOWN","LEFT","RIGHT","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","roundClamp","INITIAL_BOUNDS","FocalPointPicker","constructor","props","arguments","state","isDragging","bounds","percentages","value","containerRef","mediaRef","onMouseDown","startDrag","bind","onMouseUp","stopDrag","onKeyDown","onMouseMove","doDrag","ifDraggingStop","onChangeAtControls","updateValue","onChange","updateBounds","componentDidMount","defaultView","current","ownerDocument","addEventListener","componentDidUpdate","prevProps","url","x","y","setState","componentWillUnmount","removeEventListener","calculateBounds","clientWidth","clientHeight","dimensions","width","height","pickerDimensions","widthRatio","heightRatio","right","top","bottom","left","nextValue","nextPercentage","parseFloat","toFixed","event","persist","focus","getValueFromPoint","pageX","pageY","shiftKey","onDragStart","onDragEnd","keyCode","includes","preventDefault","next","step","delta","axis","onDrag","point","byTenths","relativePoint","Math","max","min","nextX","nextY","containerNode","getBoundingClientRect","document","body","scrollTop","iconCoordinates","undefined","render","autoPlay","className","help","instanceId","label","classes","id","defaultProps"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,SAAT,EAAoBC,SAApB,QAAqC,oBAArC;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,EAAT,EAAaC,IAAb,EAAmBC,IAAnB,EAAyBC,KAAzB,QAAsC,qBAAtC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,SACCC,YADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,UAAT,QAA2B,eAA3B;AACA,SAASC,cAAT,QAA+B,SAA/B;AAEA,OAAO,MAAMC,gBAAN,SAA+BhB,SAA/B,CAAyC;AAC/CiB,EAAAA,WAAW,CAAEC,KAAF,EAAU;AACpB,UAAO,GAAGC,SAAV;AAEA,SAAKC,KAAL,GAAa;AACZC,MAAAA,UAAU,EAAE,KADA;AAEZC,MAAAA,MAAM,EAAEP,cAFI;AAGZQ,MAAAA,WAAW,EAAEL,KAAK,CAACM;AAHP,KAAb;AAMA,SAAKC,YAAL,GAAoBxB,SAAS,EAA7B;AACA,SAAKyB,QAAL,GAAgBzB,SAAS,EAAzB;AAEA,SAAK0B,WAAL,GAAmB,KAAKC,SAAL,CAAeC,IAAf,CAAqB,IAArB,CAAnB;AACA,SAAKC,SAAL,GAAiB,KAAKC,QAAL,CAAcF,IAAd,CAAoB,IAApB,CAAjB;AACA,SAAKG,SAAL,GAAiB,KAAKA,SAAL,CAAeH,IAAf,CAAqB,IAArB,CAAjB;AACA,SAAKI,WAAL,GAAmB,KAAKC,MAAL,CAAYL,IAAZ,CAAkB,IAAlB,CAAnB;;AACA,SAAKM,cAAL,GAAsB,MAAM;AAC3B,UAAK,KAAKf,KAAL,CAAWC,UAAhB,EAA6B;AAC5B,aAAKU,QAAL;AACA;AACD,KAJD;;AAKA,SAAKK,kBAAL,GAA4BZ,KAAF,IAAa;AACtC,WAAKa,WAAL,CAAkBb,KAAlB;AACA,WAAKN,KAAL,CAAWoB,QAAX,CAAqBd,KAArB;AACA,KAHD;;AAKA,SAAKe,YAAL,GAAoB,KAAKA,YAAL,CAAkBV,IAAlB,CAAwB,IAAxB,CAApB;AACA,SAAKQ,WAAL,GAAmB,KAAKA,WAAL,CAAiBR,IAAjB,CAAuB,IAAvB,CAAnB;AACA;;AACDW,EAAAA,iBAAiB,GAAG;AACnB,UAAM;AAAEC,MAAAA;AAAF,QAAkB,KAAKhB,YAAL,CAAkBiB,OAAlB,CAA0BC,aAAlD;AACAF,IAAAA,WAAW,CAACG,gBAAZ,CAA8B,QAA9B,EAAwC,KAAKL,YAA7C;AAEA;AACF;AACA;AACA;AACA;AACA;;AACE,SAAKA,YAAL;AACA;;AACDM,EAAAA,kBAAkB,CAAEC,SAAF,EAAc;AAC/B,QAAKA,SAAS,CAACC,GAAV,KAAkB,KAAK7B,KAAL,CAAW6B,GAAlC,EAAwC;AACvC,WAAKZ,cAAL;AACA;AACD;AACF;AACA;AACA;;;AACE,UAAM;AACLd,MAAAA,UADK;AAELE,MAAAA,WAAW,EAAE;AAAEyB,QAAAA,CAAF;AAAKC,QAAAA;AAAL;AAFR,QAGF,KAAK7B,KAHT;AAIA,UAAM;AAAEI,MAAAA;AAAF,QAAY,KAAKN,KAAvB;;AACA,QAAK,CAAEG,UAAF,KAAkBG,KAAK,CAACwB,CAAN,KAAYA,CAAZ,IAAiBxB,KAAK,CAACyB,CAAN,KAAYA,CAA/C,CAAL,EAA0D;AACzD,WAAKC,QAAL,CAAe;AAAE3B,QAAAA,WAAW,EAAE,KAAKL,KAAL,CAAWM;AAA1B,OAAf;AACA;AACD;;AACD2B,EAAAA,oBAAoB,GAAG;AACtB,UAAM;AAAEV,MAAAA;AAAF,QAAkB,KAAKhB,YAAL,CAAkBiB,OAAlB,CAA0BC,aAAlD;AACAF,IAAAA,WAAW,CAACW,mBAAZ,CAAiC,QAAjC,EAA2C,KAAKb,YAAhD;AACA,SAAKJ,cAAL;AACA;;AACDkB,EAAAA,eAAe,GAAG;AACjB,UAAM/B,MAAM,GAAGP,cAAf;;AAEA,QAAK,CAAE,KAAKW,QAAL,CAAcgB,OAArB,EAA+B;AAC9B,aAAOpB,MAAP;AACA,KALgB,CAOjB;;;AACA,QACC,KAAKI,QAAL,CAAcgB,OAAd,CAAsBY,WAAtB,KAAsC,CAAtC,IACA,KAAK5B,QAAL,CAAcgB,OAAd,CAAsBa,YAAtB,KAAuC,CAFxC,EAGE;AACD,aAAOjC,MAAP;AACA;;AAED,UAAMkC,UAAU,GAAG;AAClBC,MAAAA,KAAK,EAAE,KAAK/B,QAAL,CAAcgB,OAAd,CAAsBY,WADX;AAElBI,MAAAA,MAAM,EAAE,KAAKhC,QAAL,CAAcgB,OAAd,CAAsBa;AAFZ,KAAnB;AAKA,UAAMI,gBAAgB,GAAG,KAAKA,gBAAL,EAAzB;AAEA,UAAMC,UAAU,GAAGD,gBAAgB,CAACF,KAAjB,GAAyBD,UAAU,CAACC,KAAvD;AACA,UAAMI,WAAW,GAAGF,gBAAgB,CAACD,MAAjB,GAA0BF,UAAU,CAACE,MAAzD;;AAEA,QAAKG,WAAW,IAAID,UAApB,EAAiC;AAChCtC,MAAAA,MAAM,CAACmC,KAAP,GAAenC,MAAM,CAACwC,KAAP,GAAeH,gBAAgB,CAACF,KAA/C;AACAnC,MAAAA,MAAM,CAACoC,MAAP,GAAgBF,UAAU,CAACE,MAAX,GAAoBE,UAApC;AACAtC,MAAAA,MAAM,CAACyC,GAAP,GAAa,CAAEJ,gBAAgB,CAACD,MAAjB,GAA0BpC,MAAM,CAACoC,MAAnC,IAA8C,CAA3D;AACApC,MAAAA,MAAM,CAAC0C,MAAP,GAAgB1C,MAAM,CAACyC,GAAP,GAAazC,MAAM,CAACoC,MAApC;AACA,KALD,MAKO;AACNpC,MAAAA,MAAM,CAACoC,MAAP,GAAgBpC,MAAM,CAAC0C,MAAP,GAAgBL,gBAAgB,CAACD,MAAjD;AACApC,MAAAA,MAAM,CAACmC,KAAP,GAAeD,UAAU,CAACC,KAAX,GAAmBI,WAAlC;AACAvC,MAAAA,MAAM,CAAC2C,IAAP,GAAc,CAAEN,gBAAgB,CAACF,KAAjB,GAAyBnC,MAAM,CAACmC,KAAlC,IAA4C,CAA1D;AACAnC,MAAAA,MAAM,CAACwC,KAAP,GAAexC,MAAM,CAAC2C,IAAP,GAAc3C,MAAM,CAACmC,KAApC;AACA;;AACD,WAAOnC,MAAP;AACA;;AACDe,EAAAA,WAAW,GAAmB;AAAA,QAAjB6B,SAAiB,uEAAL,EAAK;AAC7B,UAAM;AAAElB,MAAAA,CAAF;AAAKC,MAAAA;AAAL,QAAWiB,SAAjB;AAEA,UAAMC,cAAc,GAAG;AACtBnB,MAAAA,CAAC,EAAEoB,UAAU,CAAEpB,CAAF,CAAV,CAAgBqB,OAAhB,CAAyB,CAAzB,CADmB;AAEtBpB,MAAAA,CAAC,EAAEmB,UAAU,CAAEnB,CAAF,CAAV,CAAgBoB,OAAhB,CAAyB,CAAzB;AAFmB,KAAvB;AAKA,SAAKnB,QAAL,CAAe;AAAE3B,MAAAA,WAAW,EAAE4C;AAAf,KAAf;AACA;;AACD5B,EAAAA,YAAY,GAAG;AACd,SAAKW,QAAL,CAAe;AACd5B,MAAAA,MAAM,EAAE,KAAK+B,eAAL;AADM,KAAf;AAGA;;AACDzB,EAAAA,SAAS,CAAE0C,KAAF,EAAU;AAAA;;AAClBA,IAAAA,KAAK,CAACC,OAAN;AACA,SAAK9C,YAAL,CAAkBiB,OAAlB,CAA0B8B,KAA1B;AACA,SAAKtB,QAAL,CAAe;AAAE7B,MAAAA,UAAU,EAAE;AAAd,KAAf;AACA,UAAM;AAAEsB,MAAAA;AAAF,QAAoB,KAAKlB,YAAL,CAAkBiB,OAA5C;AACAC,IAAAA,aAAa,CAACC,gBAAd,CAAgC,SAAhC,EAA2C,KAAKd,SAAhD;AACAa,IAAAA,aAAa,CAACC,gBAAd,CAAgC,WAAhC,EAA6C,KAAKX,WAAlD;AACA,UAAMT,KAAK,GAAG,KAAKiD,iBAAL,CACb;AAAEzB,MAAAA,CAAC,EAAEsB,KAAK,CAACI,KAAX;AAAkBzB,MAAAA,CAAC,EAAEqB,KAAK,CAACK;AAA3B,KADa,EAEbL,KAAK,CAACM,QAFO,CAAd;AAIA,SAAKvC,WAAL,CAAkBb,KAAlB;AACA,iDAAKN,KAAL,EAAW2D,WAAX,kGAA0BrD,KAA1B,EAAiC8C,KAAjC;AACA;;AACDvC,EAAAA,QAAQ,CAAEuC,KAAF,EAAU;AAAA;;AACjB,UAAM;AAAE3B,MAAAA;AAAF,QAAoB,KAAKlB,YAAL,CAAkBiB,OAA5C;AACAC,IAAAA,aAAa,CAACS,mBAAd,CAAmC,SAAnC,EAA8C,KAAKtB,SAAnD;AACAa,IAAAA,aAAa,CAACS,mBAAd,CAAmC,WAAnC,EAAgD,KAAKnB,WAArD;AACA,SAAKiB,QAAL,CAAe;AAAE7B,MAAAA,UAAU,EAAE;AAAd,KAAf,EAAsC,MAAM;AAC3C,WAAKH,KAAL,CAAWoB,QAAX,CAAqB,KAAKlB,KAAL,CAAWG,WAAhC;AACA,KAFD;AAGA,kDAAKL,KAAL,EAAW4D,SAAX,mGAAwBR,KAAxB;AACA;;AACDtC,EAAAA,SAAS,CAAEsC,KAAF,EAAU;AAClB,UAAM;AAAES,MAAAA,OAAF;AAAWH,MAAAA;AAAX,QAAwBN,KAA9B;AACA,QAAK,CAAE,CAAEnE,EAAF,EAAMC,IAAN,EAAYC,IAAZ,EAAkBC,KAAlB,EAA0B0E,QAA1B,CAAoCD,OAApC,CAAP,EAAuD;AAEvDT,IAAAA,KAAK,CAACW,cAAN;AAEA,UAAMC,IAAI,GAAG,EAAE,GAAG,KAAK9D,KAAL,CAAWG;AAAhB,KAAb;AACA,UAAM4D,IAAI,GAAGP,QAAQ,GAAG,GAAH,GAAS,IAA9B;AACA,UAAMQ,KAAK,GAAGL,OAAO,KAAK5E,EAAZ,IAAkB4E,OAAO,KAAK1E,IAA9B,GAAqC,CAAC,CAAD,GAAK8E,IAA1C,GAAiDA,IAA/D;AACA,UAAME,IAAI,GAAGN,OAAO,KAAK5E,EAAZ,IAAkB4E,OAAO,KAAK3E,IAA9B,GAAqC,GAArC,GAA2C,GAAxD;AACA,UAAMoB,KAAK,GAAG4C,UAAU,CAAEc,IAAI,CAAEG,IAAF,CAAN,CAAV,GAA6BD,KAA3C;AAEAF,IAAAA,IAAI,CAAEG,IAAF,CAAJ,GAAevE,UAAU,CAAEU,KAAF,EAAS,CAAT,EAAY,CAAZ,EAAe2D,IAAf,CAAzB;AAEA,SAAK9C,WAAL,CAAkB6C,IAAlB;AACA,SAAKhE,KAAL,CAAWoB,QAAX,CAAqB4C,IAArB;AACA;;AACDhD,EAAAA,MAAM,CAAEoC,KAAF,EAAU;AAAA;;AACf;AACAA,IAAAA,KAAK,CAACW,cAAN;AACA,UAAMzD,KAAK,GAAG,KAAKiD,iBAAL,CACb;AAAEzB,MAAAA,CAAC,EAAEsB,KAAK,CAACI,KAAX;AAAkBzB,MAAAA,CAAC,EAAEqB,KAAK,CAACK;AAA3B,KADa,EAEbL,KAAK,CAACM,QAFO,CAAd;AAIA,SAAKvC,WAAL,CAAkBb,KAAlB;AACA,+CAAKN,KAAL,EAAWoE,MAAX,6FAAqB9D,KAArB,EAA4B8C,KAA5B;AACA;;AACDG,EAAAA,iBAAiB,CAAEc,KAAF,EAASC,QAAT,EAAoB;AACpC,UAAM;AAAElE,MAAAA;AAAF,QAAa,KAAKF,KAAxB;AAEA,UAAMuC,gBAAgB,GAAG,KAAKA,gBAAL,EAAzB;AACA,UAAM8B,aAAa,GAAG;AACrBxB,MAAAA,IAAI,EAAEsB,KAAK,CAACvC,CAAN,GAAUW,gBAAgB,CAACM,IADZ;AAErBF,MAAAA,GAAG,EAAEwB,KAAK,CAACtC,CAAN,GAAUU,gBAAgB,CAACI;AAFX,KAAtB;AAKA,UAAME,IAAI,GAAGyB,IAAI,CAACC,GAAL,CACZrE,MAAM,CAAC2C,IADK,EAEZyB,IAAI,CAACE,GAAL,CAAUH,aAAa,CAACxB,IAAxB,EAA8B3C,MAAM,CAACwC,KAArC,CAFY,CAAb;AAIA,UAAMC,GAAG,GAAG2B,IAAI,CAACC,GAAL,CACXrE,MAAM,CAACyC,GADI,EAEX2B,IAAI,CAACE,GAAL,CAAUH,aAAa,CAAC1B,GAAxB,EAA6BzC,MAAM,CAAC0C,MAApC,CAFW,CAAZ;AAKA,QAAI6B,KAAK,GACR,CAAE5B,IAAI,GAAG3C,MAAM,CAAC2C,IAAhB,KACEN,gBAAgB,CAACF,KAAjB,GAAyBnC,MAAM,CAAC2C,IAAP,GAAc,CADzC,CADD;AAGA,QAAI6B,KAAK,GACR,CAAE/B,GAAG,GAAGzC,MAAM,CAACyC,GAAf,KAAyBJ,gBAAgB,CAACD,MAAjB,GAA0BpC,MAAM,CAACyC,GAAP,GAAa,CAAhE,CADD,CArBoC,CAwBpC;;AACA,UAAMoB,IAAI,GAAGK,QAAQ,GAAG,GAAH,GAAS,IAA9B;AAEAK,IAAAA,KAAK,GAAG/E,UAAU,CAAE+E,KAAF,EAAS,CAAT,EAAY,CAAZ,EAAeV,IAAf,CAAlB;AACAW,IAAAA,KAAK,GAAGhF,UAAU,CAAEgF,KAAF,EAAS,CAAT,EAAY,CAAZ,EAAeX,IAAf,CAAlB;AAEA,WAAO;AAAEnC,MAAAA,CAAC,EAAE6C,KAAL;AAAY5C,MAAAA,CAAC,EAAE6C;AAAf,KAAP;AACA;;AACDnC,EAAAA,gBAAgB,GAAG;AAClB,UAAMoC,aAAa,GAAG,KAAKtE,YAAL,CAAkBiB,OAAxC;;AAEA,QAAK,CAAEqD,aAAP,EAAuB;AACtB,aAAO;AACNtC,QAAAA,KAAK,EAAE,CADD;AAENC,QAAAA,MAAM,EAAE,CAFF;AAGNO,QAAAA,IAAI,EAAE,CAHA;AAINF,QAAAA,GAAG,EAAE;AAJC,OAAP;AAMA;;AAED,UAAM;AAAER,MAAAA,YAAF;AAAgBD,MAAAA;AAAhB,QAAgCyC,aAAtC;AACA,UAAM;AAAEhC,MAAAA,GAAF;AAAOE,MAAAA;AAAP,QAAgB8B,aAAa,CAACC,qBAAd,EAAtB;AAEA,WAAO;AACNvC,MAAAA,KAAK,EAAEH,WADD;AAENI,MAAAA,MAAM,EAAEH,YAFF;AAGNQ,MAAAA,GAAG,EAAEA,GAAG,GAAGkC,QAAQ,CAACC,IAAT,CAAcC,SAHnB;AAINlC,MAAAA;AAJM,KAAP;AAMA;;AACDmC,EAAAA,eAAe,GAAG;AACjB,UAAM;AACL9E,MAAAA,MADK;AAELC,MAAAA,WAAW,EAAE;AAAEyB,QAAAA,CAAF;AAAKC,QAAAA;AAAL;AAFR,QAGF,KAAK7B,KAHT;;AAKA,QAAKE,MAAM,CAAC2C,IAAP,KAAgBoC,SAAhB,IAA6B/E,MAAM,CAACyC,GAAP,KAAesC,SAAjD,EAA6D;AAC5D,aAAO;AACNpC,QAAAA,IAAI,EAAE,KADA;AAENF,QAAAA,GAAG,EAAE;AAFC,OAAP;AAIA;;AAED,UAAM;AAAEN,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoB,KAAKC,gBAAL,EAA1B;AACA,WAAO;AACNM,MAAAA,IAAI,EAAEjB,CAAC,IAAKS,KAAK,GAAGnC,MAAM,CAAC2C,IAAP,GAAc,CAA3B,CAAD,GAAkC3C,MAAM,CAAC2C,IADzC;AAENF,MAAAA,GAAG,EAAEd,CAAC,IAAKS,MAAM,GAAGpC,MAAM,CAACyC,GAAP,GAAa,CAA3B,CAAD,GAAkCzC,MAAM,CAACyC;AAFxC,KAAP;AAIA;;AACDuC,EAAAA,MAAM,GAAG;AACR,UAAM;AACLC,MAAAA,QADK;AAELC,MAAAA,SAFK;AAGLC,MAAAA,IAHK;AAILC,MAAAA,UAJK;AAKLC,MAAAA,KALK;AAML5D,MAAAA;AANK,QAOF,KAAK7B,KAPT;AAQA,UAAM;AAAEI,MAAAA,MAAF;AAAUD,MAAAA,UAAV;AAAsBE,MAAAA;AAAtB,QAAsC,KAAKH,KAAjD;AACA,UAAMgF,eAAe,GAAG,KAAKA,eAAL,EAAxB;AAEA,UAAMQ,OAAO,GAAG9G,UAAU,CACzB,uCADyB,EAEzB0G,SAFyB,CAA1B;AAKA,UAAMK,EAAE,GAAI,wCAAwCH,UAAY,EAAhE;AAEA,WACC,cAAC,WAAD;AACC,MAAA,KAAK,EAAGC,KADT;AAEC,MAAA,EAAE,EAAGE,EAFN;AAGC,MAAA,IAAI,EAAGJ,IAHR;AAIC,MAAA,SAAS,EAAGG;AAJb,OAMC,cAAC,YAAD;AAAc,MAAA,SAAS,EAAC;AAAxB,OACC,cAAC,cAAD;AACC,MAAA,SAAS,EAAC,+BADX;AAEC,MAAA,SAAS,EAAG,KAAK5E,SAFlB;AAGC,MAAA,WAAW,EAAG,KAAKL,WAHpB;AAIC,MAAA,MAAM,EAAG,KAAKQ,cAJf;AAKC,MAAA,GAAG,EAAG,KAAKV,YALZ;AAMC,MAAA,IAAI,EAAC,QANN;AAOC,MAAA,QAAQ,EAAC;AAPV,OASC,cAAC,IAAD;AACC,MAAA,MAAM,EAAGH,MADV;AAEC,MAAA,KAAK,EAAGC,WAAW,CAACyB,CAAZ,GAAgBzB,WAAW,CAAC0B;AAFrC,MATD,EAaC,cAAC,KAAD;AACC,MAAA,GAAG,EAAGlD,EAAE,CAAE,eAAF,CADT;AAEC,MAAA,QAAQ,EAAGwG,QAFZ;AAGC,MAAA,QAAQ,EAAG,KAAK7E,QAHjB;AAIC,MAAA,MAAM,EAAG,KAAKa,YAJf;AAKC,MAAA,GAAG,EAAGQ;AALP,MAbD,EAoBC,cAAC,UAAD;AACC,MAAA,WAAW,EAAGqD,eADf;AAEC,MAAA,UAAU,EAAG/E;AAFd,MApBD,CADD,CAND,EAiCC,cAAC,QAAD;AACC,MAAA,WAAW,EAAGE,WADf;AAEC,MAAA,QAAQ,EAAG,KAAKa;AAFjB,MAjCD,CADD;AAwCA;;AA3S8C;AA8ShDpB,gBAAgB,CAAC8F,YAAjB,GAAgC;AAC/BP,EAAAA,QAAQ,EAAE,IADqB;AAE/B/E,EAAAA,KAAK,EAAE;AACNwB,IAAAA,CAAC,EAAE,GADG;AAENC,IAAAA,CAAC,EAAE;AAFG,GAFwB;AAM/BF,EAAAA,GAAG,EAAE;AAN0B,CAAhC;AASA,eAAe7C,cAAc,CAAEc,gBAAF,CAA7B","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport { withInstanceId } from '@wordpress/compose';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\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 { roundClamp } from '../utils/math';\nimport { INITIAL_BOUNDS } from './utils';\n\nexport class FocalPointPicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\tisDragging: false,\n\t\t\tbounds: INITIAL_BOUNDS,\n\t\t\tpercentages: props.value,\n\t\t};\n\n\t\tthis.containerRef = createRef();\n\t\tthis.mediaRef = createRef();\n\n\t\tthis.onMouseDown = this.startDrag.bind( this );\n\t\tthis.onMouseUp = this.stopDrag.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.onMouseMove = this.doDrag.bind( this );\n\t\tthis.ifDraggingStop = () => {\n\t\t\tif ( this.state.isDragging ) {\n\t\t\t\tthis.stopDrag();\n\t\t\t}\n\t\t};\n\t\tthis.onChangeAtControls = ( value ) => {\n\t\t\tthis.updateValue( value );\n\t\t\tthis.props.onChange( value );\n\t\t};\n\n\t\tthis.updateBounds = this.updateBounds.bind( this );\n\t\tthis.updateValue = this.updateValue.bind( this );\n\t}\n\tcomponentDidMount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', this.updateBounds );\n\n\t\t/\n\t\t * Set initial bound values.\n\t\t \n\t\t This is necessary for Safari:\n\t\t * https://github.com/WordPress/gutenberg/issues/25814\n\t\t /\n\t\tthis.updateBounds();\n\t}\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( prevProps.url !== this.props.url ) {\n\t\t\tthis.ifDraggingStop();\n\t\t}\n\t\t/\n\t\t * Handles cases where the incoming value changes.\n\t\t * An example is the values resetting based on an UNDO action.\n\t\t /\n\t\tconst {\n\t\t\tisDragging,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\t\tconst { value } = this.props;\n\t\tif ( ! isDragging && ( value.x !== x \|\| value.y !== y ) ) {\n\t\t\tthis.setState( { percentages: this.props.value } );\n\t\t}\n\t}\n\tcomponentWillUnmount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.removeEventListener( 'resize', this.updateBounds );\n\t\tthis.ifDraggingStop();\n\t}\n\tcalculateBounds() {\n\t\tconst bounds = INITIAL_BOUNDS;\n\n\t\tif ( ! this.mediaRef.current ) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\t// Prevent division by zero when updateBounds runs in componentDidMount\n\t\tif (\n\t\t\tthis.mediaRef.current.clientWidth === 0 \|\|\n\t\t\tthis.mediaRef.current.clientHeight === 0\n\t\t) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\tconst dimensions = {\n\t\t\twidth: this.mediaRef.current.clientWidth,\n\t\t\theight: this.mediaRef.current.clientHeight,\n\t\t};\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\n\t\tconst widthRatio = pickerDimensions.width / dimensions.width;\n\t\tconst heightRatio = pickerDimensions.height / dimensions.height;\n\n\t\tif ( heightRatio >= widthRatio ) {\n\t\t\tbounds.width = bounds.right = pickerDimensions.width;\n\t\t\tbounds.height = dimensions.height widthRatio;\n\t\t\tbounds.top = ( pickerDimensions.height - bounds.height ) / 2;\n\t\t\tbounds.bottom = bounds.top + bounds.height;\n\t\t} else {\n\t\t\tbounds.height = bounds.bottom = pickerDimensions.height;\n\t\t\tbounds.width = dimensions.width * heightRatio;\n\t\t\tbounds.left = ( pickerDimensions.width - bounds.width ) / 2;\n\t\t\tbounds.right = bounds.left + bounds.width;\n\t\t}\n\t\treturn bounds;\n\t}\n\tupdateValue( nextValue = {} ) {\n\t\tconst { x, y } = nextValue;\n\n\t\tconst nextPercentage = {\n\t\t\tx: parseFloat( x ).toFixed( 2 ),\n\t\t\ty: parseFloat( y ).toFixed( 2 ),\n\t\t};\n\n\t\tthis.setState( { percentages: nextPercentage } );\n\t}\n\tupdateBounds() {\n\t\tthis.setState( {\n\t\t\tbounds: this.calculateBounds(),\n\t\t} );\n\t}\n\tstartDrag( event ) {\n\t\tevent.persist();\n\t\tthis.containerRef.current.focus();\n\t\tthis.setState( { isDragging: true } );\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.addEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.addEventListener( 'mousemove', this.onMouseMove );\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDragStart?.( value, event );\n\t}\n\tstopDrag( event ) {\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.removeEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.removeEventListener( 'mousemove', this.onMouseMove );\n\t\tthis.setState( { isDragging: false }, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t\tthis.props.onDragEnd?.( event );\n\t}\n\tonKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tif ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst next = { ...this.state.percentages };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta = keyCode === UP \|\| keyCode === LEFT ? -1 * step : step;\n\t\tconst axis = keyCode === UP \|\| keyCode === DOWN ? 'y' : 'x';\n\t\tconst value = parseFloat( next[ axis ] ) + delta;\n\n\t\tnext[ axis ] = roundClamp( value, 0, 1, step );\n\n\t\tthis.updateValue( next );\n\t\tthis.props.onChange( next );\n\t}\n\tdoDrag( event ) {\n\t\t// Prevents text-selection when dragging.\n\t\tevent.preventDefault();\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDrag?.( value, event );\n\t}\n\tgetValueFromPoint( point, byTenths ) {\n\t\tconst { bounds } = this.state;\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\t\tconst relativePoint = {\n\t\t\tleft: point.x - pickerDimensions.left,\n\t\t\ttop: point.y - pickerDimensions.top,\n\t\t};\n\n\t\tconst left = Math.max(\n\t\t\tbounds.left,\n\t\t\tMath.min( relativePoint.left, bounds.right )\n\t\t);\n\t\tconst top = Math.max(\n\t\t\tbounds.top,\n\t\t\tMath.min( relativePoint.top, bounds.bottom )\n\t\t);\n\n\t\tlet nextX =\n\t\t\t( left - bounds.left ) /\n\t\t\t( pickerDimensions.width - bounds.left * 2 );\n\t\tlet nextY =\n\t\t\t( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );\n\n\t\t// Enables holding shift to jump values by 10%\n\t\tconst step = byTenths ? 0.1 : 0.01;\n\n\t\tnextX = roundClamp( nextX, 0, 1, step );\n\t\tnextY = roundClamp( nextY, 0, 1, step );\n\n\t\treturn { x: nextX, y: nextY };\n\t}\n\tpickerDimensions() {\n\t\tconst containerNode = this.containerRef.current;\n\n\t\tif ( ! containerNode ) {\n\t\t\treturn {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t};\n\t\t}\n\n\t\tconst { clientHeight, clientWidth } = containerNode;\n\t\tconst { top, left } = containerNode.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: clientWidth,\n\t\t\theight: clientHeight,\n\t\t\ttop: top + document.body.scrollTop,\n\t\t\tleft,\n\t\t};\n\t}\n\ticonCoordinates() {\n\t\tconst {\n\t\t\tbounds,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\n\t\tif ( bounds.left === undefined \|\| bounds.top === undefined ) {\n\t\t\treturn {\n\t\t\t\tleft: '50%',\n\t\t\t\ttop: '50%',\n\t\t\t};\n\t\t}\n\n\t\tconst { width, height } = this.pickerDimensions();\n\t\treturn {\n\t\t\tleft: x * ( width - bounds.left * 2 ) + bounds.left,\n\t\t\ttop: y * ( height - bounds.top * 2 ) + bounds.top,\n\t\t};\n\t}\n\trender() {\n\t\tconst {\n\t\t\tautoPlay,\n\t\t\tclassName,\n\t\t\thelp,\n\t\t\tinstanceId,\n\t\t\tlabel,\n\t\t\turl,\n\t\t} = this.props;\n\t\tconst { bounds, isDragging, percentages } = this.state;\n\t\tconst iconCoordinates = this.iconCoordinates();\n\n\t\tconst classes = classnames(\n\t\t\t'components-focal-point-picker-control',\n\t\t\tclassName\n\t\t);\n\n\t\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<BaseControl\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ classes }\n\t\t\t>\n\t\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t\t<MediaContainer\n\t\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\t\tonKeyDown={ this.onKeyDown }\n\t\t\t\t\t\tonMouseDown={ this.onMouseDown }\n\t\t\t\t\t\tonBlur={ this.ifDraggingStop }\n\t\t\t\t\t\tref={ this.containerRef }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\tbounds={ bounds }\n\t\t\t\t\t\t\tvalue={ percentages.x + percentages.y }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Media\n\t\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\t\tmediaRef={ this.mediaRef }\n\t\t\t\t\t\t\tonLoad={ this.updateBounds }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\tcoordinates={ iconCoordinates }\n\t\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaContainer>\n\t\t\t\t</MediaWrapper>\n\t\t\t\t<Controls\n\t\t\t\t\tpercentages={ percentages }\n\t\t\t\t\tonChange={ this.onChangeAtControls }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t);\n\t}\n}\n\nFocalPointPicker.defaultProps = {\n\tautoPlay: true,\n\tvalue: {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\turl: null,\n};\n\nexport default withInstanceId( FocalPointPicker );\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["classnames","__","Component","createRef","withInstanceId","UP","DOWN","LEFT","RIGHT","BaseControl","Controls","FocalPoint","Grid","Media","MediaWrapper","MediaContainer","roundClamp","INITIAL_BOUNDS","FocalPointPicker","constructor","props","arguments","state","isDragging","bounds","percentages","value","containerRef","mediaRef","onMouseDown","startDrag","bind","onMouseUp","stopDrag","onKeyDown","onMouseMove","doDrag","ifDraggingStop","onChangeAtControls","updateValue","onChange","updateBounds","componentDidMount","defaultView","current","ownerDocument","addEventListener","componentDidUpdate","prevProps","url","x","y","setState","componentWillUnmount","removeEventListener","calculateBounds","clientWidth","clientHeight","dimensions","width","height","pickerDimensions","widthRatio","heightRatio","right","top","bottom","left","nextValue","callback","resolvedValue","resolvePoint","nextPercentage","parseFloat","toFixed","event","persist","focus","getValueFromPoint","pageX","pageY","shiftKey","onDragStart","onDragEnd","keyCode","includes","preventDefault","next","step","delta","axis","onDrag","point","byTenths","relativePoint","Math","max","min","nextX","nextY","containerNode","getBoundingClientRect","document","body","scrollTop","iconCoordinates","undefined","render","autoPlay","className","help","instanceId","label","classes","id","defaultProps"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport { withInstanceId } from '@wordpress/compose';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\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 { roundClamp } from '../utils/math';\nimport { INITIAL_BOUNDS } from './utils';\n\nexport class FocalPointPicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\tisDragging: false,\n\t\t\tbounds: INITIAL_BOUNDS,\n\t\t\tpercentages: props.value,\n\t\t};\n\n\t\tthis.containerRef = createRef();\n\t\tthis.mediaRef = createRef();\n\n\t\tthis.onMouseDown = this.startDrag.bind( this );\n\t\tthis.onMouseUp = this.stopDrag.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.onMouseMove = this.doDrag.bind( this );\n\t\tthis.ifDraggingStop = () => {\n\t\t\tif ( this.state.isDragging ) {\n\t\t\t\tthis.stopDrag();\n\t\t\t}\n\t\t};\n\t\tthis.onChangeAtControls = ( value ) => {\n\t\t\tthis.updateValue( value, () => {\n\t\t\t\tthis.props.onChange( this.state.percentages );\n\t\t\t} );\n\t\t};\n\n\t\tthis.updateBounds = this.updateBounds.bind( this );\n\t\tthis.updateValue = this.updateValue.bind( this );\n\t}\n\tcomponentDidMount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.addEventListener( 'resize', this.updateBounds );\n\n\t\t/\n\t\t * Set initial bound values.\n\t\t \n\t\t This is necessary for Safari:\n\t\t * https://github.com/WordPress/gutenberg/issues/25814\n\t\t /\n\t\tthis.updateBounds();\n\t}\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( prevProps.url !== this.props.url ) {\n\t\t\tthis.ifDraggingStop();\n\t\t}\n\t\t/\n\t\t * Handles cases where the incoming value changes.\n\t\t * An example is the values resetting based on an UNDO action.\n\t\t /\n\t\tconst {\n\t\t\tisDragging,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\t\tconst { value } = this.props;\n\t\tif ( ! isDragging && ( value.x !== x \|\| value.y !== y ) ) {\n\t\t\tthis.setState( { percentages: this.props.value } );\n\t\t}\n\t}\n\tcomponentWillUnmount() {\n\t\tconst { defaultView } = this.containerRef.current.ownerDocument;\n\t\tdefaultView.removeEventListener( 'resize', this.updateBounds );\n\t\tthis.ifDraggingStop();\n\t}\n\tcalculateBounds() {\n\t\tconst bounds = INITIAL_BOUNDS;\n\n\t\tif ( ! this.mediaRef.current ) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\t// Prevent division by zero when updateBounds runs in componentDidMount\n\t\tif (\n\t\t\tthis.mediaRef.current.clientWidth === 0 \|\|\n\t\t\tthis.mediaRef.current.clientHeight === 0\n\t\t) {\n\t\t\treturn bounds;\n\t\t}\n\n\t\tconst dimensions = {\n\t\t\twidth: this.mediaRef.current.clientWidth,\n\t\t\theight: this.mediaRef.current.clientHeight,\n\t\t};\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\n\t\tconst widthRatio = pickerDimensions.width / dimensions.width;\n\t\tconst heightRatio = pickerDimensions.height / dimensions.height;\n\n\t\tif ( heightRatio >= widthRatio ) {\n\t\t\tbounds.width = bounds.right = pickerDimensions.width;\n\t\t\tbounds.height = dimensions.height widthRatio;\n\t\t\tbounds.top = ( pickerDimensions.height - bounds.height ) / 2;\n\t\t\tbounds.bottom = bounds.top + bounds.height;\n\t\t} else {\n\t\t\tbounds.height = bounds.bottom = pickerDimensions.height;\n\t\t\tbounds.width = dimensions.width * heightRatio;\n\t\t\tbounds.left = ( pickerDimensions.width - bounds.width ) / 2;\n\t\t\tbounds.right = bounds.left + bounds.width;\n\t\t}\n\t\treturn bounds;\n\t}\n\tupdateValue( nextValue = {}, callback ) {\n\t\tconst resolvedValue =\n\t\t\tthis.props.resolvePoint?.( nextValue ) ?? nextValue;\n\n\t\tconst { x, y } = resolvedValue;\n\n\t\tconst nextPercentage = {\n\t\t\tx: parseFloat( x ).toFixed( 2 ),\n\t\t\ty: parseFloat( y ).toFixed( 2 ),\n\t\t};\n\n\t\tthis.setState( { percentages: nextPercentage }, callback );\n\t}\n\tupdateBounds() {\n\t\tthis.setState( {\n\t\t\tbounds: this.calculateBounds(),\n\t\t} );\n\t}\n\tstartDrag( event ) {\n\t\tevent.persist();\n\t\tthis.containerRef.current.focus();\n\t\tthis.setState( { isDragging: true } );\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.addEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.addEventListener( 'mousemove', this.onMouseMove );\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDragStart?.( value, event );\n\t}\n\tstopDrag( event ) {\n\t\tconst { ownerDocument } = this.containerRef.current;\n\t\townerDocument.removeEventListener( 'mouseup', this.onMouseUp );\n\t\townerDocument.removeEventListener( 'mousemove', this.onMouseMove );\n\t\tthis.setState( { isDragging: false }, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t\tthis.props.onDragEnd?.( event );\n\t}\n\tonKeyDown( event ) {\n\t\tconst { keyCode, shiftKey } = event;\n\t\tif ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;\n\n\t\tevent.preventDefault();\n\n\t\tconst next = { ...this.state.percentages };\n\t\tconst step = shiftKey ? 0.1 : 0.01;\n\t\tconst delta = keyCode === UP \|\| keyCode === LEFT ? -1 * step : step;\n\t\tconst axis = keyCode === UP \|\| keyCode === DOWN ? 'y' : 'x';\n\t\tconst value = parseFloat( next[ axis ] ) + delta;\n\n\t\tnext[ axis ] = roundClamp( value, 0, 1, step );\n\n\t\tthis.updateValue( next, () => {\n\t\t\tthis.props.onChange( this.state.percentages );\n\t\t} );\n\t}\n\tdoDrag( event ) {\n\t\t// Prevents text-selection when dragging.\n\t\tevent.preventDefault();\n\t\tconst value = this.getValueFromPoint(\n\t\t\t{ x: event.pageX, y: event.pageY },\n\t\t\tevent.shiftKey\n\t\t);\n\t\tthis.updateValue( value );\n\t\tthis.props.onDrag?.( value, event );\n\t}\n\tgetValueFromPoint( point, byTenths ) {\n\t\tconst { bounds } = this.state;\n\n\t\tconst pickerDimensions = this.pickerDimensions();\n\t\tconst relativePoint = {\n\t\t\tleft: point.x - pickerDimensions.left,\n\t\t\ttop: point.y - pickerDimensions.top,\n\t\t};\n\n\t\tconst left = Math.max(\n\t\t\tbounds.left,\n\t\t\tMath.min( relativePoint.left, bounds.right )\n\t\t);\n\t\tconst top = Math.max(\n\t\t\tbounds.top,\n\t\t\tMath.min( relativePoint.top, bounds.bottom )\n\t\t);\n\n\t\tlet nextX =\n\t\t\t( left - bounds.left ) /\n\t\t\t( pickerDimensions.width - bounds.left * 2 );\n\t\tlet nextY =\n\t\t\t( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );\n\n\t\t// Enables holding shift to jump values by 10%\n\t\tconst step = byTenths ? 0.1 : 0.01;\n\n\t\tnextX = roundClamp( nextX, 0, 1, step );\n\t\tnextY = roundClamp( nextY, 0, 1, step );\n\n\t\treturn { x: nextX, y: nextY };\n\t}\n\tpickerDimensions() {\n\t\tconst containerNode = this.containerRef.current;\n\n\t\tif ( ! containerNode ) {\n\t\t\treturn {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t};\n\t\t}\n\n\t\tconst { clientHeight, clientWidth } = containerNode;\n\t\tconst { top, left } = containerNode.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: clientWidth,\n\t\t\theight: clientHeight,\n\t\t\ttop: top + document.body.scrollTop,\n\t\t\tleft,\n\t\t};\n\t}\n\ticonCoordinates() {\n\t\tconst {\n\t\t\tbounds,\n\t\t\tpercentages: { x, y },\n\t\t} = this.state;\n\n\t\tif ( bounds.left === undefined \|\| bounds.top === undefined ) {\n\t\t\treturn {\n\t\t\t\tleft: '50%',\n\t\t\t\ttop: '50%',\n\t\t\t};\n\t\t}\n\n\t\tconst { width, height } = this.pickerDimensions();\n\t\treturn {\n\t\t\tleft: x * ( width - bounds.left * 2 ) + bounds.left,\n\t\t\ttop: y * ( height - bounds.top * 2 ) + bounds.top,\n\t\t};\n\t}\n\trender() {\n\t\tconst {\n\t\t\tautoPlay,\n\t\t\tclassName,\n\t\t\thelp,\n\t\t\tinstanceId,\n\t\t\tlabel,\n\t\t\turl,\n\t\t} = this.props;\n\t\tconst { bounds, isDragging, percentages } = this.state;\n\t\tconst iconCoordinates = this.iconCoordinates();\n\n\t\tconst classes = classnames(\n\t\t\t'components-focal-point-picker-control',\n\t\t\tclassName\n\t\t);\n\n\t\tconst id = `inspector-focal-point-picker-control-${ instanceId }`;\n\n\t\treturn (\n\t\t\t<BaseControl\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ help }\n\t\t\t\tclassName={ classes }\n\t\t\t>\n\t\t\t\t<MediaWrapper className=\"components-focal-point-picker-wrapper\">\n\t\t\t\t\t<MediaContainer\n\t\t\t\t\t\tclassName=\"components-focal-point-picker\"\n\t\t\t\t\t\tonKeyDown={ this.onKeyDown }\n\t\t\t\t\t\tonMouseDown={ this.onMouseDown }\n\t\t\t\t\t\tonBlur={ this.ifDraggingStop }\n\t\t\t\t\t\tref={ this.containerRef }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\tbounds={ bounds }\n\t\t\t\t\t\t\tvalue={ percentages.x + percentages.y }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Media\n\t\t\t\t\t\t\talt={ __( 'Media preview' ) }\n\t\t\t\t\t\t\tautoPlay={ autoPlay }\n\t\t\t\t\t\t\tmediaRef={ this.mediaRef }\n\t\t\t\t\t\t\tonLoad={ this.updateBounds }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\tcoordinates={ iconCoordinates }\n\t\t\t\t\t\t\tisDragging={ isDragging }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaContainer>\n\t\t\t\t</MediaWrapper>\n\t\t\t\t<Controls\n\t\t\t\t\tpercentages={ percentages }\n\t\t\t\t\tonChange={ this.onChangeAtControls }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t);\n\t}\n}\n\nFocalPointPicker.defaultProps = {\n\tautoPlay: true,\n\tvalue: {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n\turl: null,\n};\n\nexport default withInstanceId( FocalPointPicker );\n"]}

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

@@ -27,7 +27,7 @@ import { isVideoType } from './utils';
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
 const FOCAL_POINT_UNITS = [{
-  default: '50',
+  default: 50,
   label: '%',
   value: '%'
 }];
@@ -57,7 +57,7 @@ function FocalPointPicker(props) {
         setFocalPointPickerTooltipShown(true);
       }
     });
-  }, []); // Animated coordinates for drag handle
+  }, []); // Animated coordinates for drag handle.
   const pan = useRef(new Animated.ValueXY()).current;
   /**
@@ -72,7 +72,7 @@ function FocalPointPicker(props) {
         y: focalPoint.y * containerSize.height
       });
     }
-  }, [focalPoint, containerSize]); // Pan responder to manage drag handle interactivity
+  }, [focalPoint, containerSize]); // Pan responder to manage drag handle interactivity.
   const panResponder = useMemo(() => PanResponder.create({
     onStartShouldSetPanResponder: () => true,
@@ -92,11 +92,11 @@ function FocalPointPicker(props) {
       pan.setValue({
         x,
         y
-      }); // Set cursor to tap location
+      }); // Set cursor to tap location.
-      pan.extractOffset(); // Set offset to current value
+      pan.extractOffset(); // Set offset to current value.
     },
-    // Move cursor to match delta drag
+    // Move cursor to match delta drag.
     onPanResponderMove: Animated.event([null, {
       dx: pan.x,
       dy: pan.y
@@ -105,7 +105,7 @@ function FocalPointPicker(props) {
     }),
     onPanResponderRelease: event => {
       shouldEnableBottomSheetScroll(true);
-      pan.flattenOffset(); // Flatten offset into value
+      pan.flattenOffset(); // Flatten offset into value.
       const {
         pageX,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["Animated","PanResponder","View","Video","clamp","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","current","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\nimport { clamp } from 'lodash';\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';\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\tlet locationPageOffsetX = useRef().current;\n\tlet locationPageOffsetY = useRef().current;\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 ] );\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 = pageX - x;\n\t\t\t\t\tlocationPageOffsetY = 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://git.io/JtWmi\n\t\t\t\t\tconst x = pageX - locationPageOffsetX;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY;\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://git.io/JTe4A\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width \|\| 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width \|\| 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height \|\| 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height \|\| 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width \|\|\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://git.io/Jt6Dr\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["Animated","PanResponder","View","Video","clamp","requestFocalPointPickerTooltipShown","setFocalPointPickerTooltipShown","__","Image","UnitControl","useRef","useState","useMemo","useEffect","usePreferredColorSchemeStyle","FocalPoint","Tooltip","styles","isVideoType","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","current","locationPageOffsetY","videoRef","tooltipShown","pan","ValueXY","setValue","x","width","y","height","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\nimport { clamp } from 'lodash';\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';\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\tlet locationPageOffsetX = useRef().current;\n\tlet locationPageOffsetY = useRef().current;\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 ] );\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 = pageX - x;\n\t\t\t\t\tlocationPageOffsetY = 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://git.io/JtWmi\n\t\t\t\t\tconst x = pageX - locationPageOffsetX;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY;\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://git.io/JTe4A\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width \|\| 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width \|\| 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height \|\| 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height \|\| 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width \|\|\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://git.io/Jt6Dr\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}