@atlaskit/spotlight/dist/esm/ui/UNSAFE_update-on-change/legacy.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

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;
};