@material-ui/core#PopperProps TypeScript Examples

render() {
    const {
      children,
      classes,
      theme,
      paperClassName,
      zIndex,
      onClose,
      anchorType,
      closeButtonPosition,
      clickAway,
      clickAwayProps,
      arrow,
      transitionCmpt,
      transitionProps,
      placement,
      useBackdrop,
      ...popperProps
    } = this.props;

    const TransitionCmpt = transitionCmpt || Fade;

    var anchorEl: PopperProps['anchorEl'];
    if (this.props.anchorType === 'native') {
      anchorEl = this.props.anchor;
    } else {
      // Overly complicated way to ensure popper.js
      // always gets some kind of coordinates
      anchorEl = () => {
        var el: ReferenceObject | undefined | null;
        if (!el && this.props.anchorType === 'ref') {
          el = this.props.anchor.current;
        }
        if (!el && this.props.anchorType === 'element') {
          el = (typeof this.props.anchor === 'function')
            ? this.props.anchor()
            : this.props.anchor;
        }
        if (!el && this.props.anchorType === 'virtual') {
          const virtualAnchor = this.props.anchor;
          const bounds = virtualAnchor?.() || this.boundsLast;
          if (!!bounds) {
            this.boundsLast = bounds;
          }
          if (bounds) {
            el = {
              clientHeight: bounds.height,
              clientWidth: bounds.width,
              getBoundingClientRect: () => {
                const boundsInner = virtualAnchor?.() || this.boundsLast || bounds;
                this.boundsLast = boundsInner;
                const domRect: MyDomRect = {
                  height: boundsInner.height,
                  width: boundsInner.width,
                  top: boundsInner.top,
                  bottom: boundsInner.top + boundsInner.height,
                  left: boundsInner.left,
                  right: boundsInner.left + boundsInner.width,
                  x: boundsInner.width >= 0 ? boundsInner.left : (boundsInner.left - boundsInner.width),
                  y: boundsInner.height >= 0 ? boundsInner.top : (boundsInner.top - boundsInner.height),
                  toJSON: () => domRect,
                };
                return domRect;
              }
            }
          }
        }
        if (!el) {
          el = this.anchorRef.current;
        }
        if (!el) {
          const domRect: MyDomRect = {
            height: 0,
            width: 0,
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            x: 0,
            y: 0,
            toJSON: () => domRect,
          };
          el = {
            clientHeight: 0,
            clientWidth: 0,
            getBoundingClientRect: () => domRect,
          };
        }
        return el;
      };
    }

    return (
      <>
        <div ref={this.anchorRef} />
        <Popper
          placement={placement || 'right-start'}
          transition
          {...popperProps}
          anchorEl={anchorEl}
          className={classNames(
            classes.popper,
            popperProps.className,
            !popperProps.open && classes.hidden,
          )}
          modifiers={{
            ...(arrow ? {
              arrow: {
                enabled: true,
                element: this.arrowRef.current || '[x-arrow]',
              },
            } : {}),
            ...(popperProps.modifiers || {}),
          }}
        >
          {props => (
            <ClickAwayListener
              mouseEvent='onMouseDown'
              onClickAway={() => clickAway && onClose()}
              {...clickAwayProps}
            >
              <TransitionCmpt
                {...props.TransitionProps}
                {...transitionProps}
              >
                <Paper className={classNames(paperClassName, classes.paper)}>
                  {arrow && (
                    <span x-arrow='true' className={classes.arrow} ref={this.arrowRef} />
                  )}
                  {closeButtonPosition !== 'disable' && (
                    <IconButton
                      classes={{
                        label: classes.closeButtonLabel,
                        root: classNames(
                          classes.closeButton,
                          (closeButtonPosition === 'top-right' || !closeButtonPosition) && classes.closeButtonTopRight,
                          closeButtonPosition === 'top-left' && classes.closeButtonTopLeft,
                        ),
                      }}
                      aria-label="Close"
                      onClick={() => onClose()}
                    >
                      <CloseIcon className={classes.closeIcon} fontSize='inherit' />
                    </IconButton>
                  )}
                  {children}
                </Paper>
              </TransitionCmpt>
            </ClickAwayListener>
          )}
        </Popper>
      </>
    );
  }