@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

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

@@ -12,16 +12,14 @@ import { FocalPointWrapper, PointerIconPathFill, PointerIconPathOutline, Pointer
 import classnames from 'classnames';
 export default function FocalPoint(_ref) {
   let {
-    coordinates = {
-      left: '50%',
-      top: '50%'
-    },
+    left = '50%',
+    top = '50%',
     ...props
   } = _ref;
   const classes = classnames('components-focal-point-picker__icon_container');
   const style = {
-    left: coordinates.left,
-    top: coordinates.top
+    left,
+    top
   };
   return createElement(FocalPointWrapper, _extends({}, props, {
     className: classes,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.js"],"names":["FocalPointWrapper","PointerIconPathFill","PointerIconPathOutline","PointerIconSVG","classnames","FocalPoint","coordinates","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,mBAFD,EAGCC,sBAHD,EAICC,cAJD,QAKO,4BALP;AAOA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,UAAT,OAGX;AAAA,MAHgC;AACnCC,IAAAA,WAAW,GAAG;AAAEC,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,GAAG,EAAE;AAApB,KADqB;AAEnC,OAAGC;AAFgC,GAGhC;AACH,QAAMC,OAAO,GAAGN,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMO,KAAK,GAAG;AACbJ,IAAAA,IAAI,EAAED,WAAW,CAACC,IADL;AAEbC,IAAAA,GAAG,EAAEF,WAAW,CAACE;AAFJ,GAAd;AAKA,SACC,cAAC,iBAAD,eAAwBC,KAAxB;AAAgC,IAAA,SAAS,EAAGC,OAA5C;AAAsD,IAAA,KAAK,EAAGC;AAA9D,MACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAC,4BAFP;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IALD,EASC,cAAC,mBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IATD,CADD,CADD;AAkBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tFocalPointWrapper,\n\tPointerIconPathFill,\n\tPointerIconPathOutline,\n\tPointerIconSVG,\n} from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function FocalPoint( {\n\tcoordinates = { left: '50%', top: '50%' },\n\t...props\n} ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = {\n\t\tleft: coordinates.left,\n\t\ttop: coordinates.top,\n\t};\n\n\treturn (\n\t\t<FocalPointWrapper { ...props } className={ classes } style={ style }>\n\t\t\t<PointerIconSVG\n\t\t\t\tclassName=\"components-focal-point-picker__icon\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 30 30\"\n\t\t\t>\n\t\t\t\t<PointerIconPathOutline\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-outline\"\n\t\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t\t/>\n\t\t\t\t<PointerIconPathFill\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-fill\"\n\t\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t\t/>\n\t\t\t</PointerIconSVG>\n\t\t</FocalPointWrapper>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.js"],"names":["FocalPointWrapper","PointerIconPathFill","PointerIconPathOutline","PointerIconSVG","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,mBAFD,EAGCC,sBAHD,EAICC,cAJD,QAKO,4BALP;AAOA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,UAAT,OAA+D;AAAA,MAA1C;AAAEC,IAAAA,IAAI,GAAG,KAAT;AAAgBC,IAAAA,GAAG,GAAG,KAAtB;AAA6B,OAAGC;AAAhC,GAA0C;AAC7E,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SACC,cAAC,iBAAD,eAAwBC,KAAxB;AAAgC,IAAA,SAAS,EAAGC,OAA5C;AAAsD,IAAA,KAAK,EAAGC;AAA9D,MACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,qCADX;AAEC,IAAA,KAAK,EAAC,4BAFP;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IALD,EASC,cAAC,mBAAD;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,CAAC,EAAC;AAFH,IATD,CADD,CADD;AAkBA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tFocalPointWrapper,\n\tPointerIconPathFill,\n\tPointerIconPathOutline,\n\tPointerIconSVG,\n} from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function FocalPoint( { left = '50%', top = '50%', ...props } ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn (\n\t\t<FocalPointWrapper { ...props } className={ classes } style={ style }>\n\t\t\t<PointerIconSVG\n\t\t\t\tclassName=\"components-focal-point-picker__icon\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 30 30\"\n\t\t\t>\n\t\t\t\t<PointerIconPathOutline\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-outline\"\n\t\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t\t/>\n\t\t\t\t<PointerIconPathFill\n\t\t\t\t\tclassName=\"components-focal-point-picker__icon-fill\"\n\t\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t\t/>\n\t\t\t</PointerIconSVG>\n\t\t</FocalPointWrapper>\n\t);\n}\n"]}

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

@@ -1,30 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
-import { useUpdateEffect } from '../utils/hooks';
 export default function FocalPointPickerGrid(_ref) {
   let {
-    bounds = {},
-    value,
+    bounds,
     ...props
   } = _ref;
-  const animationProps = useRevealAnimation(value);
-  const style = {
-    width: bounds.width,
-    height: bounds.height
-  };
-  return createElement(GridView, _extends({}, props, animationProps, {
+  return createElement(GridView, _extends({}, props, {
     className: "components-focal-point-picker__grid",
-    style: style
+    style: {
+      width: bounds.width,
+      height: bounds.height
+    }
   }), createElement(GridLineX, {
     style: {
       top: '33%'
@@ -43,23 +34,4 @@ export default function FocalPointPickerGrid(_ref) {
     }
   }));
 }
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-
-function useRevealAnimation(value) {
-  const [isActive, setIsActive] = useState(false);
-  useUpdateEffect(() => {
-    setIsActive(true);
-    const timeout = window.setTimeout(() => {
-      setIsActive(false);
-    }, 600);
-    return () => window.clearTimeout(timeout);
-  }, [value]);
-  return {
-    isActive
-  };
-}
 //# sourceMappingURL=grid.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["useState","GridView","GridLineX","GridLineY","useUpdateEffect","FocalPointPickerGrid","bounds","value","props","animationProps","useRevealAnimation","style","width","height","top","left","isActive","setIsActive","timeout","window","setTimeout","clearTimeout"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAKA,SAASC,eAAT,QAAgC,gBAAhC;AAEA,eAAe,SAASC,oBAAT,OAIX;AAAA,MAJ0C;AAC7CC,IAAAA,MAAM,GAAG,EADoC;AAE7CC,IAAAA,KAF6C;AAG7C,OAAGC;AAH0C,GAI1C;AACH,QAAMC,cAAc,GAAGC,kBAAkB,CAAEH,KAAF,CAAzC;AACA,QAAMI,KAAK,GAAG;AACbC,IAAAA,KAAK,EAAEN,MAAM,CAACM,KADD;AAEbC,IAAAA,MAAM,EAAEP,MAAM,CAACO;AAFF,GAAd;AAKA,SACC,cAAC,QAAD,eACML,KADN,EAEMC,cAFN;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,KAAK,EAAGE;AAJT,MAMC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEG,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAND,EAOC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IAPD,EAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IATD,CADD;AAaA;AAED;AACA;AACA;AACA;AACA;;AACA,SAASL,kBAAT,CAA6BH,KAA7B,EAAqC;AACpC,QAAM,CAAES,QAAF,EAAYC,WAAZ,IAA4BjB,QAAQ,CAAE,KAAF,CAA1C;AAEAI,EAAAA,eAAe,CAAE,MAAM;AACtBa,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA,UAAMC,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAmB,MAAM;AACxCH,MAAAA,WAAW,CAAE,KAAF,CAAX;AACA,KAFe,EAEb,GAFa,CAAhB;AAIA,WAAO,MAAME,MAAM,CAACE,YAAP,CAAqBH,OAArB,CAAb;AACA,GAPc,EAOZ,CAAEX,KAAF,CAPY,CAAf;AASA,SAAO;AACNS,IAAAA;AADM,GAAP;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport { useUpdateEffect } from '../utils/hooks';\n\nexport default function FocalPointPickerGrid( {\n\tbounds = {},\n\tvalue,\n\t...props\n} ) {\n\tconst animationProps = useRevealAnimation( value );\n\tconst style = {\n\t\twidth: bounds.width,\n\t\theight: bounds.height,\n\t};\n\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\t{ ...animationProps }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useRevealAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\n\tuseUpdateEffect( () => {\n\t\tsetIsActive( true );\n\t\tconst timeout = window.setTimeout( () => {\n\t\t\tsetIsActive( false );\n\t\t}, 600 );\n\n\t\treturn () => window.clearTimeout( timeout );\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.js"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAMA,eAAe,SAASC,oBAAT,OAAsD;AAAA,MAAvB;AAAEC,IAAAA,MAAF;AAAU,OAAGC;AAAb,GAAuB;AACpE,SACC,cAAC,QAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,MAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\n\nexport default function FocalPointPickerGrid( { bounds, ...props } ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"]}

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -9,8 +10,8 @@ import classnames from 'classnames';
  */
 
 import { __ } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { __experimentalUseDragging as useDragging, useInstanceId, useIsomorphicLayoutEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -21,354 +22,186 @@ import FocalPoint from './focal-point';
 import Grid from './grid';
 import Media from './media';
 import { MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';
-import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
-export class FocalPointPicker extends Component {
-  constructor(props) {
-    super(...arguments);
-    this.state = {
-      isDragging: false,
-      bounds: INITIAL_BOUNDS,
-      percentages: props.value
-    };
-    this.containerRef = createRef();
-    this.mediaRef = createRef();
-    this.onMouseDown = this.startDrag.bind(this);
-    this.onMouseUp = this.stopDrag.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onMouseMove = this.doDrag.bind(this);
-
-    this.ifDraggingStop = () => {
-      if (this.state.isDragging) {
-        this.stopDrag();
-      }
-    };
-
-    this.onChangeAtControls = value => {
-      this.updateValue(value, () => {
-        this.props.onChange(this.state.percentages);
-      });
-    };
-
-    this.updateBounds = this.updateBounds.bind(this);
-    this.updateValue = this.updateValue.bind(this);
-  }
-
-  componentDidMount() {
-    const {
-      defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.addEventListener('resize', this.updateBounds);
-    /*
-     * Set initial bound values.
-     *
-     * This is necessary for Safari:
-     * https://github.com/WordPress/gutenberg/issues/25814
-     */
-
-    this.updateBounds();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.url !== this.props.url) {
-      this.ifDraggingStop();
+import { useUpdateEffect } from '../utils/hooks';
+const GRID_OVERLAY_TIMEOUT = 600;
+export default function FocalPointPicker(_ref) {
+  let {
+    autoPlay = true,
+    className,
+    help,
+    label,
+    onChange,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    resolvePoint,
+    url,
+    value: valueProp = {
+      x: 0.5,
+      y: 0.5
     }
-    /*
-     * Handles cases where the incoming value changes.
-     * An example is the values resetting based on an UNDO action.
-     */
-
-
-    const {
-      isDragging,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
-    const {
-      value
-    } = this.props;
-
-    if (!isDragging && (value.x !== x || value.y !== y)) {
-      this.setState({
-        percentages: this.props.value
-      });
+  } = _ref;
+  const [point, setPoint] = useState(valueProp);
+  const [showGridOverlay, setShowGridOverlay] = useState(false);
+  const {
+    startDrag,
+    endDrag,
+    isDragging
+  } = useDragging({
+    onDragStart: event => {
+      dragAreaRef.current.focus();
+      const value = getValueWithinDragArea(event);
+      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(value, event);
+      setPoint(value);
+    },
+    onDragMove: event => {
+      // Prevents text-selection when dragging.
+      event.preventDefault();
+      const value = getValueWithinDragArea(event);
+      onDrag === null || onDrag === void 0 ? void 0 : onDrag(value, event);
+      setPoint(value);
+    },
+    onDragEnd: event => {
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event);
+      onChange === null || onChange === void 0 ? void 0 : onChange(point);
     }
-  }
+  }); // Uses the internal point while dragging or else the value from props.
+
+  const {
+    x,
+    y
+  } = isDragging ? point : valueProp;
+  const dragAreaRef = useRef();
+  const [bounds, setBounds] = useState(INITIAL_BOUNDS);
+  const refUpdateBounds = useRef(() => {
+    const {
+      clientWidth: width,
+      clientHeight: height
+    } = dragAreaRef.current; // Falls back to initial bounds if the ref has no size. Since styles
+    // give the drag area dimensions even when the media has not loaded
+    // this should only happen in unit tests (jsdom).
 
-  componentWillUnmount() {
+    setBounds(width > 0 && height > 0 ? {
+      width,
+      height
+    } : { ...INITIAL_BOUNDS
+    });
+  });
+  useEffect(() => {
+    const updateBounds = refUpdateBounds.current;
     const {
       defaultView
-    } = this.containerRef.current.ownerDocument;
-    defaultView.removeEventListener('resize', this.updateBounds);
-    this.ifDraggingStop();
-  }
-
-  calculateBounds() {
-    const bounds = INITIAL_BOUNDS;
-
-    if (!this.mediaRef.current) {
-      return bounds;
-    } // Prevent division by zero when updateBounds runs in componentDidMount
+    } = dragAreaRef.current.ownerDocument;
+    defaultView.addEventListener('resize', updateBounds);
+    return () => defaultView.removeEventListener('resize', updateBounds);
+  }, []); // Updates the bounds to cover cases of unspecified media or load failures.
 
+  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);
 
-    if (this.mediaRef.current.clientWidth === 0 || this.mediaRef.current.clientHeight === 0) {
-      return bounds;
-    }
-
-    const dimensions = {
-      width: this.mediaRef.current.clientWidth,
-      height: this.mediaRef.current.clientHeight
-    };
-    const pickerDimensions = this.pickerDimensions();
-    const widthRatio = pickerDimensions.width / dimensions.width;
-    const heightRatio = pickerDimensions.height / dimensions.height;
-
-    if (heightRatio >= widthRatio) {
-      bounds.width = bounds.right = pickerDimensions.width;
-      bounds.height = dimensions.height * widthRatio;
-      bounds.top = (pickerDimensions.height - bounds.height) / 2;
-      bounds.bottom = bounds.top + bounds.height;
-    } else {
-      bounds.height = bounds.bottom = pickerDimensions.height;
-      bounds.width = dimensions.width * heightRatio;
-      bounds.left = (pickerDimensions.width - bounds.width) / 2;
-      bounds.right = bounds.left + bounds.width;
-    }
-
-    return bounds;
-  }
-
-  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 getValueWithinDragArea = _ref2 => {
+    let {
+      clientX,
+      clientY,
+      shiftKey
+    } = _ref2;
     const {
-      x,
-      y
-    } = resolvedValue;
-    const nextPercentage = {
-      x: parseFloat(x).toFixed(2),
-      y: parseFloat(y).toFixed(2)
-    };
-    this.setState({
-      percentages: nextPercentage
-    }, callback);
-  }
-
-  updateBounds() {
-    this.setState({
-      bounds: this.calculateBounds()
-    });
-  }
+      top,
+      left
+    } = dragAreaRef.current.getBoundingClientRect();
+    let nextX = (clientX - left) / bounds.width;
+    let nextY = (clientY - top) / bounds.height; // Enables holding shift to jump values by 10%.
 
-  startDrag(event) {
-    var _this$props$onDragSta, _this$props2;
+    if (shiftKey) {
+      nextX = Math.round(nextX / 0.1) * 0.1;
+      nextY = Math.round(nextY / 0.1) * 0.1;
+    }
 
-    event.persist();
-    this.containerRef.current.focus();
-    this.setState({
-      isDragging: true
+    return getFinalValue({
+      x: nextX,
+      y: nextY
     });
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.addEventListener('mouseup', this.onMouseUp);
-    ownerDocument.addEventListener('mousemove', this.onMouseMove);
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_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$props3;
+  const getFinalValue = value => {
+    var _resolvePoint;
 
-    const {
-      ownerDocument
-    } = this.containerRef.current;
-    ownerDocument.removeEventListener('mouseup', this.onMouseUp);
-    ownerDocument.removeEventListener('mousemove', this.onMouseMove);
-    this.setState({
-      isDragging: false
-    }, () => {
-      this.props.onChange(this.state.percentages);
-    });
-    (_this$props$onDragEnd = (_this$props3 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props3, event);
-  }
+    const resolvedValue = (_resolvePoint = resolvePoint === null || resolvePoint === void 0 ? void 0 : resolvePoint(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
+    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
+    return {
+      x: parseFloat(resolvedValue.x).toFixed(2),
+      y: parseFloat(resolvedValue.y).toFixed(2)
+    };
+  };
 
-  onKeyDown(event) {
+  const arrowKeyStep = event => {
     const {
       code,
       shiftKey
     } = event;
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return;
     event.preventDefault();
-    const next = { ...this.state.percentages
+    const value = {
+      x,
+      y
     };
     const step = shiftKey ? 0.1 : 0.01;
     const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
     const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
-    const value = parseFloat(next[axis]) + delta;
-    next[axis] = roundClamp(value, 0, 1, step);
-    this.updateValue(next, () => {
-      this.props.onChange(this.state.percentages);
-    });
-  }
-
-  doDrag(event) {
-    var _this$props$onDrag, _this$props4;
-
-    // Prevents text-selection when dragging.
-    event.preventDefault();
-    const value = this.getValueFromPoint({
-      x: event.pageX,
-      y: event.pageY
-    }, event.shiftKey);
-    this.updateValue(value);
-    (_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) {
-    const {
-      bounds
-    } = this.state;
-    const pickerDimensions = this.pickerDimensions();
-    const relativePoint = {
-      left: point.x - pickerDimensions.left,
-      top: point.y - pickerDimensions.top
-    };
-    const left = Math.max(bounds.left, Math.min(relativePoint.left, bounds.right));
-    const top = Math.max(bounds.top, Math.min(relativePoint.top, bounds.bottom));
-    let nextX = (left - bounds.left) / (pickerDimensions.width - bounds.left * 2);
-    let nextY = (top - bounds.top) / (pickerDimensions.height - bounds.top * 2); // Enables holding shift to jump values by 10%
-
-    const step = byTenths ? 0.1 : 0.01;
-    nextX = roundClamp(nextX, 0, 1, step);
-    nextY = roundClamp(nextY, 0, 1, step);
-    return {
-      x: nextX,
-      y: nextY
-    };
-  }
-
-  pickerDimensions() {
-    const containerNode = this.containerRef.current;
-
-    if (!containerNode) {
-      return {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0
-      };
-    }
-
-    const {
-      clientHeight,
-      clientWidth
-    } = containerNode;
-    const {
-      top,
-      left
-    } = containerNode.getBoundingClientRect();
-    return {
-      width: clientWidth,
-      height: clientHeight,
-      top: top + document.body.scrollTop,
-      left
-    };
-  }
-
-  iconCoordinates() {
-    const {
-      bounds,
-      percentages: {
-        x,
-        y
-      }
-    } = this.state;
-
-    if (bounds.left === undefined || bounds.top === undefined) {
-      return {
-        left: '50%',
-        top: '50%'
-      };
+    value[axis] = parseFloat(value[axis]) + delta;
+    onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
+  };
+
+  const focalPointPosition = {
+    left: x * bounds.width,
+    top: y * bounds.height
+  };
+  const classes = classnames('components-focal-point-picker-control', className);
+  const instanceId = useInstanceId(FocalPointPicker);
+  const id = `inspector-focal-point-picker-control-${instanceId}`;
+  useUpdateEffect(() => {
+    setShowGridOverlay(true);
+    const timeout = window.setTimeout(() => {
+      setShowGridOverlay(false);
+    }, GRID_OVERLAY_TIMEOUT);
+    return () => window.clearTimeout(timeout);
+  }, [x, y]);
+  return createElement(BaseControl, {
+    label: label,
+    id: id,
+    help: help,
+    className: classes
+  }, createElement(MediaWrapper, {
+    className: "components-focal-point-picker-wrapper"
+  }, createElement(MediaContainer, {
+    className: "components-focal-point-picker",
+    onKeyDown: arrowKeyStep,
+    onMouseDown: startDrag,
+    onBlur: () => {
+      if (isDragging) endDrag();
+    },
+    ref: dragAreaRef,
+    role: "button",
+    tabIndex: "-1"
+  }, createElement(Grid, {
+    bounds: bounds,
+    showOverlay: showGridOverlay
+  }), createElement(Media, {
+    alt: __('Media preview'),
+    autoPlay: autoPlay,
+    onLoad: refUpdateBounds.current,
+    src: url
+  }), createElement(FocalPoint, _extends({}, focalPointPosition, {
+    isDragging: isDragging
+  })))), createElement(Controls, {
+    point: {
+      x,
+      y
+    },
+    onChange: value => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(getFinalValue(value));
     }
-
-    const {
-      width,
-      height
-    } = this.pickerDimensions();
-    return {
-      left: x * (width - bounds.left * 2) + bounds.left,
-      top: y * (height - bounds.top * 2) + bounds.top
-    };
-  }
-
-  render() {
-    const {
-      autoPlay,
-      className,
-      help,
-      instanceId,
-      label,
-      url
-    } = this.props;
-    const {
-      bounds,
-      isDragging,
-      percentages
-    } = this.state;
-    const iconCoordinates = this.iconCoordinates();
-    const classes = classnames('components-focal-point-picker-control', className);
-    const id = `inspector-focal-point-picker-control-${instanceId}`;
-    return createElement(BaseControl, {
-      label: label,
-      id: id,
-      help: help,
-      className: classes
-    }, createElement(MediaWrapper, {
-      className: "components-focal-point-picker-wrapper"
-    }, createElement(MediaContainer, {
-      className: "components-focal-point-picker",
-      onKeyDown: this.onKeyDown,
-      onMouseDown: this.onMouseDown,
-      onBlur: this.ifDraggingStop,
-      ref: this.containerRef,
-      role: "button",
-      tabIndex: "-1"
-    }, createElement(Grid, {
-      bounds: bounds,
-      value: percentages.x + percentages.y
-    }), createElement(Media, {
-      alt: __('Media preview'),
-      autoPlay: autoPlay,
-      mediaRef: this.mediaRef,
-      onLoad: this.updateBounds,
-      src: url
-    }), createElement(FocalPoint, {
-      coordinates: iconCoordinates,
-      isDragging: isDragging
-    }))), createElement(Controls, {
-      percentages: percentages,
-      onChange: this.onChangeAtControls
-    }));
-  }
-
+  }));
 }
-FocalPointPicker.defaultProps = {
-  autoPlay: true,
-  value: {
-    x: 0.5,
-    y: 0.5
-  },
-  url: null
-};
-export default withInstanceId(FocalPointPicker);
 //# sourceMappingURL=index.js.map