npm - @wordpress/components - Versions diffs - 19.4.1 → 19.7.0-next.e230fbab09.0 - Mend

@wordpress/components 19.4.1 → 19.7.0-next.e230fbab09.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 (929) hide show

package/build/divider/component.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Divider = void 0;
 var _element = require("@wordpress/element");
@@ -25,7 +25,7 @@ var _styles = require("./styles");
 /**
  * Internal dependencies
  */
-function Divider(props, forwardedRef) {
+function UnconnectedDivider(props, forwardedRef) {
   const contextProps = (0, _context.useContextSystem)(props, 'Divider');
   return (0, _element.createElement)(_reakit.Separator, (0, _extends2.default)({
     as: _styles.DividerView
@@ -57,7 +57,8 @@ function Divider(props, forwardedRef) {
  */
-const ConnectedDivider = (0, _context.contextConnect)(Divider, 'Divider');
-var _default = ConnectedDivider;
+const Divider = (0, _context.contextConnect)(UnconnectedDivider, 'Divider');
+exports.Divider = Divider;
+var _default = Divider;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/divider/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["~~Divider~~","props","forwardedRef","contextProps","DividerView","~~ConnectedDivider~~"],"mappings":";;;;;;;;;;;;;AAIA;;AAMA;;AAKA;;AAfA;AACA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,~~OAAT~~,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,SAAzB,CAArB;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,EAAE,EAAGG;AADN,KAEMD,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;~~AACA~~,MAAMG,~~gBAAgB~~,GAAG,6BAAgBL,~~OAAhB~~,~~EAAyB~~,~~SAAzB~~,~~CAAzB;eAEeK~~,gB","sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\nimport type { ~~Ref~~ } from 'react';\n\n/\n Internal dependencies\n /\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction ~~Divider~~(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: ~~Ref~~< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/\n `Divider` is a layout component that separates groups of related content.\n \n @example\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n \n function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\~~nconst~~ ~~ConnectedDivider~~ = contextConnect( ~~Divider~~, 'Divider' );\n\nexport default ~~ConnectedDivider~~;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["UnconnectedDivider","props","forwardedRef","contextProps","DividerView","Divider"],"mappings":";;;;;;;;;;;;;AAIA;;AAMA;;AAKA;;AAfA;AACA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,kBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAG,+BAAkBF,KAAlB,EAAyB,SAAzB,CAArB;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,EAAE,EAAGG;AADN,KAEMD,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,OAAO,GAAG,6BAAgBL,kBAAhB,EAAoC,SAApC,CAAhB;;eAEQK,O","sourcesContent":["/*\n External dependencies\n /\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\nimport type { ForwardedRef } from 'react';\n\n/\n Internal dependencies\n /\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction UnconnectedDivider(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/\n `Divider` is a layout component that separates groups of related content.\n \n @example\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n \n function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const Divider = contextConnect( UnconnectedDivider, 'Divider' );\n\nexport default Divider;\n"]}

package/build/draggable/index.js CHANGED Viewed

@@ -139,7 +139,7 @@ function Draggable(_ref) {
       x = elementLeftOffset - clonePadding;
       y = elementTopOffset - clonePadding;
-      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`; // Hack: Remove iFrames as it's causing the embeds drag clone to freeze
+      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`; // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
       Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode.removeChild(child));
       cloneWrapper.appendChild(clone); // Inject the cloneWrapper into the DOM.
@@ -155,7 +155,7 @@ function Draggable(_ref) {
      */
     function over(e) {
-      //Skip doing any work if mouse has not moved.
+      // Skip doing any work if mouse has not moved.
       if (cursorLeft === e.clientX && cursorTop === e.clientY) {
         return;
       }
@@ -191,7 +191,7 @@ function Draggable(_ref) {
     }
     cleanup.current = () => {
-      // Remove drag clone
+      // Remove drag clone.
       if (cloneWrapper && cloneWrapper.parentNode) {
         cloneWrapper.parentNode.removeChild(cloneWrapper);
       }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/draggable/index.js"],"names":["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":["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/elevation/component.js CHANGED Viewed

@@ -23,7 +23,7 @@ var _hook = require("./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) {
   const elevationProps = (0, _hook.useElevation)(props);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/elevation/component.js"],"names":["Elevation","props","forwardedRef","elevationProps","ConnectedElevation"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,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,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","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":["Elevation","props","forwardedRef","elevationProps","ConnectedElevation"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,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,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","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/flex/flex/component.js CHANGED Viewed

@@ -25,7 +25,7 @@ var _view = require("../../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) {
   const {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex/component.js"],"names":["Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,6BAAWF,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,GAAG,6BAAgBR,IAAhB,EAAsB,MAAtB,CAAtB;eAEeQ,a","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":["Flex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","ConnectedFlex"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,6BAAWF,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,GAAG,6BAAgBR,IAAhB,EAAsB,MAAtB,CAAtB;eAEeQ,a","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/flex/flex-block/component.js CHANGED Viewed

@@ -23,7 +23,7 @@ var _hook = require("./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) {
   const flexBlockProps = (0, _hook.useFlexBlock)(props);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.js"],"names":["FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","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":["FlexBlock","props","forwardedRef","flexBlockProps","ConnectedFlexBlock"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","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/flex/flex-item/component.js CHANGED Viewed

@@ -23,7 +23,7 @@ var _hook = require("./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) {
   const flexItemProps = (0, _hook.useFlexItem)(props);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flex/flex-item/component.js"],"names":["FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAG,uBAAaF,KAAb,CAAtB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAG,6BAAgBJ,QAAhB,EAA0B,UAA1B,CAA1B;eAEeI,iB","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":["FlexItem","props","forwardedRef","flexItemProps","ConnectedFlexItem"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAMC,aAAa,GAAG,uBAAaF,KAAb,CAAtB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,aAAX;AAA2B,IAAA,GAAG,EAAGD;AAAjC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,iBAAiB,GAAG,6BAAgBJ,QAAhB,EAA0B,UAA1B,CAA1B;eAEeI,iB","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/flyout/flyout/component.js CHANGED Viewed

@@ -41,7 +41,7 @@ var _hook = require("./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) {
   const {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flyout/flyout/component.js"],"names":["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":";;;;;;;;;AASA;;;;AALA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,SAASA,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,MASF,qBAAWT,KAAX,CATJ;AAWA,QAAMU,cAAc,GAAG,mCAAwB;AAC9CC,IAAAA,QAAQ,EAAEH,WAAW,CAACI;AADwB,GAAxB,CAAvB;AAIA,QAAMC,QAAQ,GAAI,UAAUL,WAAW,CAACM,MAAQ,EAAhD;AACA,QAAMC,OAAO,GAAGX,KAAK,IAAIS,QAAzB;AAEA,QAAMG,YAAY,GAAG,sBACpB,OAAQ;AACPZ,IAAAA,KAAK,EAAEW,OADA;AAEPP,IAAAA;AAFO,GAAR,CADoB,EAKpB,CAAEO,OAAF,EAAWP,WAAX,CALoB,CAArB;AAQA,QAAMS,cAAc,GAAG,0BACpBC,YAAF,IAAoB;AACnB,WAAO,2BAAcX,OAAd,EAAuBW,YAAvB,CAAP;AACA,GAHqB,EAItB,CAAEX,OAAF,CAJsB,CAAvB;AAOA,8BAAiB,MAAM;AACtBD,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAIE,WAAW,CAACW,OAAhB,CAAf;AACA,GAFD,EAEG,CAAEX,WAAW,CAACW,OAAd,CAFH;AAIA,SACC,4BAAC,uBAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGH;AAAhC,KACGT,OAAO,IACR,4BAAC,yBAAD,6BACMC,WADN;AAEC,IAAA,GAAG,EAAGD,OAAO,CAACa;AAFf,KAGMb,OAAO,CAACP,KAHd,GAKGiB,cALH,CAFF,EAUC,4BAAC,cAAD,QACC,4BAAC,sBAAD;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,GAAG,6BAAgBtB,MAAhB,EAAwB,QAAxB,CAAxB;eAEesB,e","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":["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":";;;;;;;;;AASA;;;;AALA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,SAASA,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,MASF,qBAAWT,KAAX,CATJ;AAWA,QAAMU,cAAc,GAAG,mCAAwB;AAC9CC,IAAAA,QAAQ,EAAEH,WAAW,CAACI;AADwB,GAAxB,CAAvB;AAIA,QAAMC,QAAQ,GAAI,UAAUL,WAAW,CAACM,MAAQ,EAAhD;AACA,QAAMC,OAAO,GAAGX,KAAK,IAAIS,QAAzB;AAEA,QAAMG,YAAY,GAAG,sBACpB,OAAQ;AACPZ,IAAAA,KAAK,EAAEW,OADA;AAEPP,IAAAA;AAFO,GAAR,CADoB,EAKpB,CAAEO,OAAF,EAAWP,WAAX,CALoB,CAArB;AAQA,QAAMS,cAAc,GAAG,0BACpBC,YAAF,IAAoB;AACnB,WAAO,2BAAcX,OAAd,EAAuBW,YAAvB,CAAP;AACA,GAHqB,EAItB,CAAEX,OAAF,CAJsB,CAAvB;AAOA,8BAAiB,MAAM;AACtBD,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAIE,WAAW,CAACW,OAAhB,CAAf;AACA,GAFD,EAEG,CAAEX,WAAW,CAACW,OAAd,CAFH;AAIA,SACC,4BAAC,uBAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGH;AAAhC,KACGT,OAAO,IACR,4BAAC,yBAAD,6BACMC,WADN;AAEC,IAAA,GAAG,EAAGD,OAAO,CAACa;AAFf,KAGMb,OAAO,CAACP,KAHd,GAKGiB,cALH,CAFF,EAUC,4BAAC,cAAD,QACC,4BAAC,sBAAD;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,GAAG,6BAAgBtB,MAAhB,EAAwB,QAAxB,CAAxB;eAEesB,e","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/flyout/flyout-content/component.js CHANGED Viewed

@@ -24,7 +24,7 @@ var _context2 = require("../../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) {
   const {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/flyout/flyout-content/component.js"],"names":["FlyoutContent","props","forwardedRef","children","elevation","maxWidth","style","otherProps","label","flyoutState","Error","showContent","visible","animating","ConnectedFlyoutContent"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA,SAASA,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,MAMF,gCAAkBN,KAAlB,EAAyB,eAAzB,CANJ;AAQA,QAAM;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,gCAA/B;;AAEA,MAAK,CAAEA,WAAP,EAAqB;AACpB,UAAM,IAAIC,KAAJ,CACL,sDADK,CAAN;AAGA;;AAED,QAAMC,WAAW,GAAGF,WAAW,CAACG,OAAZ,IAAuBH,WAAW,CAACI,SAAvD;AAEA,SACC,4BAAC,yBAAD;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,4BAAC,gBAAD;AAAU,IAAA,SAAS,EAAGP,SAAtB;AAAkC,IAAA,GAAG,EAAGF;AAAxC,KACGC,QADH,CAVF,CADD;AAiBA;;AAED,MAAMW,sBAAsB,GAAG,8BAAgBd,aAAhB,EAA+B,eAA/B,CAA/B;eAEec,sB","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":["FlyoutContent","props","forwardedRef","children","elevation","maxWidth","style","otherProps","label","flyoutState","Error","showContent","visible","animating","ConnectedFlyoutContent"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA,SAASA,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,MAMF,gCAAkBN,KAAlB,EAAyB,eAAzB,CANJ;AAQA,QAAM;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,gCAA/B;;AAEA,MAAK,CAAEA,WAAP,EAAqB;AACpB,UAAM,IAAIC,KAAJ,CACL,sDADK,CAAN;AAGA;;AAED,QAAMC,WAAW,GAAGF,WAAW,CAACG,OAAZ,IAAuBH,WAAW,CAACI,SAAvD;AAEA,SACC,4BAAC,yBAAD;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,4BAAC,gBAAD;AAAU,IAAA,SAAS,EAAGP,SAAtB;AAAkC,IAAA,GAAG,EAAGF;AAAxC,KACGC,QADH,CAVF,CADD;AAiBA;;AAED,MAAMW,sBAAsB,GAAG,8BAAgBd,aAAhB,EAA+B,eAA/B,CAA/B;eAEec,sB","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/focal-point-picker/index.js CHANGED Viewed

@@ -66,8 +66,9 @@ class FocalPointPicker extends _element.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);
@@ -161,18 +162,22 @@ class FocalPointPicker extends _element.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() {
@@ -182,7 +187,7 @@ class FocalPointPicker extends _element.Component {
   }
   startDrag(event) {
-    var _this$props$onDragSta, _this$props;
+    var _this$props$onDragSta, _this$props2;
     event.persist();
     this.containerRef.current.focus();
@@ -199,11 +204,11 @@ class FocalPointPicker extends _element.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
@@ -215,7 +220,7 @@ class FocalPointPicker extends _element.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) {
@@ -232,12 +237,13 @@ class FocalPointPicker extends _element.Component {
     const axis = keyCode === _keycodes.UP || keyCode === _keycodes.DOWN ? 'y' : 'x';
     const value = parseFloat(next[axis]) + delta;
     next[axis] = (0, _math.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();
@@ -246,7 +252,7 @@ class FocalPointPicker extends _element.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/focal-point-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.js"],"names":["FocalPointPicker","Component","constructor","props","arguments","state","isDragging","bounds","INITIAL_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","UP","DOWN","LEFT","RIGHT","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\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":["FocalPointPicker","Component","constructor","props","arguments","state","isDragging","bounds","INITIAL_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","UP","DOWN","LEFT","RIGHT","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":";;;;;;;;;AASA;;AANA;;AAKA;;AAEA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AA1BA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAaO,MAAMA,gBAAN,SAA+BC,kBAA/B,CAAyC;AAC/CC,EAAAA,WAAW,CAAEC,KAAF,EAAU;AACpB,UAAO,GAAGC,SAAV;AAEA,SAAKC,KAAL,GAAa;AACZC,MAAAA,UAAU,EAAE,KADA;AAEZC,MAAAA,MAAM,EAAEC,qBAFI;AAGZC,MAAAA,WAAW,EAAEN,KAAK,CAACO;AAHP,KAAb;AAMA,SAAKC,YAAL,GAAoB,yBAApB;AACA,SAAKC,QAAL,GAAgB,yBAAhB;AAEA,SAAKC,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,KAAKhB,KAAL,CAAWC,UAAhB,EAA6B;AAC5B,aAAKW,QAAL;AACA;AACD,KAJD;;AAKA,SAAKK,kBAAL,GAA4BZ,KAAF,IAAa;AACtC,WAAKa,WAAL,CAAkBb,KAAlB,EAAyB,MAAM;AAC9B,aAAKP,KAAL,CAAWqB,QAAX,CAAqB,KAAKnB,KAAL,CAAWI,WAAhC;AACA,OAFD;AAGA,KAJD;;AAMA,SAAKgB,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,KAAK9B,KAAL,CAAW8B,GAAlC,EAAwC;AACvC,WAAKZ,cAAL;AACA;AACD;AACF;AACA;AACA;;;AACE,UAAM;AACLf,MAAAA,UADK;AAELG,MAAAA,WAAW,EAAE;AAAEyB,QAAAA,CAAF;AAAKC,QAAAA;AAAL;AAFR,QAGF,KAAK9B,KAHT;AAIA,UAAM;AAAEK,MAAAA;AAAF,QAAY,KAAKP,KAAvB;;AACA,QAAK,CAAEG,UAAF,KAAkBI,KAAK,CAACwB,CAAN,KAAYA,CAAZ,IAAiBxB,KAAK,CAACyB,CAAN,KAAYA,CAA/C,CAAL,EAA0D;AACzD,WAAKC,QAAL,CAAe;AAAE3B,QAAAA,WAAW,EAAE,KAAKN,KAAL,CAAWO;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,UAAMhC,MAAM,GAAGC,qBAAf;;AAEA,QAAK,CAAE,KAAKI,QAAL,CAAcgB,OAArB,EAA+B;AAC9B,aAAOrB,MAAP;AACA,KALgB,CAOjB;;;AACA,QACC,KAAKK,QAAL,CAAcgB,OAAd,CAAsBY,WAAtB,KAAsC,CAAtC,IACA,KAAK5B,QAAL,CAAcgB,OAAd,CAAsBa,YAAtB,KAAuC,CAFxC,EAGE;AACD,aAAOlC,MAAP;AACA;;AAED,UAAMmC,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;AAChCvC,MAAAA,MAAM,CAACoC,KAAP,GAAepC,MAAM,CAACyC,KAAP,GAAeH,gBAAgB,CAACF,KAA/C;AACApC,MAAAA,MAAM,CAACqC,MAAP,GAAgBF,UAAU,CAACE,MAAX,GAAoBE,UAApC;AACAvC,MAAAA,MAAM,CAAC0C,GAAP,GAAa,CAAEJ,gBAAgB,CAACD,MAAjB,GAA0BrC,MAAM,CAACqC,MAAnC,IAA8C,CAA3D;AACArC,MAAAA,MAAM,CAAC2C,MAAP,GAAgB3C,MAAM,CAAC0C,GAAP,GAAa1C,MAAM,CAACqC,MAApC;AACA,KALD,MAKO;AACNrC,MAAAA,MAAM,CAACqC,MAAP,GAAgBrC,MAAM,CAAC2C,MAAP,GAAgBL,gBAAgB,CAACD,MAAjD;AACArC,MAAAA,MAAM,CAACoC,KAAP,GAAeD,UAAU,CAACC,KAAX,GAAmBI,WAAlC;AACAxC,MAAAA,MAAM,CAAC4C,IAAP,GAAc,CAAEN,gBAAgB,CAACF,KAAjB,GAAyBpC,MAAM,CAACoC,KAAlC,IAA4C,CAA1D;AACApC,MAAAA,MAAM,CAACyC,KAAP,GAAezC,MAAM,CAAC4C,IAAP,GAAc5C,MAAM,CAACoC,KAApC;AACA;;AACD,WAAOpC,MAAP;AACA;;AACDgB,EAAAA,WAAW,GAA6B;AAAA;;AAAA,QAA3B6B,SAA2B,uEAAf,EAAe;AAAA,QAAXC,QAAW;AACvC,UAAMC,aAAa,sDAClB,oBAAKnD,KAAL,EAAWoD,YADO,2DAClB,yCAA2BH,SAA3B,CADkB,yEACwBA,SAD3C;AAGA,UAAM;AAAElB,MAAAA,CAAF;AAAKC,MAAAA;AAAL,QAAWmB,aAAjB;AAEA,UAAME,cAAc,GAAG;AACtBtB,MAAAA,CAAC,EAAEuB,UAAU,CAAEvB,CAAF,CAAV,CAAgBwB,OAAhB,CAAyB,CAAzB,CADmB;AAEtBvB,MAAAA,CAAC,EAAEsB,UAAU,CAAEtB,CAAF,CAAV,CAAgBuB,OAAhB,CAAyB,CAAzB;AAFmB,KAAvB;AAKA,SAAKtB,QAAL,CAAe;AAAE3B,MAAAA,WAAW,EAAE+C;AAAf,KAAf,EAAgDH,QAAhD;AACA;;AACD5B,EAAAA,YAAY,GAAG;AACd,SAAKW,QAAL,CAAe;AACd7B,MAAAA,MAAM,EAAE,KAAKgC,eAAL;AADM,KAAf;AAGA;;AACDzB,EAAAA,SAAS,CAAE6C,KAAF,EAAU;AAAA;;AAClBA,IAAAA,KAAK,CAACC,OAAN;AACA,SAAKjD,YAAL,CAAkBiB,OAAlB,CAA0BiC,KAA1B;AACA,SAAKzB,QAAL,CAAe;AAAE9B,MAAAA,UAAU,EAAE;AAAd,KAAf;AACA,UAAM;AAAEuB,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,KAAKoD,iBAAL,CACb;AAAE5B,MAAAA,CAAC,EAAEyB,KAAK,CAACI,KAAX;AAAkB5B,MAAAA,CAAC,EAAEwB,KAAK,CAACK;AAA3B,KADa,EAEbL,KAAK,CAACM,QAFO,CAAd;AAIA,SAAK1C,WAAL,CAAkBb,KAAlB;AACA,kDAAKP,KAAL,EAAW+D,WAAX,mGAA0BxD,KAA1B,EAAiCiD,KAAjC;AACA;;AACD1C,EAAAA,QAAQ,CAAE0C,KAAF,EAAU;AAAA;;AACjB,UAAM;AAAE9B,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;AAAE9B,MAAAA,UAAU,EAAE;AAAd,KAAf,EAAsC,MAAM;AAC3C,WAAKH,KAAL,CAAWqB,QAAX,CAAqB,KAAKnB,KAAL,CAAWI,WAAhC;AACA,KAFD;AAGA,kDAAKN,KAAL,EAAWgE,SAAX,mGAAwBR,KAAxB;AACA;;AACDzC,EAAAA,SAAS,CAAEyC,KAAF,EAAU;AAClB,UAAM;AAAES,MAAAA,OAAF;AAAWH,MAAAA;AAAX,QAAwBN,KAA9B;AACA,QAAK,CAAE,CAAEU,YAAF,EAAMC,cAAN,EAAYC,cAAZ,EAAkBC,eAAlB,EAA0BC,QAA1B,CAAoCL,OAApC,CAAP,EAAuD;AAEvDT,IAAAA,KAAK,CAACe,cAAN;AAEA,UAAMC,IAAI,GAAG,EAAE,GAAG,KAAKtE,KAAL,CAAWI;AAAhB,KAAb;AACA,UAAMmE,IAAI,GAAGX,QAAQ,GAAG,GAAH,GAAS,IAA9B;AACA,UAAMY,KAAK,GAAGT,OAAO,KAAKC,YAAZ,IAAkBD,OAAO,KAAKG,cAA9B,GAAqC,CAAC,CAAD,GAAKK,IAA1C,GAAiDA,IAA/D;AACA,UAAME,IAAI,GAAGV,OAAO,KAAKC,YAAZ,IAAkBD,OAAO,KAAKE,cAA9B,GAAqC,GAArC,GAA2C,GAAxD;AACA,UAAM5D,KAAK,GAAG+C,UAAU,CAAEkB,IAAI,CAAEG,IAAF,CAAN,CAAV,GAA6BD,KAA3C;AAEAF,IAAAA,IAAI,CAAEG,IAAF,CAAJ,GAAe,sBAAYpE,KAAZ,EAAmB,CAAnB,EAAsB,CAAtB,EAAyBkE,IAAzB,CAAf;AAEA,SAAKrD,WAAL,CAAkBoD,IAAlB,EAAwB,MAAM;AAC7B,WAAKxE,KAAL,CAAWqB,QAAX,CAAqB,KAAKnB,KAAL,CAAWI,WAAhC;AACA,KAFD;AAGA;;AACDW,EAAAA,MAAM,CAAEuC,KAAF,EAAU;AAAA;;AACf;AACAA,IAAAA,KAAK,CAACe,cAAN;AACA,UAAMhE,KAAK,GAAG,KAAKoD,iBAAL,CACb;AAAE5B,MAAAA,CAAC,EAAEyB,KAAK,CAACI,KAAX;AAAkB5B,MAAAA,CAAC,EAAEwB,KAAK,CAACK;AAA3B,KADa,EAEbL,KAAK,CAACM,QAFO,CAAd;AAIA,SAAK1C,WAAL,CAAkBb,KAAlB;AACA,+CAAKP,KAAL,EAAW4E,MAAX,6FAAqBrE,KAArB,EAA4BiD,KAA5B;AACA;;AACDG,EAAAA,iBAAiB,CAAEkB,KAAF,EAASC,QAAT,EAAoB;AACpC,UAAM;AAAE1E,MAAAA;AAAF,QAAa,KAAKF,KAAxB;AAEA,UAAMwC,gBAAgB,GAAG,KAAKA,gBAAL,EAAzB;AACA,UAAMqC,aAAa,GAAG;AACrB/B,MAAAA,IAAI,EAAE6B,KAAK,CAAC9C,CAAN,GAAUW,gBAAgB,CAACM,IADZ;AAErBF,MAAAA,GAAG,EAAE+B,KAAK,CAAC7C,CAAN,GAAUU,gBAAgB,CAACI;AAFX,KAAtB;AAKA,UAAME,IAAI,GAAGgC,IAAI,CAACC,GAAL,CACZ7E,MAAM,CAAC4C,IADK,EAEZgC,IAAI,CAACE,GAAL,CAAUH,aAAa,CAAC/B,IAAxB,EAA8B5C,MAAM,CAACyC,KAArC,CAFY,CAAb;AAIA,UAAMC,GAAG,GAAGkC,IAAI,CAACC,GAAL,CACX7E,MAAM,CAAC0C,GADI,EAEXkC,IAAI,CAACE,GAAL,CAAUH,aAAa,CAACjC,GAAxB,EAA6B1C,MAAM,CAAC2C,MAApC,CAFW,CAAZ;AAKA,QAAIoC,KAAK,GACR,CAAEnC,IAAI,GAAG5C,MAAM,CAAC4C,IAAhB,KACEN,gBAAgB,CAACF,KAAjB,GAAyBpC,MAAM,CAAC4C,IAAP,GAAc,CADzC,CADD;AAGA,QAAIoC,KAAK,GACR,CAAEtC,GAAG,GAAG1C,MAAM,CAAC0C,GAAf,KAAyBJ,gBAAgB,CAACD,MAAjB,GAA0BrC,MAAM,CAAC0C,GAAP,GAAa,CAAhE,CADD,CArBoC,CAwBpC;;AACA,UAAM2B,IAAI,GAAGK,QAAQ,GAAG,GAAH,GAAS,IAA9B;AAEAK,IAAAA,KAAK,GAAG,sBAAYA,KAAZ,EAAmB,CAAnB,EAAsB,CAAtB,EAAyBV,IAAzB,CAAR;AACAW,IAAAA,KAAK,GAAG,sBAAYA,KAAZ,EAAmB,CAAnB,EAAsB,CAAtB,EAAyBX,IAAzB,CAAR;AAEA,WAAO;AAAE1C,MAAAA,CAAC,EAAEoD,KAAL;AAAYnD,MAAAA,CAAC,EAAEoD;AAAf,KAAP;AACA;;AACD1C,EAAAA,gBAAgB,GAAG;AAClB,UAAM2C,aAAa,GAAG,KAAK7E,YAAL,CAAkBiB,OAAxC;;AAEA,QAAK,CAAE4D,aAAP,EAAuB;AACtB,aAAO;AACN7C,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,QAAgCgD,aAAtC;AACA,UAAM;AAAEvC,MAAAA,GAAF;AAAOE,MAAAA;AAAP,QAAgBqC,aAAa,CAACC,qBAAd,EAAtB;AAEA,WAAO;AACN9C,MAAAA,KAAK,EAAEH,WADD;AAENI,MAAAA,MAAM,EAAEH,YAFF;AAGNQ,MAAAA,GAAG,EAAEA,GAAG,GAAGyC,QAAQ,CAACC,IAAT,CAAcC,SAHnB;AAINzC,MAAAA;AAJM,KAAP;AAMA;;AACD0C,EAAAA,eAAe,GAAG;AACjB,UAAM;AACLtF,MAAAA,MADK;AAELE,MAAAA,WAAW,EAAE;AAAEyB,QAAAA,CAAF;AAAKC,QAAAA;AAAL;AAFR,QAGF,KAAK9B,KAHT;;AAKA,QAAKE,MAAM,CAAC4C,IAAP,KAAgB2C,SAAhB,IAA6BvF,MAAM,CAAC0C,GAAP,KAAe6C,SAAjD,EAA6D;AAC5D,aAAO;AACN3C,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,GAAGpC,MAAM,CAAC4C,IAAP,GAAc,CAA3B,CAAD,GAAkC5C,MAAM,CAAC4C,IADzC;AAENF,MAAAA,GAAG,EAAEd,CAAC,IAAKS,MAAM,GAAGrC,MAAM,CAAC0C,GAAP,GAAa,CAA3B,CAAD,GAAkC1C,MAAM,CAAC0C;AAFxC,KAAP;AAIA;;AACD8C,EAAAA,MAAM,GAAG;AACR,UAAM;AACLC,MAAAA,QADK;AAELC,MAAAA,SAFK;AAGLC,MAAAA,IAHK;AAILC,MAAAA,UAJK;AAKLC,MAAAA,KALK;AAMLnE,MAAAA;AANK,QAOF,KAAK9B,KAPT;AAQA,UAAM;AAAEI,MAAAA,MAAF;AAAUD,MAAAA,UAAV;AAAsBG,MAAAA;AAAtB,QAAsC,KAAKJ,KAAjD;AACA,UAAMwF,eAAe,GAAG,KAAKA,eAAL,EAAxB;AAEA,UAAMQ,OAAO,GAAG,yBACf,uCADe,EAEfJ,SAFe,CAAhB;AAKA,UAAMK,EAAE,GAAI,wCAAwCH,UAAY,EAAhE;AAEA,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAGC,KADT;AAEC,MAAA,EAAE,EAAGE,EAFN;AAGC,MAAA,IAAI,EAAGJ,IAHR;AAIC,MAAA,SAAS,EAAGG;AAJb,OAMC,4BAAC,mCAAD;AAAc,MAAA,SAAS,EAAC;AAAxB,OACC,4BAAC,qCAAD;AACC,MAAA,SAAS,EAAC,+BADX;AAEC,MAAA,SAAS,EAAG,KAAKnF,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,4BAAC,aAAD;AACC,MAAA,MAAM,EAAGJ,MADV;AAEC,MAAA,KAAK,EAAGE,WAAW,CAACyB,CAAZ,GAAgBzB,WAAW,CAAC0B;AAFrC,MATD,EAaC,4BAAC,cAAD;AACC,MAAA,GAAG,EAAG,cAAI,eAAJ,CADP;AAEC,MAAA,QAAQ,EAAG6D,QAFZ;AAGC,MAAA,QAAQ,EAAG,KAAKpF,QAHjB;AAIC,MAAA,MAAM,EAAG,KAAKa,YAJf;AAKC,MAAA,GAAG,EAAGQ;AALP,MAbD,EAoBC,4BAAC,mBAAD;AACC,MAAA,WAAW,EAAG4D,eADf;AAEC,MAAA,UAAU,EAAGvF;AAFd,MApBD,CADD,CAND,EAiCC,4BAAC,iBAAD;AACC,MAAA,WAAW,EAAGG,WADf;AAEC,MAAA,QAAQ,EAAG,KAAKa;AAFjB,MAjCD,CADD;AAwCA;;AAhT8C;;;AAmThDtB,gBAAgB,CAACuG,YAAjB,GAAgC;AAC/BP,EAAAA,QAAQ,EAAE,IADqB;AAE/BtF,EAAAA,KAAK,EAAE;AACNwB,IAAAA,CAAC,EAAE,GADG;AAENC,IAAAA,CAAC,EAAE;AAFG,GAFwB;AAM/BF,EAAAA,GAAG,EAAE;AAN0B,CAAhC;;eASe,6BAAgBjC,gBAAhB,C","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/focal-point-picker/index.native.js CHANGED Viewed

@@ -47,7 +47,7 @@ var _utils = require("./utils");
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
 const FOCAL_POINT_UNITS = [{
-  default: '50',
+  default: 50,
   label: '%',
   value: '%'
 }];
@@ -77,7 +77,7 @@ function FocalPointPicker(props) {
         (0, _reactNativeBridge.setFocalPointPickerTooltipShown)(true);
       }
     });
-  }, []); // Animated coordinates for drag handle
+  }, []); // Animated coordinates for drag handle.
   const pan = (0, _element.useRef)(new _reactNative.Animated.ValueXY()).current;
   /**
@@ -92,7 +92,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 = (0, _element.useMemo)(() => _reactNative.PanResponder.create({
     onStartShouldSetPanResponder: () => true,
@@ -112,11 +112,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: _reactNative.Animated.event([null, {
       dx: pan.x,
       dy: pan.y
@@ -125,7 +125,7 @@ function FocalPointPicker(props) {
     }),
     onPanResponderRelease: event => {
       shouldEnableBottomSheetScroll(true);
-      pan.flattenOffset(); // Flatten offset into value
+      pan.flattenOffset(); // Flatten offset into value.
       const {
         pageX,