1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495import React, {
  CSSProperties,
  ReactElement,
  useCallback,
  useRef,
  useState,
} from "react";
import { Button } from "@react-md/button";
import { TextIconSpacing } from "@react-md/icon";
import { List, ListItem } from "@react-md/list";
import { ArrowDropDownSVGIcon } from "@react-md/material-icons";
import { Overlay } from "@react-md/overlay";
import { Text } from "@react-md/typography";
import { getFixedPosition, ScrollListener, useToggle } from "@react-md/utils";

import styles from "./SimpleExample.module.scss";

export default function Demo(): ReactElement {
  const [visible, , hide, toggle] = useToggle(false);
  const [style, setStyle] = useState<CSSProperties | undefined>();
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const listRef = useRef<HTMLUListElement | null>(null);

  const updatePosition = useCallback(() => {
    setStyle(
      getFixedPosition({
        container: buttonRef.current,
        element: listRef.current,
      }).style
    );
  }, []);
  const listRefCB = useCallback((list: HTMLUListElement | null) => {
    listRef.current = list;

    updatePosition();
    // only want to call this once on mount
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={styles.container}>
      <Button
        id="portal-button"
        theme="secondary"
        themeType="outline"
        aria-haspopup="true"
        aria-expanded={visible}
        onClick={toggle}
        ref={buttonRef}
      >
        <TextIconSpacing icon={<ArrowDropDownSVGIcon />} iconAfter>
          Options...
        </TextIconSpacing>
      </Button>
      <Overlay
        id="portal-menu-overlay"
        className={styles.overlay}
        visible={visible}
        onRequestClose={hide}
      >
        <List
          role="menu"
          id="portal-menu"
          aria-labelledby="portal-button"
          tabIndex={-1}
          ref={listRefCB}
          style={style}
          className={styles.menu}
          onClick={(event) => {
            if (event.currentTarget !== event.target) {
              hide();
            }
          }}
        >
          <ScrollListener onScroll={updatePosition} />
          {Array.from({ length: 6 }).map((_, i) => (
            <ListItem id={`menu-item-${i}`} key={i} role="menuitem">
              {`Option ${i + 1}`}
            </ListItem>
          ))}
        </List>
      </Overlay>
      <Text>
        In condimentum ultrices metus ut viverra. In faucibus erat eu massa
        tincidunt finibus. Donec eget quam venenatis, venenatis arcu sed, mollis
        tellus. Mauris massa nunc, condimentum quis nisi vel, fermentum
        pellentesque est. Pellentesque varius rhoncus dui. Donec suscipit
        gravida justo eu pharetra. Donec suscipit neque a orci bibendum, a
        consectetur ipsum finibus. Aenean est ligula, aliquet ut nunc vitae,
        volutpat pharetra tortor. Cras ipsum mi, posuere eu diam a, cursus
        euismod mi. Ut vitae eros nibh.
      </Text>
    </div>
  );
}