@atlaskit/spotlight 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/spotlight
 
+## 0.5.0
+
+### Minor Changes
+
+- [`72526321aecd0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/72526321aecd0) -
+  Create UNSAFE_UpdateOnChange component to test strategies for recalculating PopoverContent
+  position when the DOM changes.
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/cjs/controllers/context.js

@@ -10,6 +10,8 @@ exports.SpotlightContextProvider = exports.SpotlightContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -25,6 +27,22 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
     setId: function setId() {
       return undefined;
     }
+  },
+  popoverContent: {
+    update: function update() {
+      return function () {
+        return new Promise(function () {
+          return null;
+        });
+      };
+    },
+    setUpdate: function setUpdate() {
+      return function () {
+        return new Promise(function () {
+          return null;
+        });
+      };
+    }
   }
 });
 
@@ -40,6 +58,22 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     headingId = _useState4[0],
     setHeadingId = _useState4[1];
+  var _useState5 = (0, _react.useState)(function () {
+      return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", undefined);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    update = _useState6[0],
+    setUpdate = _useState6[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
@@ -47,6 +81,10 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
       heading: {
         id: headingId,
         setId: setHeadingId
+      },
+      popoverContent: {
+        update: update,
+        setUpdate: setUpdate
       }
     }
   }, children);

package/dist/cjs/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "SpotlightStepCount", {
     return _stepCount.SpotlightStepCount;
   }
 });
+Object.defineProperty(exports, "UNSAFE_UpdateOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _UNSAFE_updateOnChange.UNSAFE_UpdateOnChange;
+  }
+});
 var _card = require("./ui/card");
 var _body = require("./ui/body");
 var _header = require("./ui/header");
@@ -114,4 +120,5 @@ var _showMoreControl = require("./ui/show-more-control");
 var _media = require("./ui/media");
 var _popoverProvider = require("./ui/popover-provider");
 var _popoverContent = require("./ui/popover-content");
-var _popoverTarget = require("./ui/popover-target");
+var _popoverTarget = require("./ui/popover-target");
+var _UNSAFE_updateOnChange = require("./ui/UNSAFE_update-on-change");

package/dist/cjs/ui/UNSAFE_update-on-change/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_UpdateOnChange = void 0;
+var _react = require("react");
+var _browserApis = require("@atlaskit/browser-apis");
+var _context = require("../../controllers/context");
+var defaultOptions = {
+  childList: true,
+  subtree: true
+};
+var UNSAFE_UpdateOnChange = exports.UNSAFE_UpdateOnChange = function UNSAFE_UpdateOnChange(_ref) {
+  var _ref$selectors = _ref.selectors,
+    selectors = _ref$selectors === void 0 ? ['body'] : _ref$selectors,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? defaultOptions : _ref$options;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    popoverContent = _useContext.popoverContent;
+  var update = popoverContent.update;
+  (0, _react.useEffect)(function () {
+    if (!update || selectors.length === 0) {
+      return;
+    }
+    var doc = (0, _browserApis.getDocument)();
+    if (!doc) {
+      return;
+    }
+    var elements = new Set();
+    selectors.forEach(function (selector) {
+      var element = doc.querySelector(selector);
+      if (!element) {
+        return;
+      }
+      elements.add(element);
+    });
+    if (elements.size === 0) {
+      return;
+    }
+    var observers = [];
+    elements.forEach(function (element) {
+      var observer = new MutationObserver(function (mutations) {
+        if (mutations.length === 0) {
+          return;
+        }
+        update();
+      });
+      observer.observe(element, options);
+      observers.push(observer);
+    });
+    return function () {
+      observers.forEach(function (observer) {
+        return observer.disconnect();
+      });
+    };
+  }, [selectors, options, update]);
+  return null;
+};

package/dist/cjs/ui/popover-content/index.js

@@ -22,7 +22,7 @@ var styles = {
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
  * the caret points to the very edge of the target element.
  *
- * Note: `@atlaskit/popper` maps the offset to to the placement, so we only need to define `[0, 2]` and
+ * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
 var offset = [0, 2];
@@ -56,21 +56,36 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
     testId = _ref.testId;
+  var updateRef = (0, _react.useRef)(function () {
+    return new Promise(function () {
+      return undefined;
+    });
+  });
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
-    setPlacement = _useContext.setPlacement,
-    heading = _useContext.heading;
+    heading = _useContext.heading,
+    popoverContent = _useContext.popoverContent,
+    setPlacement = _useContext.setPlacement;
   (0, _react.useEffect)(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
+  (0, _react.useEffect)(function () {
+    if (updateRef.current) {
+      popoverContent.setUpdate(function () {
+        return updateRef.current;
+      });
+    }
+  }, [popoverContent]);
   return /*#__PURE__*/React.createElement(_popper.Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
   }, function (_ref2) {
     var ref = _ref2.ref,
-      style = _ref2.style;
+      style = _ref2.style,
+      update = _ref2.update;
     if (!isVisible) {
       return;
     }
+    updateRef.current = update;
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
       "data-testid": testId,

package/dist/es2019/controllers/context.js

@@ -12,6 +12,10 @@ export const SpotlightContext = /*#__PURE__*/createContext({
   heading: {
     id: '',
     setId: () => undefined
+  },
+  popoverContent: {
+    update: () => () => new Promise(() => null),
+    setUpdate: () => () => new Promise(() => null)
   }
 });
 
@@ -22,6 +26,7 @@ export const SpotlightContextProvider = ({
   const id = useId();
   const [placement, setPlacement] = useState('bottom-end');
   const [headingId, setHeadingId] = useState(`${id}-heading`);
+  const [update, setUpdate] = useState(() => async () => undefined);
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement,
@@ -29,6 +34,10 @@ export const SpotlightContextProvider = ({
       heading: {
         id: headingId,
         setId: setHeadingId
+      },
+      popoverContent: {
+        update,
+        setUpdate
       }
     }
   }, children);

package/dist/es2019/index.js

@@ -13,4 +13,5 @@ export { SpotlightShowMoreControl } from './ui/show-more-control';
 export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
-export { PopoverTarget } from './ui/popover-target';
+export { PopoverTarget } from './ui/popover-target';
+export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/es2019/ui/UNSAFE_update-on-change/index.js

@@ -0,0 +1,53 @@
+import { useContext, useEffect } from "react";
+import { getDocument } from "@atlaskit/browser-apis";
+import { SpotlightContext } from "../../controllers/context";
+const defaultOptions = {
+  childList: true,
+  subtree: true
+};
+export const UNSAFE_UpdateOnChange = ({
+  selectors = ['body'],
+  options = defaultOptions
+}) => {
+  const {
+    popoverContent
+  } = useContext(SpotlightContext);
+  const {
+    update
+  } = popoverContent;
+  useEffect(() => {
+    if (!update || selectors.length === 0) {
+      return;
+    }
+    const doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    const elements = new Set();
+    selectors.forEach(selector => {
+      const element = doc.querySelector(selector);
+      if (!element) {
+        return;
+      }
+      elements.add(element);
+    });
+    if (elements.size === 0) {
+      return;
+    }
+    const observers = [];
+    elements.forEach(element => {
+      const observer = new MutationObserver(mutations => {
+        if (mutations.length === 0) {
+          return;
+        }
+        update();
+      });
+      observer.observe(element, options);
+      observers.push(observer);
+    });
+    return () => {
+      observers.forEach(observer => observer.disconnect());
+    };
+  }, [selectors, options, update]);
+  return null;
+};

package/dist/es2019/ui/popover-content/index.js

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 const styles = {
@@ -14,7 +14,7 @@ const styles = {
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
  * the caret points to the very edge of the target element.
  *
- * Note: `@atlaskit/popper` maps the offset to to the placement, so we only need to define `[0, 2]` and
+ * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
 const offset = [0, 2];
@@ -48,23 +48,32 @@ export const PopoverContent = ({
   isVisible = true,
   testId
 }) => {
+  const updateRef = useRef(() => new Promise(() => undefined));
   const {
-    setPlacement,
-    heading
+    heading,
+    popoverContent,
+    setPlacement
   } = useContext(SpotlightContext);
   useEffect(() => {
     setPlacement(placement);
   }, [placement, setPlacement]);
+  useEffect(() => {
+    if (updateRef.current) {
+      popoverContent.setUpdate(() => updateRef.current);
+    }
+  }, [popoverContent]);
   return /*#__PURE__*/React.createElement(Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
   }, ({
     ref,
-    style
+    style,
+    update
   }) => {
     if (!isVisible) {
       return;
     }
+    updateRef.current = update;
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
       "data-testid": testId,

package/dist/esm/controllers/context.js

@@ -1,7 +1,9 @@
 /* context.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { createContext, useId, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -17,6 +19,22 @@ export var SpotlightContext = /*#__PURE__*/createContext({
     setId: function setId() {
       return undefined;
     }
+  },
+  popoverContent: {
+    update: function update() {
+      return function () {
+        return new Promise(function () {
+          return null;
+        });
+      };
+    },
+    setUpdate: function setUpdate() {
+      return function () {
+        return new Promise(function () {
+          return null;
+        });
+      };
+    }
   }
 });
 
@@ -32,6 +50,22 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     headingId = _useState4[0],
     setHeadingId = _useState4[1];
+  var _useState5 = useState(function () {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", undefined);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    update = _useState6[0],
+    setUpdate = _useState6[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
@@ -39,6 +73,10 @@ export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
       heading: {
         id: headingId,
         setId: setHeadingId
+      },
+      popoverContent: {
+        update: update,
+        setUpdate: setUpdate
       }
     }
   }, children);

package/dist/esm/index.js

@@ -13,4 +13,5 @@ export { SpotlightShowMoreControl } from './ui/show-more-control';
 export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';
-export { PopoverTarget } from './ui/popover-target';
+export { PopoverTarget } from './ui/popover-target';
+export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/esm/ui/UNSAFE_update-on-change/index.js

@@ -0,0 +1,53 @@
+import { useContext, useEffect } from "react";
+import { getDocument } from "@atlaskit/browser-apis";
+import { SpotlightContext } from "../../controllers/context";
+var defaultOptions = {
+  childList: true,
+  subtree: true
+};
+export var UNSAFE_UpdateOnChange = function UNSAFE_UpdateOnChange(_ref) {
+  var _ref$selectors = _ref.selectors,
+    selectors = _ref$selectors === void 0 ? ['body'] : _ref$selectors,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? defaultOptions : _ref$options;
+  var _useContext = useContext(SpotlightContext),
+    popoverContent = _useContext.popoverContent;
+  var update = popoverContent.update;
+  useEffect(function () {
+    if (!update || selectors.length === 0) {
+      return;
+    }
+    var doc = getDocument();
+    if (!doc) {
+      return;
+    }
+    var elements = new Set();
+    selectors.forEach(function (selector) {
+      var element = doc.querySelector(selector);
+      if (!element) {
+        return;
+      }
+      elements.add(element);
+    });
+    if (elements.size === 0) {
+      return;
+    }
+    var observers = [];
+    elements.forEach(function (element) {
+      var observer = new MutationObserver(function (mutations) {
+        if (mutations.length === 0) {
+          return;
+        }
+        update();
+      });
+      observer.observe(element, options);
+      observers.push(observer);
+    });
+    return function () {
+      observers.forEach(function (observer) {
+        return observer.disconnect();
+      });
+    };
+  }, [selectors, options, update]);
+  return null;
+};

package/dist/esm/ui/popover-content/index.js

@@ -2,7 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { Popper } from '@atlaskit/popper';
 import { SpotlightContext } from '../../controllers/context';
 var styles = {
@@ -14,7 +14,7 @@ var styles = {
  * the caret extending beyond the bounding box (by roughly 2px). So, apply an offset to ensure
  * the caret points to the very edge of the target element.
  *
- * Note: `@atlaskit/popper` maps the offset to to the placement, so we only need to define `[0, 2]` and
+ * Note: `@atlaskit/popper` maps the offset to the placement, so we only need to define `[0, 2]` and
  * the offset will get correctly rotated depending on the placement.
  */
 var offset = [0, 2];
@@ -48,21 +48,36 @@ export var PopoverContent = function PopoverContent(_ref) {
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
     testId = _ref.testId;
+  var updateRef = useRef(function () {
+    return new Promise(function () {
+      return undefined;
+    });
+  });
   var _useContext = useContext(SpotlightContext),
-    setPlacement = _useContext.setPlacement,
-    heading = _useContext.heading;
+    heading = _useContext.heading,
+    popoverContent = _useContext.popoverContent,
+    setPlacement = _useContext.setPlacement;
   useEffect(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
+  useEffect(function () {
+    if (updateRef.current) {
+      popoverContent.setUpdate(function () {
+        return updateRef.current;
+      });
+    }
+  }, [popoverContent]);
   return /*#__PURE__*/React.createElement(Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
   }, function (_ref2) {
     var ref = _ref2.ref,
-      style = _ref2.style;
+      style = _ref2.style,
+      update = _ref2.update;
     if (!isVisible) {
       return;
     }
+    updateRef.current = update;
     return /*#__PURE__*/React.createElement("div", {
       role: "dialog",
       "data-testid": testId,

package/dist/types/controllers/context.d.ts

@@ -4,16 +4,19 @@
  */
 import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import type { Placement } from '../types';
-interface SpotlightContextType {
+export interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
     heading: {
         id: string;
         setId: Dispatch<SetStateAction<string>>;
     };
+    popoverContent: {
+        update: () => () => Promise<any>;
+        setUpdate: Dispatch<SetStateAction<() => () => Promise<any>>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;
-export {};

package/dist/types/index.d.ts

@@ -15,3 +15,4 @@ export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent, type PopoverContentProps } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
 export { type Placement } from './types';
+export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/types/ui/UNSAFE_update-on-change/index.d.ts

@@ -0,0 +1,6 @@
+interface UpdateOnChangeProps {
+    selectors?: string[];
+    options?: MutationObserverInit;
+}
+export declare const UNSAFE_UpdateOnChange: ({ selectors, options }: UpdateOnChangeProps) => null;
+export {};

package/dist/types-ts4.5/controllers/context.d.ts

@@ -4,16 +4,19 @@
  */
 import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import type { Placement } from '../types';
-interface SpotlightContextType {
+export interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
     heading: {
         id: string;
         setId: Dispatch<SetStateAction<string>>;
     };
+    popoverContent: {
+        update: () => () => Promise<any>;
+        setUpdate: Dispatch<SetStateAction<() => () => Promise<any>>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;
-export {};

package/dist/types-ts4.5/index.d.ts

@@ -15,3 +15,4 @@ export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent, type PopoverContentProps } from './ui/popover-content';
 export { PopoverTarget } from './ui/popover-target';
 export { type Placement } from './types';
+export { UNSAFE_UpdateOnChange } from './ui/UNSAFE_update-on-change';

package/dist/types-ts4.5/ui/UNSAFE_update-on-change/index.d.ts

@@ -0,0 +1,6 @@
+interface UpdateOnChangeProps {
+    selectors?: string[];
+    options?: MutationObserverInit;
+}
+export declare const UNSAFE_UpdateOnChange: ({ selectors, options }: UpdateOnChangeProps) => null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,7 +26,8 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/button": "^23.4.0",
+		"@atlaskit/browser-apis": "^0.0.1",
+		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.3.0",