@primer/react/dist/TreeView/useTypeahead.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React from 'react';
import useSafeTimeout from '../hooks/useSafeTimeout.js';
import { getAccessibleName } from './shared.js';
import { useTreeItemCache } from './useTreeItemCache.js';

function useTypeahead(t0) {
  const $ = c(12);
  const {
    containerRef,
    onFocusChange
  } = t0;
  const searchValue = React.useRef("");
  const timeoutRef = React.useRef(0);
  const onFocusChangeRef = React.useRef(onFocusChange);
  const {
    safeSetTimeout,
    safeClearTimeout
  } = useSafeTimeout();
  const {
    getTreeItems
  } = useTreeItemCache(containerRef);
  let t1;
  let t2;
  if ($[0] !== onFocusChange) {
    t1 = () => {
      onFocusChangeRef.current = onFocusChange;
    };
    t2 = [onFocusChange];
    $[0] = onFocusChange;
    $[1] = t1;
    $[2] = t2;
  } else {
    t1 = $[1];
    t2 = $[2];
  }
  React.useEffect(t1, t2);
  let t3;
  if ($[3] !== containerRef || $[4] !== getTreeItems) {
    t3 = searchValue_0 => {
      if (!searchValue_0) {
        return;
      }
      if (!containerRef.current) {
        return;
      }
      const elements = getTreeItems();
      const activeIndex = elements.findIndex(_temp);
      let sortedElements = wrapArray(elements, activeIndex);
      if (searchValue_0.length === 1) {
        sortedElements = sortedElements.slice(1);
      }
      const nextElement = sortedElements.find(element_0 => {
        const name = getAccessibleName(element_0).toLowerCase();
        return name.startsWith(searchValue_0.toLowerCase());
      });
      if (nextElement) {
        onFocusChangeRef.current(nextElement);
      }
    };
    $[3] = containerRef;
    $[4] = getTreeItems;
    $[5] = t3;
  } else {
    t3 = $[5];
  }
  const focusSearchValue = t3;
  let t4;
  let t5;
  if ($[6] !== containerRef || $[7] !== focusSearchValue || $[8] !== safeClearTimeout || $[9] !== safeSetTimeout) {
    t4 = () => {
      if (!containerRef.current) {
        return;
      }
      const container = containerRef.current;
      const onKeyDown = function onKeyDown(event) {
        if (!event.key || event.key.length > 1 || event.key === " ") {
          return;
        }
        if (event.ctrlKey || event.altKey || event.metaKey) {
          return;
        }
        searchValue.current = searchValue.current + event.key;
        focusSearchValue(searchValue.current);
        safeClearTimeout(timeoutRef.current);
        timeoutRef.current = safeSetTimeout(() => searchValue.current = "", 300);
        event.preventDefault();
        event.stopPropagation();
      };
      container.addEventListener("keydown", onKeyDown);
      return () => container.removeEventListener("keydown", onKeyDown);
    };
    t5 = [containerRef, focusSearchValue, safeClearTimeout, safeSetTimeout];
    $[6] = containerRef;
    $[7] = focusSearchValue;
    $[8] = safeClearTimeout;
    $[9] = safeSetTimeout;
    $[10] = t4;
    $[11] = t5;
  } else {
    t4 = $[10];
    t5 = $[11];
  }
  React.useEffect(t4, t5);
}

/**
 * Wraps an array around itself at a given start index
 *
 * @example
 * wrapArray(['a', 'b', 'c', 'd'], 2) // ['c', 'd', 'a', 'b']
 */
function _temp(element) {
  return element === document.activeElement;
}
function wrapArray(array, startIndex) {
  return array.map((_, index) => array[(startIndex + index) % array.length]);
}

export { useTypeahead };