@primer/react/lib-esm/TabNav/TabNav.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import React, { useRef, useState } from 'react';
import { useFocusZone } from '../hooks/useFocusZone.js';
import styles from './TabNav.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsx } from 'react/jsx-runtime';
import { FocusKeys } from '@primer/behaviors';

/**
 * @deprecated
 */
function TabNav(t0) {
  const $ = c(20);
  let ariaLabel;
  let children;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      "aria-label": ariaLabel,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = ariaLabel;
    $[2] = children;
    $[3] = rest;
  } else {
    ariaLabel = $[1];
    children = $[2];
    rest = $[3];
  }
  const customContainerRef = useRef(null);
  const [isInsideMenu, setIsInsideMenu] = useState(false);
  let t1;
  let t2;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = () => {
      if (customContainerRef.current) {
        const menu = customContainerRef.current.closest("[role=menu]");
        if (menu) {
          setIsInsideMenu(true);
        }
      }
    };
    t2 = [customContainerRef];
    $[4] = t1;
    $[5] = t2;
  } else {
    t1 = $[4];
    t2 = $[5];
  }
  React.useEffect(t1, t2);
  let t3;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = () => {
      var _customContainerRef$c, _customContainerRef$c2, _ref;
      const selectedTab = (_customContainerRef$c = customContainerRef.current) === null || _customContainerRef$c === void 0 ? void 0 : _customContainerRef$c.querySelector("[role=tab][aria-selected=true]");
      const firstTab = (_customContainerRef$c2 = customContainerRef.current) === null || _customContainerRef$c2 === void 0 ? void 0 : _customContainerRef$c2.querySelector("[role=tab]");
      return (_ref = selectedTab !== null && selectedTab !== void 0 ? selectedTab : firstTab) !== null && _ref !== void 0 ? _ref : undefined;
    };
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  const customStrategy = t3;
  const t4 = isInsideMenu ? "previous" : customStrategy;
  let t5;
  if ($[7] !== t4) {
    t5 = {
      containerRef: customContainerRef,
      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
      focusOutBehavior: "wrap",
      focusInStrategy: t4,
      focusableElementFilter: _temp
    };
    $[7] = t4;
    $[8] = t5;
  } else {
    t5 = $[8];
  }
  let t6;
  if ($[9] !== isInsideMenu) {
    t6 = [isInsideMenu];
    $[9] = isInsideMenu;
    $[10] = t6;
  } else {
    t6 = $[10];
  }
  const {
    containerRef: navRef
  } = useFocusZone(t5, t6);
  const t7 = navRef;
  let t8;
  if ($[11] !== children) {
    t8 = /*#__PURE__*/jsx("div", {
      role: "tablist",
      className: styles.TabNavTabList,
      children: children
    });
    $[11] = children;
    $[12] = t8;
  } else {
    t8 = $[12];
  }
  let t9;
  if ($[13] !== ariaLabel || $[14] !== t8) {
    t9 = /*#__PURE__*/jsx("nav", {
      "aria-label": ariaLabel,
      className: styles.TabNavNav,
      children: t8
    });
    $[13] = ariaLabel;
    $[14] = t8;
    $[15] = t9;
  } else {
    t9 = $[15];
  }
  let t10;
  if ($[16] !== rest || $[17] !== t7 || $[18] !== t9) {
    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
      ...rest,
      ref: t7,
      children: t9
    });
    $[16] = rest;
    $[17] = t7;
    $[18] = t9;
    $[19] = t10;
  } else {
    t10 = $[19];
  }
  return t10;
}

/**
 * @deprecated
 */
function _temp(element) {
  return element.getAttribute("role") === "tab";
}
/**
 * @deprecated
 */
const TabNavLink = /*#__PURE__*/React.forwardRef(function TabNavLink(t0, ref) {
  const $ = c(15);
  let className;
  let rest;
  let selected;
  let t1;
  if ($[0] !== t0) {
    ({
      selected,
      className,
      as: t1,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = rest;
    $[3] = selected;
    $[4] = t1;
  } else {
    className = $[1];
    rest = $[2];
    selected = $[3];
    t1 = $[4];
  }
  const as = t1 === undefined ? "a" : t1;
  const t2 = selected ? true : undefined;
  const t3 = selected && "selected";
  const t4 = selected && styles.Selected;
  let t5;
  if ($[5] !== className || $[6] !== t3 || $[7] !== t4) {
    t5 = clsx("TabNav-item", styles.TabNavLink, t3, t4, className);
    $[5] = className;
    $[6] = t3;
    $[7] = t4;
    $[8] = t5;
  } else {
    t5 = $[8];
  }
  let t6;
  if ($[9] !== as || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t5) {
    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
      as: as,
      ref: ref,
      role: "tab",
      tabIndex: -1,
      "aria-selected": t2,
      className: t5,
      ...rest
    });
    $[9] = as;
    $[10] = ref;
    $[11] = rest;
    $[12] = t2;
    $[13] = t5;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  return t6;
});
TabNavLink.displayName = 'TabNav.Link';
var TabNav$1 = Object.assign(TabNav, {
  Link: TabNavLink
});

export { TabNav$1 as default };