@primer/react/dist/internal/components/UnderlineTabbedInterface.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React, { forwardRef } from 'react';
import { isElement } from 'react-is';
import classes from './UnderlineTabbedInterface.module.css.js';
import { clsx } from 'clsx';
import { jsx, jsxs } from 'react/jsx-runtime';
import CounterLabel from '../../CounterLabel/CounterLabel.js';

const GAP = 8;

// Helper to extract direct text content from children for the data-content attribute.
// This is used by CSS to reserve space for bold text (preventing layout shift).
// Only extracts strings/numbers, not text from nested React elements (e.g., Popovers).
function getTextContent(children) {
  if (typeof children === 'string' || typeof children === 'number') {
    return String(children);
  }
  if (Array.isArray(children)) {
    return children.map(getTextContent).join('');
  }
  // Skip React elements - we only want direct text content, not text from nested components
  return '';
}
const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
  const $ = c(13);
  let children;
  let className;
  let rest;
  let t0;
  if ($[0] !== props) {
    ({
      children,
      className,
      as: t0,
      ...rest
    } = props);
    $[0] = props;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
    $[4] = t0;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
    t0 = $[4];
  }
  const Component = t0 === undefined ? "div" : t0;
  let t1;
  if ($[5] !== className) {
    t1 = clsx(classes.UnderlineWrapper, className);
    $[5] = className;
    $[6] = t1;
  } else {
    t1 = $[6];
  }
  const t2 = ref;
  let t3;
  if ($[7] !== Component || $[8] !== children || $[9] !== rest || $[10] !== t1 || $[11] !== t2) {
    t3 = /*#__PURE__*/jsx(Component, {
      className: t1,
      ref: t2,
      ...rest,
      children: children
    });
    $[7] = Component;
    $[8] = children;
    $[9] = rest;
    $[10] = t1;
    $[11] = t2;
    $[12] = t3;
  } else {
    t3 = $[12];
  }
  return t3;
});
const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
  const $ = c(7);
  let children;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = rest;
  } else {
    children = $[1];
    rest = $[2];
  }
  let t1;
  if ($[3] !== children || $[4] !== forwardedRef || $[5] !== rest) {
    t1 = /*#__PURE__*/jsx("ul", {
      className: classes.UnderlineItemList,
      ref: forwardedRef,
      ...rest,
      children: children
    });
    $[3] = children;
    $[4] = forwardedRef;
    $[5] = rest;
    $[6] = t1;
  } else {
    t1 = $[6];
  }
  return t1;
});
const LoadingCounter = () => {
  const $ = c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = /*#__PURE__*/jsx("span", {
      className: classes.LoadingCounter
    });
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
};
const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
  const $ = c(30);
  let Icon;
  let children;
  let className;
  let counter;
  let iconsVisible;
  let loadingCounters;
  let rest;
  let t0;
  if ($[0] !== props) {
    ({
      as: t0,
      children,
      counter,
      icon: Icon,
      iconsVisible,
      loadingCounters,
      className,
      ...rest
    } = props);
    $[0] = props;
    $[1] = Icon;
    $[2] = children;
    $[3] = className;
    $[4] = counter;
    $[5] = iconsVisible;
    $[6] = loadingCounters;
    $[7] = rest;
    $[8] = t0;
  } else {
    Icon = $[1];
    children = $[2];
    className = $[3];
    counter = $[4];
    iconsVisible = $[5];
    loadingCounters = $[6];
    rest = $[7];
    t0 = $[8];
  }
  const Component = t0 === undefined ? "a" : t0;
  let t1;
  if ($[9] !== children) {
    t1 = getTextContent(children);
    $[9] = children;
    $[10] = t1;
  } else {
    t1 = $[10];
  }
  const textContent = t1;
  let t2;
  if ($[11] !== className) {
    t2 = clsx(classes.UnderlineItem, className);
    $[11] = className;
    $[12] = t2;
  } else {
    t2 = $[12];
  }
  let t3;
  if ($[13] !== Icon || $[14] !== iconsVisible) {
    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
      "data-component": "icon",
      children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
    });
    $[13] = Icon;
    $[14] = iconsVisible;
    $[15] = t3;
  } else {
    t3 = $[15];
  }
  let t4;
  if ($[16] !== children || $[17] !== textContent) {
    t4 = children && /*#__PURE__*/jsx("span", {
      "data-component": "text",
      "data-content": textContent || undefined,
      children: children
    });
    $[16] = children;
    $[17] = textContent;
    $[18] = t4;
  } else {
    t4 = $[18];
  }
  let t5;
  if ($[19] !== counter || $[20] !== loadingCounters) {
    t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
      "data-component": "counter",
      children: /*#__PURE__*/jsx(LoadingCounter, {})
    }) : /*#__PURE__*/jsx("span", {
      "data-component": "counter",
      children: /*#__PURE__*/jsx(CounterLabel, {
        children: counter
      })
    }) : null;
    $[19] = counter;
    $[20] = loadingCounters;
    $[21] = t5;
  } else {
    t5 = $[21];
  }
  let t6;
  if ($[22] !== Component || $[23] !== ref || $[24] !== rest || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
    t6 = /*#__PURE__*/jsxs(Component, {
      ...rest,
      ref: ref,
      className: t2,
      children: [t3, t4, t5]
    });
    $[22] = Component;
    $[23] = ref;
    $[24] = rest;
    $[25] = t2;
    $[26] = t3;
    $[27] = t4;
    $[28] = t5;
    $[29] = t6;
  } else {
    t6 = $[29];
  }
  return t6;
});

export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };