@atlaskit/onboarding - npm Package Compare versions

Comparing version 11.7.2 to 11.8.0

dist/cjs/components/spotlight-dialog.js

@@ -30,3 +30,3 @@ "use strict";
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.7.2";
+var packageVersion = "11.8.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
@@ -33,0 +33,0 @@ (0, _inherits2.default)(SpotlightDialog, _Component);

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

@@ -11,2 +11,5 @@ "use strict";
 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) {
@@ -25,9 +28,3 @@ var _element$getBoundingC = element.getBoundingClientRect(),
 };
-
-/**
- * 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)({
@@ -43,4 +40,6 @@ width: 0,
   (0, _react.useLayoutEffect)(function () {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   (0, _react.useEffect)(function () {
@@ -52,7 +51,83 @@ var onResize = function onResize() {
     };
-    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;
@@ -62,2 +137,14 @@ };
 /**
+ * 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__
@@ -64,0 +151,0 @@ *

dist/es2019/components/spotlight-dialog.js

@@ -10,3 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.7.2";
+const packageVersion = "11.8.0";
 class SpotlightDialog extends Component {
@@ -13,0 +13,0 @@ constructor(...args) {

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

@@ -1,3 +0,6 @@
-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 => {
@@ -17,9 +20,3 @@ const {
 };
-
-/**
- * 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({
@@ -32,4 +29,6 @@ width: 0,
   useLayoutEffect(() => {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   useEffect(() => {
@@ -41,7 +40,69 @@ const onResize = () => {
     };
-    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;
@@ -51,2 +112,14 @@ };
 /**
+ * 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__
@@ -53,0 +126,0 @@ *

dist/esm/components/spotlight-dialog.js

@@ -20,3 +20,3 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.7.2";
+var packageVersion = "11.8.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
@@ -23,0 +23,0 @@ _inherits(SpotlightDialog, _Component);

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

 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) {
@@ -17,9 +20,3 @@ var _element$getBoundingC = element.getBoundingClientRect(),
 };
-
-/**
- * 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({
@@ -35,4 +32,6 @@ width: 0,
   useLayoutEffect(function () {
-    setBox(getElementRect(element));
-  }, [element]);
+    if (updateMethod === 'resizeListener') {
+      setBox(getElementRect(element));
+    }
+  }, [element, updateMethod]);
   useEffect(function () {
@@ -44,7 +43,83 @@ var onResize = function onResize() {
     };
-    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;
@@ -54,2 +129,14 @@ };
 /**
+ * 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__
@@ -56,0 +143,0 @@ *

package.json

 {
 	"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.",
@@ -49,7 +49,8 @@ "publishConfig": {
 		"@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",
@@ -86,2 +87,7 @@ "@emotion/react": "^11.7.1",
 	},
+	"platform-feature-flags": {
+		"platform.design-system.refresh-spotlight-on-interval": {
+			"type": "boolean"
+		}
+	},
 	"techstack": {
@@ -88,0 +94,0 @@ "@atlassian/frontend": {

No alert changes

Improved metrics

Total package byte prevSize

323268

increased by3.5%

Lines of code

6453

increased by3.93%

Worsened metrics

Dependency count

24

increased by4.35%

Published versions last two months

17

decreased by-5.56%

Published versions last week

3

decreased by-25%

Dependency changes

• + Added@atlaskit/platform-feature-flags@^0.2.0

• + Added@atlaskit/motion@1.7.4(transitive)

• + Added@atlaskit/platform-feature-flags@0.2.6(transitive)

• + Added@atlaskit/visually-hidden@1.4.1(transitive)

• - Removed@atlaskit/motion@1.7.3(transitive)

• - Removed@atlaskit/visually-hidden@1.4.0(transitive)

• Updated@atlaskit/primitives@^8.2.0

• Updated@atlaskit/tokens@^1.53.0