@atlaskit/renderer 109.18.1 → 109.19.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 109.19.0
+
+### Minor Changes
+
+- [#90964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90964) [`6e7df33eb280`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e7df33eb280) - [ux] [ED-22992] Auto-dismiss comment button on media if mouse rolling away from media and comment popup, remove popup position transition so that popup does not appear sliding across the page when mouse moving from one media to another
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.18.1
 
 ### Patch Changes

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -16,6 +16,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _style = require("../../../ui/Renderer/style");
 var _styles = require("./styles");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
+var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
@@ -147,22 +148,33 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   }, [height, width]);
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
     setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = (0, _AnnotationHoverContext.useAnnotationHoverDispatch)(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
   (0, _react.useEffect)(function () {
     var mediaSingleElement = ref.current;
-    var callback = function callback(event) {
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
     if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
       if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.18.1";
+var packageVersion = "109.19.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/annotations/contexts/AnnotationHoverContext.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnnotationHoverDispatch = exports.useAnnotationHoverContext = exports.AnnotationHoverContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var AnnotationHoverStateContext = /*#__PURE__*/(0, _react.createContext)({
+  isWithinRange: false
+});
+var AnnotationHoverDispatchContext = /*#__PURE__*/(0, _react.createContext)({
+  cancelTimeout: function cancelTimeout() {},
+  initiateTimeout: function initiateTimeout() {},
+  setIsWithinRange: function setIsWithinRange() {}
+});
+var AnnotationHoverContext = exports.AnnotationHoverContext = function AnnotationHoverContext(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isWithinRange = _useState2[0],
+    setIsWithinRange = _useState2[1];
+  var timeoutHandler = (0, _react.useRef)();
+  var cancelTimeout = (0, _react.useCallback)(function () {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  var initiateTimeout = (0, _react.useCallback)(function () {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(function () {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  var stateData = (0, _react.useMemo)(function () {
+    return {
+      isWithinRange: isWithinRange
+    };
+  }, [isWithinRange]);
+  var dispatchData = (0, _react.useMemo)(function () {
+    return {
+      cancelTimeout: cancelTimeout,
+      initiateTimeout: initiateTimeout,
+      setIsWithinRange: setIsWithinRange
+    };
+  }, [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/_react.default.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/_react.default.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+var useAnnotationHoverContext = exports.useAnnotationHoverContext = function useAnnotationHoverContext() {
+  return (0, _react.useContext)(AnnotationHoverStateContext);
+};
+var useAnnotationHoverDispatch = exports.useAnnotationHoverDispatch = function useAnnotationHoverDispatch() {
+  return (0, _react.useContext)(AnnotationHoverDispatchContext);
+};

package/dist/cjs/ui/annotations/hover/mounter.js

@@ -18,6 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    isWithinRange = props.isWithinRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -123,6 +124,7 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

package/dist/cjs/ui/annotations/hover/range-validator.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _mounter = require("./mounter");
 var _RendererActionsContext = require("../../RendererActionsContext");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
+var _AnnotationHoverContext = require("../contexts/AnnotationHoverContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var RangeValidator = exports.RangeValidator = function RangeValidator(props) {
@@ -23,11 +24,14 @@ var RangeValidator = exports.RangeValidator = function RangeValidator(props) {
   var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type;
+  var _useAnnotationHoverCo = (0, _AnnotationHoverContext.useAnnotationHoverContext)(),
+    isWithinRange = _useAnnotationHoverCo.isWithinRange;
   if (!range || type !== 'hover') {
     return null;
   }
   var documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/_react.default.createElement(_mounter.Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

package/dist/cjs/ui/annotations/index.js

@@ -26,6 +26,7 @@ var _useLoadAnnotations = require("./hooks/use-load-annotations");
 var _useEvents = require("./hooks/use-events");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _AnnotationRangeContext = require("./contexts/AnnotationRangeContext");
+var _AnnotationHoverContext = require("./contexts/AnnotationHoverContext");
 var _draft = require("./draft");
 var _element = require("./element");
 var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -54,12 +55,12 @@ var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrappe
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/_react.default.createElement(_AnnotationRangeContext.AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/_react.default.createElement(_wrapper.AnnotationsContextWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_AnnotationHoverContext.AnnotationHoverContext, null, /*#__PURE__*/_react.default.createElement(_wrapper.AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/_react.default.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/_react.default.createElement(_view.AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -9,6 +9,7 @@ import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideL
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
+import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 const isMediaElement = media => {
@@ -133,22 +134,34 @@ const MediaSingleWithChildren = props => {
   const {
     setHoverTarget
   } = useAnnotationRangeDispatch();
+  const {
+    cancelTimeout,
+    initiateTimeout,
+    setIsWithinRange
+  } = useAnnotationHoverDispatch();
   useEffect(() => {
     const mediaSingleElement = ref.current;
-    const callback = event => {
+    const handleMouseEnter = event => {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
+    const handleMouseLeave = () => {
+      initiateTimeout();
+    };
     if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return () => {
       if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.18.1";
+const packageVersion = "109.19.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/annotations/contexts/AnnotationHoverContext.js

@@ -0,0 +1,46 @@
+import React, { createContext, useState, useContext, useMemo, useRef, useCallback } from 'react';
+const AnnotationHoverStateContext = /*#__PURE__*/createContext({
+  isWithinRange: false
+});
+const AnnotationHoverDispatchContext = /*#__PURE__*/createContext({
+  cancelTimeout: () => {},
+  initiateTimeout: () => {},
+  setIsWithinRange: () => {}
+});
+export const AnnotationHoverContext = ({
+  children
+}) => {
+  const [isWithinRange, setIsWithinRange] = useState(false);
+  const timeoutHandler = useRef();
+  const cancelTimeout = useCallback(() => {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  const initiateTimeout = useCallback(() => {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(() => {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  const stateData = useMemo(() => ({
+    isWithinRange
+  }), [isWithinRange]);
+  const dispatchData = useMemo(() => ({
+    cancelTimeout,
+    initiateTimeout,
+    setIsWithinRange
+  }), [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/React.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/React.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+export const useAnnotationHoverContext = () => {
+  return useContext(AnnotationHoverStateContext);
+};
+export const useAnnotationHoverDispatch = () => {
+  return useContext(AnnotationHoverDispatchContext);
+};

package/dist/es2019/ui/annotations/hover/mounter.js

@@ -8,6 +8,7 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
     range,
+    isWithinRange,
     isAnnotationAllowed,
     wrapperDOM,
     onClose: onCloseProps,
@@ -110,6 +111,7 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

package/dist/es2019/ui/annotations/hover/range-validator.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
 export const RangeValidator = props => {
   const {
     component,
@@ -18,11 +19,15 @@ export const RangeValidator = props => {
     range,
     type
   } = useAnnotationRangeState();
+  const {
+    isWithinRange
+  } = useAnnotationHoverContext();
   if (!range || type !== 'hover') {
     return null;
   }
   const documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/React.createElement(Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

package/dist/es2019/ui/annotations/index.js

@@ -7,6 +7,7 @@ import { useLoadAnnotations } from './hooks/use-load-annotations';
 import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
+import { AnnotationHoverContext } from './contexts/AnnotationHoverContext';
 const LoadAnnotations = /*#__PURE__*/React.memo(({
   adfDocument
 }) => {
@@ -37,14 +38,14 @@ export const AnnotationsWrapper = props => {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 ? void 0 : (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
+  }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/React.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -10,6 +10,7 @@ import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideL
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
+import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 var isMediaElement = function isMediaElement(media) {
@@ -137,22 +138,33 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   }, [height, width]);
   var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
     setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = useAnnotationHoverDispatch(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
   useEffect(function () {
     var mediaSingleElement = ref.current;
-    var callback = function callback(event) {
+    var handleMouseEnter = function handleMouseEnter(event) {
+      cancelTimeout();
       if (event.buttons === 0) {
         setHoverTarget && setHoverTarget(event.target);
+        setIsWithinRange(true);
       }
     };
+    var handleMouseLeave = function handleMouseLeave() {
+      initiateTimeout();
+    };
     if (mediaSingleElement) {
-      mediaSingleElement.addEventListener('mouseenter', callback);
+      mediaSingleElement.addEventListener('mouseenter', handleMouseEnter);
+      mediaSingleElement.addEventListener('mouseleave', handleMouseLeave);
     }
     return function () {
       if (mediaSingleElement) {
-        mediaSingleElement.removeEventListener('mouseenter', callback);
+        mediaSingleElement.removeEventListener('mouseenter', handleMouseEnter);
+        mediaSingleElement.removeEventListener('mouseleave', handleMouseLeave);
       }
     };
-  }, [setHoverTarget]);
+  }, [setHoverTarget, cancelTimeout, initiateTimeout, setIsWithinRange]);
 
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:

package/dist/esm/ui/Renderer/index.js

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.18.1";
+var packageVersion = "109.19.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/annotations/contexts/AnnotationHoverContext.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useState, useContext, useMemo, useRef, useCallback } from 'react';
+var AnnotationHoverStateContext = /*#__PURE__*/createContext({
+  isWithinRange: false
+});
+var AnnotationHoverDispatchContext = /*#__PURE__*/createContext({
+  cancelTimeout: function cancelTimeout() {},
+  initiateTimeout: function initiateTimeout() {},
+  setIsWithinRange: function setIsWithinRange() {}
+});
+export var AnnotationHoverContext = function AnnotationHoverContext(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isWithinRange = _useState2[0],
+    setIsWithinRange = _useState2[1];
+  var timeoutHandler = useRef();
+  var cancelTimeout = useCallback(function () {
+    if (timeoutHandler) {
+      clearTimeout(timeoutHandler.current);
+    }
+  }, [timeoutHandler]);
+  var initiateTimeout = useCallback(function () {
+    if (isWithinRange) {
+      timeoutHandler.current = setTimeout(function () {
+        setIsWithinRange(false);
+      }, 500);
+    }
+  }, [isWithinRange]);
+  var stateData = useMemo(function () {
+    return {
+      isWithinRange: isWithinRange
+    };
+  }, [isWithinRange]);
+  var dispatchData = useMemo(function () {
+    return {
+      cancelTimeout: cancelTimeout,
+      initiateTimeout: initiateTimeout,
+      setIsWithinRange: setIsWithinRange
+    };
+  }, [cancelTimeout, initiateTimeout, setIsWithinRange]);
+  return /*#__PURE__*/React.createElement(AnnotationHoverStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/React.createElement(AnnotationHoverDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+export var useAnnotationHoverContext = function useAnnotationHoverContext() {
+  return useContext(AnnotationHoverStateContext);
+};
+export var useAnnotationHoverDispatch = function useAnnotationHoverDispatch() {
+  return useContext(AnnotationHoverDispatchContext);
+};

package/dist/esm/ui/annotations/hover/mounter.js

@@ -8,6 +8,7 @@ import { RendererContext as ActionsContext } from '../../RendererActionsContext'
 export var Mounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
+    isWithinRange = props.isWithinRange,
     isAnnotationAllowed = props.isAnnotationAllowed,
     wrapperDOM = props.wrapperDOM,
     onCloseProps = props.onClose,
@@ -113,6 +114,7 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
   }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Component, {
     range: range,
+    isWithinRange: isWithinRange,
     wrapperDOM: wrapperDOM.current,
     isAnnotationAllowed: isAnnotationAllowed,
     onClose: onCloseCallback,

package/dist/esm/ui/annotations/hover/range-validator.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Mounter } from './mounter';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
+import { useAnnotationHoverContext } from '../contexts/AnnotationHoverContext';
 export var RangeValidator = function RangeValidator(props) {
   var component = props.component,
     rendererRef = props.rendererRef,
@@ -14,11 +15,14 @@ export var RangeValidator = function RangeValidator(props) {
   var _useAnnotationRangeSt = useAnnotationRangeState(),
     range = _useAnnotationRangeSt.range,
     type = _useAnnotationRangeSt.type;
+  var _useAnnotationHoverCo = useAnnotationHoverContext(),
+    isWithinRange = _useAnnotationHoverCo.isWithinRange;
   if (!range || type !== 'hover') {
     return null;
   }
   var documentPosition = actions.getPositionFromRange(range);
   return /*#__PURE__*/React.createElement(Mounter, {
+    isWithinRange: isWithinRange,
     range: range,
     wrapperDOM: rendererRef,
     component: component,

package/dist/esm/ui/annotations/index.js

@@ -7,6 +7,7 @@ import { useLoadAnnotations } from './hooks/use-load-annotations';
 import { useAnnotationStateByTypeEvent } from './hooks/use-events';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { AnnotationRangeProvider } from './contexts/AnnotationRangeContext';
+import { AnnotationHoverContext } from './contexts/AnnotationHoverContext';
 var LoadAnnotations = /*#__PURE__*/React.memo(function (_ref) {
   var adfDocument = _ref.adfDocument;
   useLoadAnnotations({
@@ -33,14 +34,14 @@ export var AnnotationsWrapper = function AnnotationsWrapper(props) {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
-  }, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
+  }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/React.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/React.createElement(AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children))));
+  }), children)))));
 };
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

package/dist/types/ui/annotations/contexts/AnnotationHoverContext.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface AnnotationHoverStateContext {
+    isWithinRange: boolean;
+}
+export interface AnnotationHoverDispatchContext {
+    cancelTimeout: () => void;
+    initiateTimeout: () => void;
+    setIsWithinRange: (isWithinRange: boolean) => void;
+}
+export declare const AnnotationHoverContext: ({ children, }: {
+    children?: ReactNode;
+}) => JSX.Element;
+export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
+export declare const useAnnotationHoverDispatch: () => AnnotationHoverDispatchContext;

package/dist/types/ui/annotations/hover/mounter.d.ts

@@ -5,6 +5,7 @@ import type { Position } from '../types';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
+    isWithinRange: boolean;
     component: React.ComponentType<InlineCommentHoverComponentProps>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;

package/dist/types-ts4.5/ui/annotations/contexts/AnnotationHoverContext.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface AnnotationHoverStateContext {
+    isWithinRange: boolean;
+}
+export interface AnnotationHoverDispatchContext {
+    cancelTimeout: () => void;
+    initiateTimeout: () => void;
+    setIsWithinRange: (isWithinRange: boolean) => void;
+}
+export declare const AnnotationHoverContext: ({ children, }: {
+    children?: ReactNode;
+}) => JSX.Element;
+export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
+export declare const useAnnotationHoverDispatch: () => AnnotationHoverDispatchContext;

package/dist/types-ts4.5/ui/annotations/hover/mounter.d.ts

@@ -5,6 +5,7 @@ import type { Position } from '../types';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
+    isWithinRange: boolean;
     component: React.ComponentType<InlineCommentHoverComponentProps>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.18.1",
+  "version": "109.19.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.12.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.28.0",
+    "@atlaskit/editor-common": "^78.29.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",