@activecollab/components/dist/esm/components/Popper/Popper.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
import React, { forwardRef, useCallback, useRef, useEffect, useState } from "react";
import { createPopper } from "@popperjs/core";
import { StyledPopper } from "./Styles";
import useForkRef from "../../utils/useForkRef";
export const Popper = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
      children,
      anchorEl,
      open = false,
      style,
      transition = false,
      placement: initialPlacement = "bottom",
      strategy = "absolute",
      afterWrite
    } = _ref,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const [exited, setExited] = useState(true);
  const [placement, setPlacement] = useState(initialPlacement);
  const ownRef = useRef(null);
  const popperRef = useRef();
  const handleInnerRef = useForkRef(ownRef, ref);
  const handlePopperUpdate = data => {
    setPlacement(data.placement || "bottom");
  };
  const handleOpen = useCallback(() => {
    if (!ownRef.current || !anchorEl || !open) {
      return;
    }
    if (popperRef.current) {
      popperRef.current.destroy();
    }
    const modifiers = [{
      name: "hide",
      enabled: true,
      phase: "main",
      fn: () => {
        const referenceElement = anchorEl;
        let currentElement = referenceElement;
        let isHidden = false;
        while (currentElement) {
          const computedStyle = getComputedStyle(currentElement);
          if (computedStyle.display === "none" || computedStyle.visibility === "hidden") {
            isHidden = true;
            break;
          }
          currentElement = currentElement.parentElement;
        }
        if (isHidden) {
          var _ownRef$current;
          (_ownRef$current = ownRef.current) == null || _ownRef$current.setAttribute("data-popper-reference-hidden", "");
        } else {
          var _ownRef$current2;
          (_ownRef$current2 = ownRef.current) == null || _ownRef$current2.removeAttribute("data-popper-reference-hidden");
        }
      }
    }];
    if (typeof afterWrite === "function") {
      modifiers.push({
        phase: "afterWrite",
        enabled: true,
        name: "popper-after-write",
        fn: afterWrite
      });
    }
    popperRef.current = createPopper(anchorEl, ownRef.current, {
      placement,
      onFirstUpdate: handlePopperUpdate,
      strategy,
      modifiers
    });
  }, [afterWrite, anchorEl, open, placement, strategy]);
  const handleClose = () => {
    if (!popperRef.current) {
      return;
    }
    popperRef.current.destroy();
  };
  const handleRef = useCallback(node => {
    handleInnerRef(node);
    handleOpen();
  }, [handleOpen, handleInnerRef]);
  const handleEnter = () => {
    setExited(false);
  };
  const handleExited = () => {
    setExited(true);
    handleClose();
  };
  useEffect(() => {
    return () => {
      handleClose();
    };
  }, []);
  useEffect(() => {
    if (!open && !transition) {
      handleClose();
    }
  }, [open, transition]);
  useEffect(() => {
    if (popperRef.current) {
      popperRef.current.update();
    }
  });
  if (!open && (!transition || exited)) {
    return null;
  }
  const childProps = {
    placement
  };
  if (transition) {
    childProps.transitionProps = {
      in: open,
      onEnter: handleEnter,
      onExited: handleExited
    };
  }
  return /*#__PURE__*/React.createElement(StyledPopper, _extends({
    ref: handleRef
  }, rest, {
    style: _extends({}, style)
  }), typeof children === "function" ? children(childProps) : children);
});
Popper.displayName = "Popper";
//# sourceMappingURL=Popper.js.map