@fluentui/react-northstar/dist/commonjs/utils/positioner/Popper.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.Popper = void 0;
var _reactBindings = require("@fluentui/react-bindings");
var _reactComponentRef = require("@fluentui/react-component-ref");
var React = _interopRequireWildcard(require("react"));
var _positioningHelper = require("./positioningHelper");
var _usePopper2 = require("./usePopper");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 * Popper relies on the 3rd party library [Popper.js](https://github.com/FezVrasta/popper.js) for positioning.
 *
 * @deprecated Please use "usePopper()" hook instead.
 */
var Popper = function Popper(props) {
  var usesRenderProps = typeof props.children === 'function';
  var proposedPlacement = (0, _positioningHelper.getPlacement)(props.align, props.position, props.rtl);
  var latestPlacement = React.useRef(proposedPlacement);
  var _React$useState = React.useState(proposedPlacement),
    computedPlacement = _React$useState[0],
    setComputedPlacement = _React$useState[1];
  var popperRef = React.useRef(null);
  var _usePopper = (0, _usePopper2.usePopper)(Object.assign({}, props, {
      popperRef: (0, _reactBindings.useMergedRefs)(props.popperRef, popperRef),
      onStateUpdate: function onStateUpdate(state) {
        // PopperJS performs computations that might update the computed placement: auto positioning, flipping the
        // placement in case the popper box should be rendered at the edge of the viewport and does not fit
        if (state.placement !== latestPlacement.current) {
          latestPlacement.current = state.placement;

          // A state change has sense only if renderProps are passed, otherwise a state value is unused
          if (usesRenderProps) {
            setComputedPlacement(state.placement);
          }
        }
      }
    })),
    targetRef = _usePopper.targetRef,
    containerRef = _usePopper.containerRef,
    arrowRef = _usePopper.arrowRef;
  (0, _reactBindings.useIsomorphicLayoutEffect)(function () {
    var _props$pointerTargetR;
    // A way to sync refs, is needed as Popper component accepts refs as params
    // Does not make anything worse as Popper component does not have proper handing for ref updates ¯\_(ツ)_/¯
    targetRef.current = (0, _reactComponentRef.isRefObject)(props.targetRef) ? props.targetRef.current : props.targetRef;
    arrowRef.current = (_props$pointerTargetR = props.pointerTargetRef) == null ? void 0 : _props$pointerTargetR.current;
  });
  var scheduleUpdate = React.useCallback(function () {
    var _popperRef$current;
    (_popperRef$current = popperRef.current) == null ? void 0 : _popperRef$current.updatePosition();
  }, []);
  var child = usesRenderProps ? props.children({
    placement: computedPlacement,
    scheduleUpdate: scheduleUpdate
  }) : props.children;
  return child ? /*#__PURE__*/React.createElement(_reactComponentRef.Ref, {
    innerRef: containerRef
  }, React.Children.only(child)) : null;
};
exports.Popper = Popper;
Popper.defaultProps = {
  enabled: true,
  modifiers: [],
  positionFixed: false,
  positioningDependencies: []
};
//# sourceMappingURL=Popper.js.map