@blockstack/ui/dist/popper/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
import { createPopper } from '@popperjs/core';

var oppositeDirections = {
  top: 'bottom',
  bottom: 'top',
  right: 'left',
  left: 'right'
};
var getOppositePosition = function getOppositePosition(position) {
  return oppositeDirections[position];
};

var splitPlacement = function splitPlacement(placement) {
  return placement.split('-');
};

function getArrowStyles(placement, arrowSize) {
  var _ref;

  var _splitPlacement = splitPlacement(placement),
      position = _splitPlacement[0];

  var oppositePosition = getOppositePosition(position);
  if (!oppositePosition) return {};
  return _ref = {}, _ref[oppositePosition] = "-" + arrowSize / 2 + "px", _ref.width = arrowSize, _ref.height = arrowSize, _ref.position = 'absolute', _ref.transform = 'rotate(45deg)', _ref;
}
var isBrowser = typeof window !== 'undefined';
var useSafeLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
function usePopper(props) {
  var _props$placement = props.placement,
      initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,
      offsetProp = props.offset,
      _props$preventOverflo = props.preventOverflow,
      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
      _props$fixed = props.fixed,
      fixed = _props$fixed === void 0 ? false : _props$fixed,
      _props$forceUpdate = props.forceUpdate,
      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
      _props$flip = props.flip,
      flip = _props$flip === void 0 ? true : _props$flip,
      _props$arrowSize = props.arrowSize,
      arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
      _props$gutter = props.gutter,
      gutter = _props$gutter === void 0 ? arrowSize : _props$gutter,
      _props$eventsEnabled = props.eventsEnabled,
      eventsEnabled = _props$eventsEnabled === void 0 ? true : _props$eventsEnabled;
  var popper = useRef(null);
  var referenceRef = useRef(null);
  var popoverRef = useRef(null);
  var arrowRef = useRef(null);

  var _React$useState = useState(initialPlacement),
      originalPlacement = _React$useState[0],
      place = _React$useState[1];

  var _React$useState2 = useState(initialPlacement),
      placement = _React$useState2[0],
      setPlacement = _React$useState2[1];

  var _React$useState3 = useState(offsetProp || [0, gutter]),
      offset = _React$useState3[0];

  var _React$useState4 = useState({}),
      popoverStyles = _React$useState4[0],
      setPopoverStyles = _React$useState4[1];

  var _React$useState5 = useState({}),
      arrowStyles = _React$useState5[0],
      setArrowStyles = _React$useState5[1];

  var update = useCallback(function () {
    if (popper.current) {
      popper.current.forceUpdate();
      return true;
    }

    return false;
  }, []);
  useSafeLayoutEffect(function () {
    if (referenceRef.current && popoverRef.current) {
      popper.current = createPopper(referenceRef.current, popoverRef.current, {
        placement: originalPlacement,
        strategy: fixed ? 'fixed' : 'absolute',
        modifiers: [{
          name: 'eventListener',
          phase: 'write',
          enabled: eventsEnabled
        }, {
          name: 'applyStyles',
          enabled: false
        }, {
          name: 'flip',
          enabled: flip,
          options: {
            padding: 8
          }
        }, {
          name: 'computeStyles',
          options: {
            gpuAcceleration: false
          }
        }, {
          name: 'offset',
          options: {
            offset: offset
          }
        }, {
          name: 'preventOverflow',
          enabled: preventOverflow,
          options: {
            tetherOffset: function tetherOffset() {
              var _arrowRef$current;

              return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0;
            }
          }
        }, {
          name: 'arrow',
          enabled: Boolean(arrowRef.current),
          options: {
            element: arrowRef.current
          }
        }, {
          name: 'updateState',
          phase: 'write',
          enabled: true,
          fn: function fn(_ref2) {
            var state = _ref2.state;
            setPlacement(state.placement);
            setPopoverStyles(state.styles.popper);
            setArrowStyles(state.styles.arrow);
          }
        }]
      });
    }

    return function () {
      if (popper.current) {
        popper.current.destroy();
        popper.current = null;
      }
    };
  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
  useSafeLayoutEffect(function () {
    requestAnimationFrame(function () {
      if (forceUpdate) {
        var _popper$current;

        (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate();
      }
    });
  }, [forceUpdate]);

  var computedArrowStyles = _objectSpread2({}, arrowStyles, {}, getArrowStyles(placement, arrowSize));

  return {
    popperInstance: popper.current,
    reference: {
      ref: referenceRef
    },
    popper: {
      ref: popoverRef,
      style: popoverStyles
    },
    arrow: {
      ref: arrowRef,
      style: computedArrowStyles
    },
    update: update,
    placement: placement,
    place: place
  };
}

export { getArrowStyles, getOppositePosition, usePopper };
//# sourceMappingURL=index.esm.js.map