@primer/react/lib-esm/Autocomplete/AutocompleteOverlay.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { useContext } from 'react';
import { AutocompleteContext } from './AutocompleteContext.js';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import VisuallyHidden from '../_VisuallyHidden.js';
import classes from './AutocompleteOverlay.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useAnchoredPosition } from '../hooks/useAnchoredPosition.js';
import Overlay from '../Overlay/Overlay.js';

// TODO: consider making 'aria-labelledby' required

function AutocompleteOverlay(t0) {
  const $ = c(24);
  let children;
  let menuAnchorRef;
  let newOverlayProps;
  let oldOverlayProps;
  if ($[0] !== t0) {
    ({
      menuAnchorRef,
      overlayProps: oldOverlayProps,
      children,
      ...newOverlayProps
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = menuAnchorRef;
    $[3] = newOverlayProps;
    $[4] = oldOverlayProps;
  } else {
    children = $[1];
    menuAnchorRef = $[2];
    newOverlayProps = $[3];
    oldOverlayProps = $[4];
  }
  const autocompleteContext = useContext(AutocompleteContext);
  if (autocompleteContext === null) {
    throw new Error("AutocompleteContext returned null values");
  }
  let t1;
  if ($[5] !== newOverlayProps || $[6] !== oldOverlayProps) {
    t1 = {
      ...oldOverlayProps,
      ...newOverlayProps
    };
    $[5] = newOverlayProps;
    $[6] = oldOverlayProps;
    $[7] = t1;
  } else {
    t1 = $[7];
  }
  const overlayProps = t1;
  const {
    inputRef,
    scrollContainerRef,
    selectedItemLength,
    setShowMenu,
    showMenu: t2
  } = autocompleteContext;
  const showMenu = t2 === undefined ? false : t2;
  const t3 = menuAnchorRef ? menuAnchorRef : inputRef;
  let t4;
  if ($[8] !== t3) {
    t4 = {
      side: "outside-bottom",
      align: "start",
      anchorElementRef: t3
    };
    $[8] = t3;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  let t5;
  if ($[10] !== selectedItemLength || $[11] !== showMenu) {
    t5 = [showMenu, selectedItemLength];
    $[10] = selectedItemLength;
    $[11] = showMenu;
    $[12] = t5;
  } else {
    t5 = $[12];
  }
  const {
    floatingElementRef,
    position
  } = useAnchoredPosition(t4, t5);
  useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
  let t6;
  if ($[13] !== setShowMenu) {
    t6 = () => {
      setShowMenu(false);
    };
    $[13] = setShowMenu;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  const closeOptionList = t6;
  if (typeof window === "undefined") {
    return null;
  }
  let t7;
  if ($[15] !== children || $[16] !== closeOptionList || $[17] !== floatingElementRef || $[18] !== inputRef || $[19] !== overlayProps || $[20] !== (position === null || position === void 0 ? void 0 : position.left) || $[21] !== (position === null || position === void 0 ? void 0 : position.top) || $[22] !== showMenu) {
    t7 = showMenu ? /*#__PURE__*/jsx(Overlay, {
      returnFocusRef: inputRef,
      preventFocusOnOpen: true,
      onClickOutside: closeOptionList,
      onEscape: closeOptionList,
      ref: floatingElementRef,
      top: position === null || position === void 0 ? void 0 : position.top,
      left: position === null || position === void 0 ? void 0 : position.left,
      className: classes.Overlay,
      ...overlayProps,
      children: children
    }) : /*#__PURE__*/jsx(VisuallyHidden, {
      "aria-hidden": "true",
      children: children
    });
    $[15] = children;
    $[16] = closeOptionList;
    $[17] = floatingElementRef;
    $[18] = inputRef;
    $[19] = overlayProps;
    $[20] = position === null || position === void 0 ? void 0 : position.left;
    $[21] = position === null || position === void 0 ? void 0 : position.top;
    $[22] = showMenu;
    $[23] = t7;
  } else {
    t7 = $[23];
  }
  return t7;
}
AutocompleteOverlay.displayName = 'AutocompleteOverlay';

export { AutocompleteOverlay as default };