suomifi-ui-components/dist/esm/core/Popover/Popover.js

Suomi.fi UI component library

import { __rest, __assign } from 'tslib';
import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { usePopper } from 'react-popper';
import { useEnhancedEffect } from '../../utils/common/common.js';
import { HtmlDivWithRef } from '../../reset/HtmlDiv/HtmlDiv.js';

var sameWidth = {
  name: 'sameWidth',
  enabled: true,
  phase: 'beforeWrite',
  requires: ['computeStyles'],
  fn: function fn(_a) {
    var state = _a.state;
    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
  },
  effect: function effect(_a) {
    var state = _a.state;
    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
  }
};
var defaultProviderValue = {
  updatePopover: function updatePopover() {
    return null;
  }
};
var _a = /*#__PURE__*/React.createContext(defaultProviderValue),
  PopoverProvider = _a.Provider,
  PopoverConsumer = _a.Consumer;
var Popover = function Popover(props) {
  var _a = props.portalStyleProps,
    portalStyleProps = _a === void 0 ? {} : _a,
    _b = props.placement,
    placement = _b === void 0 ? 'bottom' : _b,
    _c = props.allowFlip,
    allowFlip = _c === void 0 ? false : _c,
    _d = props.matchWidth,
    matchWidth = _d === void 0 ? true : _d,
    children = props.children,
    sourceRef = props.sourceRef,
    onClickOutside = props.onClickOutside,
    _e = props.portal,
    portal = _e === void 0 ? true : _e,
    passProps = __rest(props, ["portalStyleProps", "placement", "allowFlip", "matchWidth", "children", "sourceRef", "onClickOutside", "portal"]);
  var _f = useState(null),
    popperElement = _f[0],
    setPopperElement = _f[1];
  var _g = useState(null),
    mountNode = _g[0],
    setMountNode = _g[1];
  var portalRef = useRef(null);
  var _h = usePopper(sourceRef.current, popperElement, {
      modifiers: [{
        name: 'flip',
        enabled: allowFlip
      }, matchWidth ? sameWidth : {}],
      placement: placement
    }),
    update = _h.update,
    styles = _h.styles;
  useEffect(function () {
    var globalClickHandler = function globalClickHandler(nativeEvent) {
      var _a, _b;
      if (!((_a = portalRef.current) === null || _a === void 0 ? void 0 : _a.contains(nativeEvent.target)) && !((_b = sourceRef === null || sourceRef === void 0 ? void 0 : sourceRef.current) === null || _b === void 0 ? void 0 : _b.contains(nativeEvent.target)) && !!onClickOutside) {
        onClickOutside(nativeEvent);
      }
    };
    document.addEventListener('click', globalClickHandler, {
      capture: true
    });
    return function () {
      document.removeEventListener('click', globalClickHandler, {
        capture: true
      });
    };
  }, [onClickOutside, sourceRef]);
  useEnhancedEffect(function () {
    setMountNode(window.document.body);
  });
  if (portal && !mountNode) {
    return null;
  }
  if (portal && mountNode) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
      className: 'fi-portal',
      ref: setPopperElement,
      style: __assign(__assign({}, styles.popper), portalStyleProps),
      tabIndex: -1,
      role: "presentation"
    }, /*#__PURE__*/React.createElement(HtmlDivWithRef, __assign({
      forwardedRef: portalRef
    }, passProps), /*#__PURE__*/React.createElement(PopoverProvider, {
      value: {
        updatePopover: function updatePopover() {
          return update === null || update === void 0 ? void 0 : update();
        }
      }
    }, children))), mountNode));
  }
  return /*#__PURE__*/React.createElement("div", {
    ref: setPopperElement,
    style: __assign(__assign({}, styles.popper), portalStyleProps),
    tabIndex: -1,
    role: "presentation"
  }, /*#__PURE__*/React.createElement(HtmlDivWithRef, __assign({
    forwardedRef: portalRef
  }, passProps), /*#__PURE__*/React.createElement(PopoverProvider, {
    value: {
      updatePopover: function updatePopover() {
        return update === null || update === void 0 ? void 0 : update();
      }
    }
  }, children)));
};

export { Popover, PopoverConsumer };
//# sourceMappingURL=Popover.js.map