@atlaskit/onboarding 11.7.2 → 11.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/onboarding
 
+## 11.8.0
+
+### Minor Changes
+
+- [#114901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114901)
+  [`61f6a496bcddf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/61f6a496bcddf) -
+  Added a possible fix (behind a feature flag) for a positioning bug with the Spotlight component.
+
 ## 11.7.2
 
 ### Patch Changes

package/dist/cjs/components/spotlight-dialog.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.7.2";
+var packageVersion = "11.8.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/utils/use-element-box.js

@@ -8,6 +8,9 @@ exports.useElementBox = exports.ElementBox = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+// The minimum interval between position updates in milliseconds
+var POSITION_UPDATE_INTERVAL = 200;
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
     height = _element$getBoundingC.height,
@@ -21,13 +24,7 @@ var getElementRect = function getElementRect(element) {
     width: width
   };
 };
-
-/**
- * Will listen to the document resizing to see if an element has moved positions.
- * Not using ResizeObserver because of IE11 support.
- * @param element HTMLElement to watch when resizing.
- */
-var useElementBox = exports.useElementBox = function useElementBox(element) {
+var useResizeAwareElementBox = function useResizeAwareElementBox(element, updateMethod) {
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0,
@@ -38,22 +35,112 @@ var useElementBox = exports.useElementBox = function useElementBox(element) {
     box = _useState2[0],
     setBox = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   (0, _react.useEffect)(function () {
     var onResize = function onResize() {
       requestAnimationFrame(function () {
         setBox(getElementRect(element));
       });
     };
-    return (0, _bindEventListener.bind)(window, {
-      type: 'resize',
-      listener: onResize
-    });
+    if (updateMethod === 'resizeListener') {
+      return (0, _bindEventListener.bind)(window, {
+        type: 'resize',
+        listener: onResize
+      });
+    }
+  }, [element, updateMethod]);
+  return box;
+};
+var usePollingElementBox = function usePollingElementBox(element, updateMethod) {
+  // These are intentionally tracked as number primitives rather than as a shared `box` object.
+  // Since the requestAnimationFrame code below updates this often, we want to avoid re-renders
+  // when the values are the same.  React uses `Object.is` to figure out if the state changed after a setState.
+  // If we represent this as a shared `box` object, this will re-render even if the two objects have identical contents.
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    height = _useState6[0],
+    setHeight = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    left = _useState8[0],
+    setLeft = _useState8[1];
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    top = _useState10[0],
+    setTop = _useState10[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (updateMethod === 'polling') {
+      var newBox = getElementRect(element);
+      setWidth(newBox.width);
+      setHeight(newBox.height);
+      setLeft(newBox.left);
+      setTop(newBox.top);
+    }
+  }, [element, updateMethod]);
+
+  // Souce: https://css-tricks.com/using-requestanimationframe-with-react-hooks/
+  // Use useRef for mutable variables that we want to persist
+  // without triggering a re-render on their change
+  var requestRef = (0, _react.useRef)();
+  var previousUpdateTimeRef = (0, _react.useRef)();
+  var animate = (0, _react.useCallback)(function (time) {
+    if (previousUpdateTimeRef.current !== undefined) {
+      var timeSinceLastUpdate = time - previousUpdateTimeRef.current;
+      if (timeSinceLastUpdate > POSITION_UPDATE_INTERVAL) {
+        var newBox = getElementRect(element);
+        setWidth(newBox.width);
+        setHeight(newBox.height);
+        setLeft(newBox.left);
+        setTop(newBox.top);
+        previousUpdateTimeRef.current = time;
+      }
+    } else {
+      // Initialize previousUpdateTimeRef
+      previousUpdateTimeRef.current = time;
+    }
+    requestRef.current = requestAnimationFrame(animate);
   }, [element]);
+  (0, _react.useEffect)(function () {
+    if (updateMethod === 'polling') {
+      requestRef.current = requestAnimationFrame(animate);
+    }
+    return function () {
+      if (requestRef.current !== undefined) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+    // This useEffect should only run on mount and when `element` or `updateMethod` changes.
+  }, [animate, element, updateMethod]);
+  var box = (0, _react.useMemo)(function () {
+    return {
+      width: width,
+      height: height,
+      left: left,
+      top: top
+    };
+  }, [width, height, left, top]);
   return box;
 };
 
+/**
+ * Will listen to the document resizing to see if an element has moved positions.
+ * Not using ResizeObserver because of IE11 support.
+ * @param element HTMLElement to watch when resizing.
+ */
+var useElementBox = exports.useElementBox = function useElementBox(element) {
+  var updateMethod = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system.refresh-spotlight-on-interval') ? 'polling' : 'resizeListener';
+  var boxViaResizeListener = useResizeAwareElementBox(element, updateMethod);
+  var boxViaPolling = usePollingElementBox(element, updateMethod);
+  return updateMethod === 'resizeListener' ? boxViaResizeListener : boxViaPolling;
+};
+
 /**
  * __Element box__
  *

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.7.2";
+const packageVersion = "11.8.0";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/utils/use-element-box.js

@@ -1,5 +1,8 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+// The minimum interval between position updates in milliseconds
+const POSITION_UPDATE_INTERVAL = 200;
 const getElementRect = element => {
   const {
     height,
@@ -14,13 +17,7 @@ const getElementRect = element => {
     width
   };
 };
-
-/**
- * Will listen to the document resizing to see if an element has moved positions.
- * Not using ResizeObserver because of IE11 support.
- * @param element HTMLElement to watch when resizing.
- */
-export const useElementBox = element => {
+const useResizeAwareElementBox = (element, updateMethod) => {
   const [box, setBox] = useState({
     width: 0,
     height: 0,
@@ -28,22 +25,98 @@ export const useElementBox = element => {
     top: 0
   });
   useLayoutEffect(() => {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   useEffect(() => {
     const onResize = () => {
       requestAnimationFrame(() => {
         setBox(getElementRect(element));
       });
     };
-    return bind(window, {
-      type: 'resize',
-      listener: onResize
-    });
+    if (updateMethod === 'resizeListener') {
+      return bind(window, {
+        type: 'resize',
+        listener: onResize
+      });
+    }
+  }, [element, updateMethod]);
+  return box;
+};
+const usePollingElementBox = (element, updateMethod) => {
+  // These are intentionally tracked as number primitives rather than as a shared `box` object.
+  // Since the requestAnimationFrame code below updates this often, we want to avoid re-renders
+  // when the values are the same.  React uses `Object.is` to figure out if the state changed after a setState.
+  // If we represent this as a shared `box` object, this will re-render even if the two objects have identical contents.
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const [left, setLeft] = useState(0);
+  const [top, setTop] = useState(0);
+  useLayoutEffect(() => {
+    if (updateMethod === 'polling') {
+      const newBox = getElementRect(element);
+      setWidth(newBox.width);
+      setHeight(newBox.height);
+      setLeft(newBox.left);
+      setTop(newBox.top);
+    }
+  }, [element, updateMethod]);
+
+  // Souce: https://css-tricks.com/using-requestanimationframe-with-react-hooks/
+  // Use useRef for mutable variables that we want to persist
+  // without triggering a re-render on their change
+  const requestRef = useRef();
+  const previousUpdateTimeRef = useRef();
+  const animate = useCallback(time => {
+    if (previousUpdateTimeRef.current !== undefined) {
+      const timeSinceLastUpdate = time - previousUpdateTimeRef.current;
+      if (timeSinceLastUpdate > POSITION_UPDATE_INTERVAL) {
+        const newBox = getElementRect(element);
+        setWidth(newBox.width);
+        setHeight(newBox.height);
+        setLeft(newBox.left);
+        setTop(newBox.top);
+        previousUpdateTimeRef.current = time;
+      }
+    } else {
+      // Initialize previousUpdateTimeRef
+      previousUpdateTimeRef.current = time;
+    }
+    requestRef.current = requestAnimationFrame(animate);
   }, [element]);
+  useEffect(() => {
+    if (updateMethod === 'polling') {
+      requestRef.current = requestAnimationFrame(animate);
+    }
+    return () => {
+      if (requestRef.current !== undefined) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+    // This useEffect should only run on mount and when `element` or `updateMethod` changes.
+  }, [animate, element, updateMethod]);
+  const box = useMemo(() => ({
+    width,
+    height,
+    left,
+    top
+  }), [width, height, left, top]);
   return box;
 };
 
+/**
+ * Will listen to the document resizing to see if an element has moved positions.
+ * Not using ResizeObserver because of IE11 support.
+ * @param element HTMLElement to watch when resizing.
+ */
+export const useElementBox = element => {
+  const updateMethod = getBooleanFF('platform.design-system.refresh-spotlight-on-interval') ? 'polling' : 'resizeListener';
+  const boxViaResizeListener = useResizeAwareElementBox(element, updateMethod);
+  const boxViaPolling = usePollingElementBox(element, updateMethod);
+  return updateMethod === 'resizeListener' ? boxViaResizeListener : boxViaPolling;
+};
+
 /**
  * __Element box__
  *

package/dist/esm/components/spotlight-dialog.js

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.7.2";
+var packageVersion = "11.8.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/utils/use-element-box.js

@@ -1,6 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+// The minimum interval between position updates in milliseconds
+var POSITION_UPDATE_INTERVAL = 200;
 var getElementRect = function getElementRect(element) {
   var _element$getBoundingC = element.getBoundingClientRect(),
     height = _element$getBoundingC.height,
@@ -14,13 +17,7 @@ var getElementRect = function getElementRect(element) {
     width: width
   };
 };
-
-/**
- * Will listen to the document resizing to see if an element has moved positions.
- * Not using ResizeObserver because of IE11 support.
- * @param element HTMLElement to watch when resizing.
- */
-export var useElementBox = function useElementBox(element) {
+var useResizeAwareElementBox = function useResizeAwareElementBox(element, updateMethod) {
   var _useState = useState({
       width: 0,
       height: 0,
@@ -31,22 +28,112 @@ export var useElementBox = function useElementBox(element) {
     box = _useState2[0],
     setBox = _useState2[1];
   useLayoutEffect(function () {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   useEffect(function () {
     var onResize = function onResize() {
       requestAnimationFrame(function () {
         setBox(getElementRect(element));
       });
     };
-    return bind(window, {
-      type: 'resize',
-      listener: onResize
-    });
+    if (updateMethod === 'resizeListener') {
+      return bind(window, {
+        type: 'resize',
+        listener: onResize
+      });
+    }
+  }, [element, updateMethod]);
+  return box;
+};
+var usePollingElementBox = function usePollingElementBox(element, updateMethod) {
+  // These are intentionally tracked as number primitives rather than as a shared `box` object.
+  // Since the requestAnimationFrame code below updates this often, we want to avoid re-renders
+  // when the values are the same.  React uses `Object.is` to figure out if the state changed after a setState.
+  // If we represent this as a shared `box` object, this will re-render even if the two objects have identical contents.
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    height = _useState6[0],
+    setHeight = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    left = _useState8[0],
+    setLeft = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    top = _useState10[0],
+    setTop = _useState10[1];
+  useLayoutEffect(function () {
+    if (updateMethod === 'polling') {
+      var newBox = getElementRect(element);
+      setWidth(newBox.width);
+      setHeight(newBox.height);
+      setLeft(newBox.left);
+      setTop(newBox.top);
+    }
+  }, [element, updateMethod]);
+
+  // Souce: https://css-tricks.com/using-requestanimationframe-with-react-hooks/
+  // Use useRef for mutable variables that we want to persist
+  // without triggering a re-render on their change
+  var requestRef = useRef();
+  var previousUpdateTimeRef = useRef();
+  var animate = useCallback(function (time) {
+    if (previousUpdateTimeRef.current !== undefined) {
+      var timeSinceLastUpdate = time - previousUpdateTimeRef.current;
+      if (timeSinceLastUpdate > POSITION_UPDATE_INTERVAL) {
+        var newBox = getElementRect(element);
+        setWidth(newBox.width);
+        setHeight(newBox.height);
+        setLeft(newBox.left);
+        setTop(newBox.top);
+        previousUpdateTimeRef.current = time;
+      }
+    } else {
+      // Initialize previousUpdateTimeRef
+      previousUpdateTimeRef.current = time;
+    }
+    requestRef.current = requestAnimationFrame(animate);
   }, [element]);
+  useEffect(function () {
+    if (updateMethod === 'polling') {
+      requestRef.current = requestAnimationFrame(animate);
+    }
+    return function () {
+      if (requestRef.current !== undefined) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+    // This useEffect should only run on mount and when `element` or `updateMethod` changes.
+  }, [animate, element, updateMethod]);
+  var box = useMemo(function () {
+    return {
+      width: width,
+      height: height,
+      left: left,
+      top: top
+    };
+  }, [width, height, left, top]);
   return box;
 };
 
+/**
+ * Will listen to the document resizing to see if an element has moved positions.
+ * Not using ResizeObserver because of IE11 support.
+ * @param element HTMLElement to watch when resizing.
+ */
+export var useElementBox = function useElementBox(element) {
+  var updateMethod = getBooleanFF('platform.design-system.refresh-spotlight-on-interval') ? 'polling' : 'resizeListener';
+  var boxViaResizeListener = useResizeAwareElementBox(element, updateMethod);
+  var boxViaPolling = usePollingElementBox(element, updateMethod);
+  return updateMethod === 'resizeListener' ? boxViaResizeListener : boxViaPolling;
+};
+
 /**
  * __Element box__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.7.2",
+	"version": "11.8.0",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,11 +46,12 @@
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/motion": "^1.7.0",
+		"@atlaskit/platform-feature-flags": "^0.2.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^8.0.0",
+		"@atlaskit/primitives": "^8.2.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.52.0",
+		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -82,6 +83,11 @@
 		"react-lorem-component": "^0.13.0",
 		"typescript": "~5.4.2"
 	},
+	"platform-feature-flags": {
+		"platform.design-system.refresh-spotlight-on-interval": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": "atlassian-conventions"