function PopupMenuList(props) {
  const {
    selectedEntry,
    setSelectedEntry,
    entries,
    ...restProps
  } = props;

  const resultsRef = useRef();

  const groups = useMemo(() => groupEntries(entries), [ entries ]);

  // scroll to selected result
  useLayoutEffect(() => {
    const containerEl = resultsRef.current;

    if (!containerEl)
      return;

    const selectedEl = containerEl.querySelector('.selected');

    if (selectedEl) {
      scrollIntoView(selectedEl);
    }
  }, [ selectedEntry ]);

  return html`
    <div class="djs-popup-results" ref=${ resultsRef }>
      ${ groups.map(group => html`
        ${ group.name && html`
          <div key=${ group.id } class="entry-header" title=${ group.name }>
            ${ group.name }
          </div>
        ` }
        <ul class="djs-popup-group" data-group=${ group.id }>
          ${ group.entries.map(entry => html`
            <${PopupMenuItem}
              key=${ entry.id }
              entry=${ entry }
              selected=${ entry === selectedEntry }
              onMouseEnter=${ () => setSelectedEntry(entry) }
              onMouseLeave=${ () => setSelectedEntry(null) }
              ...${ restProps }
            />
          `) }
        </ul>
      `) }
    </div>
  `;
}
Component that renders a popup menu entry list.

@param {Object} props
@param {PopupMenuEntry[]} props.entries
@param {PopupMenuEntry} props.selectedEntry
@param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry