@primer/react/dist/Autocomplete/Autocomplete.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { useRef, useReducer, useDeferredValue } from 'react';
import { AutocompleteContext, AutocompleteDeferredInputContext, AutocompleteInputContext } from './AutocompleteContext.js';
import AutocompleteInput from './AutocompleteInput.js';
import AutocompleteMenu from './AutocompleteMenu.js';
import AutocompleteOverlay from './AutocompleteOverlay.js';
import { useId } from '../hooks/useId.js';
import { jsx } from 'react/jsx-runtime';

const initialState = {
  inputValue: '',
  showMenu: false,
  isMenuDirectlyActivated: false,
  autocompleteSuggestion: '',
  selectedItemLength: 0
};
const reducer = (state, action) => {
  const {
    type,
    payload
  } = action;
  switch (type) {
    case 'inputValue':
      return {
        ...state,
        inputValue: payload
      };
    case 'showMenu':
      return {
        ...state,
        showMenu: payload
      };
    case 'isMenuDirectlyActivated':
      return {
        ...state,
        isMenuDirectlyActivated: payload
      };
    case 'autocompleteSuggestion':
      return {
        ...state,
        autocompleteSuggestion: payload
      };
    case 'selectedItemLength':
      return {
        ...state,
        selectedItemLength: payload
      };
    default:
      return state;
  }
};
const Autocomplete = t0 => {
  const $ = c(24);
  const {
    children,
    id: idProp
  } = t0;
  const activeDescendantRef = useRef(null);
  const scrollContainerRef = useRef(null);
  const inputRef = useRef(null);
  const [state, dispatch] = useReducer(reducer, initialState);
  const {
    inputValue,
    showMenu,
    autocompleteSuggestion,
    isMenuDirectlyActivated,
    selectedItemLength
  } = state;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = value => {
      dispatch({
        type: "inputValue",
        payload: value
      });
    };
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const setInputValue = t1;
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = value_0 => {
      dispatch({
        type: "showMenu",
        payload: value_0
      });
    };
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const setShowMenu = t2;
  let t3;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = value_1 => {
      dispatch({
        type: "autocompleteSuggestion",
        payload: value_1
      });
    };
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  const setAutocompleteSuggestion = t3;
  let t4;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = value_2 => {
      dispatch({
        type: "isMenuDirectlyActivated",
        payload: value_2
      });
    };
    $[3] = t4;
  } else {
    t4 = $[3];
  }
  const setIsMenuDirectlyActivated = t4;
  let t5;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = value_3 => {
      dispatch({
        type: "selectedItemLength",
        payload: value_3
      });
    };
    $[4] = t5;
  } else {
    t5 = $[4];
  }
  const setSelectedItemLength = t5;
  const id = useId(idProp);
  let t6;
  if ($[5] !== id || $[6] !== selectedItemLength || $[7] !== showMenu) {
    t6 = {
      activeDescendantRef,
      id,
      inputRef,
      scrollContainerRef,
      selectedItemLength,
      setAutocompleteSuggestion,
      setInputValue,
      setIsMenuDirectlyActivated,
      setShowMenu,
      setSelectedItemLength,
      showMenu
    };
    $[5] = id;
    $[6] = selectedItemLength;
    $[7] = showMenu;
    $[8] = t6;
  } else {
    t6 = $[8];
  }
  const autocompleteContextValue = t6;
  let t7;
  if ($[9] !== autocompleteSuggestion || $[10] !== inputValue || $[11] !== isMenuDirectlyActivated) {
    t7 = {
      autocompleteSuggestion,
      inputValue,
      isMenuDirectlyActivated
    };
    $[9] = autocompleteSuggestion;
    $[10] = inputValue;
    $[11] = isMenuDirectlyActivated;
    $[12] = t7;
  } else {
    t7 = $[12];
  }
  const autocompleteInputContextValue = t7;
  const deferredInputValue = useDeferredValue(inputValue);
  let t8;
  if ($[13] !== deferredInputValue) {
    t8 = {
      deferredInputValue
    };
    $[13] = deferredInputValue;
    $[14] = t8;
  } else {
    t8 = $[14];
  }
  const autocompleteDeferredInputContextValue = t8;
  let t9;
  if ($[15] !== autocompleteDeferredInputContextValue || $[16] !== children) {
    t9 = /*#__PURE__*/jsx(AutocompleteDeferredInputContext.Provider, {
      value: autocompleteDeferredInputContextValue,
      children: children
    });
    $[15] = autocompleteDeferredInputContextValue;
    $[16] = children;
    $[17] = t9;
  } else {
    t9 = $[17];
  }
  let t10;
  if ($[18] !== autocompleteInputContextValue || $[19] !== t9) {
    t10 = /*#__PURE__*/jsx(AutocompleteInputContext.Provider, {
      value: autocompleteInputContextValue,
      children: t9
    });
    $[18] = autocompleteInputContextValue;
    $[19] = t9;
    $[20] = t10;
  } else {
    t10 = $[20];
  }
  let t11;
  if ($[21] !== autocompleteContextValue || $[22] !== t10) {
    t11 = /*#__PURE__*/jsx(AutocompleteContext.Provider, {
      value: autocompleteContextValue,
      children: t10
    });
    $[21] = autocompleteContextValue;
    $[22] = t10;
    $[23] = t11;
  } else {
    t11 = $[23];
  }
  return t11;
};
var Autocomplete$1 = Object.assign(Autocomplete, {
  __SLOT__: Symbol('Autocomplete'),
  Context: AutocompleteContext,
  Input: AutocompleteInput,
  Menu: AutocompleteMenu,
  Overlay: AutocompleteOverlay
});

export { Autocomplete$1 as default };