@atlaskit/spotlight/dist/cjs/utils/use-position-area/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.usePositionArea = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
/**
 * Future improvements to this might be to check if the target resizes with:
 * ```
 * 		const ro = new ResizeObserver(read);
 * 		ro.observe(targetRef.current);
 * ```
 *
 * No need to do this for the PopoverContent, as it has static height/width.
 */
var usePositionArea = exports.usePositionArea = function usePositionArea(ref) {
  var _useState = (0, _react.useState)(undefined),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    positionArea = _useState2[0],
    setPositionArea = _useState2[1];
  (0, _react.useEffect)(function () {
    var el = ref.current;
    if (!el) {
      return;
    }
    var readPositionArea = function readPositionArea() {
      try {
        var _el$computedStyleMap$;
        return (_el$computedStyleMap$ = el.computedStyleMap().get('position-area')) === null || _el$computedStyleMap$ === void 0 ? void 0 : _el$computedStyleMap$.toString();
      } catch (_unused) {
        // Some old browsers do not support computedStyleMap, so fall back to getPropertyValue
        return window.getComputedStyle(el).getPropertyValue('position-area').trim();
      }
    };
    var read = function read() {
      var positionArea = readPositionArea();
      setPositionArea(positionArea);
    };
    read();
    /**
     * requestAnimationFrame ensures that initial renders are in a different position
     * to the supplied prop value (e.g. the viewport is too small so the position is
     * recalculated) are rendered correctly.
     */
    var rafId = window.requestAnimationFrame(read);

    // Check if the viewport resizes
    var unbindResize = (0, _bindEventListener.bind)(window, {
      type: 'resize',
      listener: read,
      options: {
        passive: true
      }
    });

    // Check if the viewport scrolls
    var unbindScroll = (0, _bindEventListener.bind)(window, {
      type: 'scroll',
      listener: read,
      options: {
        passive: true,
        capture: true
      }
    });
    return function () {
      window.cancelAnimationFrame(rafId);
      unbindResize();
      unbindScroll();
    };
  }, [ref]);
  return positionArea;
};