@primer/react/dist/UnderlineNav/UnderlineNavItem.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { forwardRef, useRef, useContext } from 'react';
import { UnderlineNavContext } from './UnderlineNavContext.js';
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
import { UnderlineItem } from '../internal/components/UnderlineTabbedInterface.js';
import classes from './UnderlineNavItem.module.css.js';
import { jsx } from 'react/jsx-runtime';

const UnderlineNavItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
  var _leadingVisual;
  const $ = c(32);
  let Icon;
  let ariaCurrent;
  let children;
  let counter;
  let leadingVisual;
  let onSelect;
  let props;
  let t1;
  let t2;
  if ($[0] !== t0) {
    ({
      as: t1,
      href: t2,
      children,
      counter,
      onSelect,
      "aria-current": ariaCurrent,
      icon: Icon,
      leadingVisual,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = Icon;
    $[2] = ariaCurrent;
    $[3] = children;
    $[4] = counter;
    $[5] = leadingVisual;
    $[6] = onSelect;
    $[7] = props;
    $[8] = t1;
    $[9] = t2;
  } else {
    Icon = $[1];
    ariaCurrent = $[2];
    children = $[3];
    counter = $[4];
    leadingVisual = $[5];
    onSelect = $[6];
    props = $[7];
    t1 = $[8];
    t2 = $[9];
  }
  const Component = t1 === undefined ? "a" : t1;
  const href = t2 === undefined ? "#" : t2;
  const backupRef = useRef(null);
  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
  const {
    setChildrenWidth,
    setNoIconChildrenWidth,
    loadingCounters,
    iconsVisible
  } = useContext(UnderlineNavContext);
  let t3;
  let t4;
  if ($[10] !== ref || $[11] !== setChildrenWidth || $[12] !== setNoIconChildrenWidth) {
    t3 = () => {
      if (ref.current) {
        const domRect = ref.current.getBoundingClientRect();
        const icon = Array.from(ref.current.children).find(_temp);
        const content = Array.from(ref.current.children).find(_temp2);
        const text = content.textContent;
        const iconWidthWithMargin = icon ? icon.getBoundingClientRect().width + Number(getComputedStyle(icon).marginRight.slice(0, -2)) + Number(getComputedStyle(icon).marginLeft.slice(0, -2)) : 0;
        setChildrenWidth({
          text,
          width: domRect.width
        });
        setNoIconChildrenWidth({
          text,
          width: domRect.width - iconWidthWithMargin
        });
      }
    };
    t4 = [ref, setChildrenWidth, setNoIconChildrenWidth];
    $[10] = ref;
    $[11] = setChildrenWidth;
    $[12] = setNoIconChildrenWidth;
    $[13] = t3;
    $[14] = t4;
  } else {
    t3 = $[13];
    t4 = $[14];
  }
  useIsomorphicLayoutEffect(t3, t4);
  let t5;
  if ($[15] !== onSelect) {
    t5 = event => {
      if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") {
        onSelect(event);
      }
    };
    $[15] = onSelect;
    $[16] = t5;
  } else {
    t5 = $[16];
  }
  const keyDownHandler = t5;
  let t6;
  if ($[17] !== onSelect) {
    t6 = event_0 => {
      if (!event_0.defaultPrevented && typeof onSelect === "function") {
        onSelect(event_0);
      }
    };
    $[17] = onSelect;
    $[18] = t6;
  } else {
    t6 = $[18];
  }
  const clickHandler = t6;
  const t7 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
  let t8;
  if ($[19] !== Component || $[20] !== ariaCurrent || $[21] !== children || $[22] !== clickHandler || $[23] !== counter || $[24] !== href || $[25] !== iconsVisible || $[26] !== keyDownHandler || $[27] !== loadingCounters || $[28] !== props || $[29] !== ref || $[30] !== t7) {
    t8 = /*#__PURE__*/jsx("li", {
      className: classes.UnderlineNavItem,
      children: /*#__PURE__*/jsx(UnderlineItem, {
        ref: ref,
        as: Component,
        href: href,
        "aria-current": ariaCurrent,
        onKeyDown: keyDownHandler,
        onClick: clickHandler,
        counter: counter,
        icon: t7,
        loadingCounters: loadingCounters,
        iconsVisible: iconsVisible,
        ...props,
        children: children
      })
    });
    $[19] = Component;
    $[20] = ariaCurrent;
    $[21] = children;
    $[22] = clickHandler;
    $[23] = counter;
    $[24] = href;
    $[25] = iconsVisible;
    $[26] = keyDownHandler;
    $[27] = loadingCounters;
    $[28] = props;
    $[29] = ref;
    $[30] = t7;
    $[31] = t8;
  } else {
    t8 = $[31];
  }
  return t8;
});
UnderlineNavItem.displayName = 'UnderlineNavItem';
function _temp(child) {
  return child.getAttribute("data-component") === "icon";
}
function _temp2(child_0) {
  return child_0.getAttribute("data-component") === "text";
}

export { UnderlineNavItem };