@primer/react/lib-esm/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 { defaultSxProp } from '../utils/defaultSxProp.js';
import { UnderlineItem } from '../internal/components/UnderlineTabbedInterface.js';
import { jsx } from 'react/jsx-runtime';
import Box from '../Box/Box.js';

const UnderlineNavItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
  const $ = c(34);
  let Icon;
  let ariaCurrent;
  let children;
  let counter;
  let onSelect;
  let props;
  let t1;
  let t2;
  let t3;
  if ($[0] !== t0) {
    ({
      sx: t1,
      as: t2,
      href: t3,
      children,
      counter,
      onSelect,
      "aria-current": ariaCurrent,
      icon: Icon,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = Icon;
    $[2] = ariaCurrent;
    $[3] = children;
    $[4] = counter;
    $[5] = onSelect;
    $[6] = props;
    $[7] = t1;
    $[8] = t2;
    $[9] = t3;
  } else {
    Icon = $[1];
    ariaCurrent = $[2];
    children = $[3];
    counter = $[4];
    onSelect = $[5];
    props = $[6];
    t1 = $[7];
    t2 = $[8];
    t3 = $[9];
  }
  const sxProp = t1 === undefined ? defaultSxProp : t1;
  const Component = t2 === undefined ? "a" : t2;
  const href = t3 === undefined ? "#" : t3;
  const backupRef = useRef(null);
  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
  const {
    setChildrenWidth,
    setNoIconChildrenWidth,
    loadingCounters,
    iconsVisible
  } = useContext(UnderlineNavContext);
  let t4;
  let t5;
  if ($[10] !== ref || $[11] !== setChildrenWidth || $[12] !== setNoIconChildrenWidth) {
    t4 = () => {
      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
        });
      }
    };
    t5 = [ref, setChildrenWidth, setNoIconChildrenWidth];
    $[10] = ref;
    $[11] = setChildrenWidth;
    $[12] = setNoIconChildrenWidth;
    $[13] = t4;
    $[14] = t5;
  } else {
    t4 = $[13];
    t5 = $[14];
  }
  useIsomorphicLayoutEffect(t4, t5);
  let t6;
  if ($[15] !== onSelect) {
    t6 = event => {
      if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") {
        onSelect(event);
      }
    };
    $[15] = onSelect;
    $[16] = t6;
  } else {
    t6 = $[16];
  }
  const keyDownHandler = t6;
  let t7;
  if ($[17] !== onSelect) {
    t7 = event_0 => {
      if (!event_0.defaultPrevented && typeof onSelect === "function") {
        onSelect(event_0);
      }
    };
    $[17] = onSelect;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  const clickHandler = t7;
  let t8;
  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
    t8 = {
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    };
    $[19] = t8;
  } else {
    t8 = $[19];
  }
  let t9;
  if ($[20] !== Component || $[21] !== Icon || $[22] !== ariaCurrent || $[23] !== children || $[24] !== clickHandler || $[25] !== counter || $[26] !== href || $[27] !== iconsVisible || $[28] !== keyDownHandler || $[29] !== loadingCounters || $[30] !== props || $[31] !== ref || $[32] !== sxProp) {
    t9 = /*#__PURE__*/jsx(Box, {
      as: "li",
      sx: t8,
      children: /*#__PURE__*/jsx(UnderlineItem, {
        ref: ref,
        as: Component,
        href: href,
        "aria-current": ariaCurrent,
        onKeyDown: keyDownHandler,
        onClick: clickHandler,
        counter: counter,
        icon: Icon,
        loadingCounters: loadingCounters,
        iconsVisible: iconsVisible,
        sx: sxProp,
        ...props,
        children: children
      })
    });
    $[20] = Component;
    $[21] = Icon;
    $[22] = ariaCurrent;
    $[23] = children;
    $[24] = clickHandler;
    $[25] = counter;
    $[26] = href;
    $[27] = iconsVisible;
    $[28] = keyDownHandler;
    $[29] = loadingCounters;
    $[30] = props;
    $[31] = ref;
    $[32] = sxProp;
    $[33] = t9;
  } else {
    t9 = $[33];
  }
  return t9;
});
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 };