@primer/components/lib/hooks/useAnchoredPosition.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAnchoredPosition = useAnchoredPosition;

var _react = _interopRequireDefault(require("react"));

var _anchoredPosition = require("../behaviors/anchoredPosition");

var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");

var _useResizeObserver = require("./useResizeObserver");

var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Calculates the top and left values for an absolutely-positioned floating element
 * to be anchored to some anchor element. Returns refs for the floating element
 * and the anchor element, along with the position.
 * @param settings Settings for calculating the anchored position.
 * @param dependencies Dependencies to determine when to re-calculate the position.
 * @returns An object of {top: number, left: number} to absolutely-position the
 * floating element.
 */
function useAnchoredPosition(settings, dependencies = []) {
  const floatingElementRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
  const anchorElementRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);

  const [position, setPosition] = _react.default.useState(undefined);

  const updatePosition = _react.default.useCallback(() => {
    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
      setPosition((0, _anchoredPosition.getAnchoredPosition)(floatingElementRef.current, anchorElementRef.current, settings));
    } else {
      setPosition(undefined);
    }
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [floatingElementRef, anchorElementRef, ...dependencies]);

  (0, _useIsomorphicLayoutEffect.default)(updatePosition, [updatePosition]);
  (0, _useResizeObserver.useResizeObserver)(updatePosition);
  return {
    floatingElementRef,
    anchorElementRef,
    position
  };
}