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

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var ReactDOM = require('react-dom');
var common = require('../../utils/common/common.js');
var HtmlDiv = require('../../reset/HtmlDiv/HtmlDiv.js');
var reactDom = require('@floating-ui/react-dom');
var classnames = require('classnames');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var defaultProviderValue = {
  updatePopover: function updatePopover() {
    return null;
  },
  popoverPlacement: 'bottom'
};
var _a = /*#__PURE__*/React__default.default.createContext(defaultProviderValue),
  PopoverProvider = _a.Provider,
  PopoverConsumer = _a.Consumer;
var Popover = function Popover(props) {
  var _a = props.placement,
    placement = _a === void 0 ? 'bottom' : _a,
    _b = props.allowFlip,
    allowFlip = _b === void 0 ? true : _b,
    _c = props.matchWidth,
    matchWidth = _c === void 0 ? true : _c,
    children = props.children,
    sourceRef = props.sourceRef,
    onClickOutside = props.onClickOutside,
    _d = props.portal,
    portal = _d === void 0 ? true : _d,
    className = props.className,
    passProps = tslib.__rest(props, ["placement", "allowFlip", "matchWidth", "children", "sourceRef", "onClickOutside", "portal", "className"]);
  var _e = React.useState(null),
    floatingElement = _e[0],
    setFloatingElement = _e[1];
  var _f = React.useState(null),
    mountNode = _f[0],
    setMountNode = _f[1];
  var _g = React.useState(false),
    isPositioned = _g[0],
    setIsPositioned = _g[1];
  var portalRef = React.useRef(null);
  var _h = reactDom.useFloating({
      open: true,
      middleware: tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], allowFlip ? [reactDom.flip()] : [], true), [reactDom.shift()], false), matchWidth ? [reactDom.size({
        apply: function apply(_a) {
          var rects = _a.rects,
            elements = _a.elements;
          var floatingEl = elements.floating;
          floatingEl.style.width = "".concat(rects.reference.width, "px");
        }
      })] : [], true),
      whileElementsMounted: reactDom.autoUpdate,
      placement: placement
    }),
    floatingUiRefs = _h.refs,
    floatingStyles = _h.floatingStyles,
    resolvedPlacement = _h.placement,
    update = _h.update;
  React.useEffect(function () {
    if (sourceRef.current) {
      floatingUiRefs.setReference(sourceRef.current);
    }
  }, [floatingUiRefs, sourceRef]);
  React.useEffect(function () {
    if (floatingElement) {
      floatingUiRefs.setFloating(floatingElement);
    }
  }, [floatingUiRefs, floatingElement]);
  React.useLayoutEffect(function () {
    if (floatingElement && floatingStyles.position) {
      requestAnimationFrame(function () {
        requestAnimationFrame(function () {
          setIsPositioned(true);
        });
      });
    }
  }, [floatingElement, floatingStyles.position]);
  var _j = React.useState(placement),
    consumerPlacement = _j[0],
    setConsumerPlacement = _j[1];
  React.useEffect(function () {
    setConsumerPlacement(resolvedPlacement);
  }, [resolvedPlacement]);
  var providerValue = React.useMemo(function () {
    return {
      updatePopover: function updatePopover() {
        return update === null || update === void 0 ? void 0 : update();
      },
      popoverPlacement: consumerPlacement || placement
    };
  }, [update, consumerPlacement, placement]);
  React.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]);
  common.useEnhancedEffect(function () {
    setMountNode(window.document.body);
  });
  if (portal && !mountNode) {
    return null;
  }
  if (portal && mountNode) {
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/ReactDOM__default.default.createPortal( /*#__PURE__*/React__default.default.createElement("div", {
      className: classnames__default.default('fi-portal', className),
      ref: setFloatingElement,
      style: tslib.__assign(tslib.__assign({}, floatingStyles), {
        visibility: isPositioned ? 'visible' : 'hidden'
      }),
      tabIndex: -1,
      role: "presentation"
    }, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, tslib.__assign({
      forwardedRef: portalRef
    }, passProps), /*#__PURE__*/React__default.default.createElement(PopoverProvider, {
      value: providerValue
    }, children))), mountNode));
  }
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: className,
    ref: setFloatingElement,
    style: tslib.__assign(tslib.__assign({}, floatingStyles), {
      visibility: isPositioned ? 'visible' : 'hidden'
    }),
    tabIndex: -1,
    role: "presentation"
  }, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, tslib.__assign({
    forwardedRef: portalRef
  }, passProps), /*#__PURE__*/React__default.default.createElement(PopoverProvider, {
    value: providerValue
  }, children)));
};

exports.Popover = Popover;
exports.PopoverConsumer = PopoverConsumer;
//# sourceMappingURL=Popover.js.map