@primer/react
Version:
An implementation of GitHub's Primer Design System using React
237 lines (236 loc) • 8.22 kB
JavaScript
import CounterLabel from "../CounterLabel/CounterLabel.js";
import { invariant } from "../utils/invariant.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import { useDevOnlyEffect } from "../internal/hooks/useDevOnlyEffect.js";
import { ActionList } from "../ActionList/index.js";
import { ActionMenu } from "../ActionMenu/ActionMenu.js";
import { SkeletonText } from "../SkeletonText/SkeletonText.js";
import { LoadingCounter, UnderlineItemList, UnderlineWrapper } from "../internal/components/UnderlineTabbedInterface.js";
import UnderlineNav_module_css_default from "./UnderlineNav.module.css.js";
import { UnderlineNavContext } from "./UnderlineNavContext.js";
import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
import { getValidChildren, isCurrent } from "./utils.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useRef, useState } from "react";
//#region src/UnderlineNav/UnderlineNav.tsx
const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
const $ = c(49);
const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children } = t0;
const as = t1 === void 0 ? "nav" : t1;
const loadingCounters = t2 === void 0 ? false : t2;
const variant = t3 === void 0 ? "inset" : t3;
const backupRef = useRef(null);
const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
const listRef = useRef(null);
const [hasEverOverflowed, setHasOverflowed] = useState(false);
const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
let isOverflowing;
let overflowMenuItems;
let t4;
if ($[0] !== hasEverOverflowed || $[1] !== registeredItems) {
var _registeredItems$entr;
overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(_temp);
isOverflowing = overflowMenuItems.length > 0;
if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
t4 = overflowMenuItems.some(_temp2);
$[0] = hasEverOverflowed;
$[1] = registeredItems;
$[2] = isOverflowing;
$[3] = overflowMenuItems;
$[4] = t4;
} else {
isOverflowing = $[2];
overflowMenuItems = $[3];
t4 = $[4];
}
const overflowingCurrentItem = t4;
let t5;
if ($[5] !== children) {
t5 = getValidChildren(children);
$[5] = children;
$[6] = t5;
} else t5 = $[6];
const validChildren = t5;
let t6;
let t7;
if ($[7] !== ariaLabel || $[8] !== validChildren) {
t6 = () => {
!(validChildren.filter(_temp3).length <= 1) && invariant(false, "Only one current element is allowed");
!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
};
t7 = [validChildren, ariaLabel];
$[7] = ariaLabel;
$[8] = validChildren;
$[9] = t6;
$[10] = t7;
} else {
t6 = $[9];
t7 = $[10];
}
useDevOnlyEffect(t6, t7);
let t8;
if ($[11] !== loadingCounters) {
t8 = { loadingCounters };
$[11] = loadingCounters;
$[12] = t8;
} else t8 = $[12];
const contextValue = t8;
const [menuOpen, setMenuOpen] = useState(false);
if (menuOpen && !isOverflowing) setMenuOpen(false);
let t9;
if ($[13] !== ariaLabel) {
t9 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
as: "h2",
children: `${ariaLabel} navigation`
});
$[13] = ariaLabel;
$[14] = t9;
} else t9 = $[14];
let t10;
if ($[15] !== className) {
t10 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
$[15] = className;
$[16] = t10;
} else t10 = $[16];
const t11 = hasEverOverflowed ? "true" : void 0;
const t12 = isOverflowing ? "true" : void 0;
let t13;
if ($[17] !== children || $[18] !== setRegisteredItems) {
t13 = /*#__PURE__*/ jsx(UnderlineItemList, {
ref: listRef,
role: "list",
className: UnderlineNav_module_css_default.ItemsList,
children: /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
setRegistry: setRegisteredItems,
children
})
});
$[17] = children;
$[18] = setRegisteredItems;
$[19] = t13;
} else t13 = $[19];
let t14;
if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
t14 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
$[20] = t14;
} else t14 = $[20];
const t15 = overflowingCurrentItem ? "true" : void 0;
const t16 = overflowingCurrentItem ? "More items, including current item" : void 0;
let t17;
if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
t17 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
as: "span",
children: " items"
})] });
$[21] = t17;
} else t17 = $[21];
let t18;
if ($[22] !== t15 || $[23] !== t16) {
t18 = /*#__PURE__*/ jsx(ActionMenu.Button, {
className: UnderlineNav_module_css_default.MoreButton,
variant: "invisible",
"data-component": "overflow-menu-button",
"data-current": t15,
"aria-label": t16,
children: t17
});
$[22] = t15;
$[23] = t16;
$[24] = t18;
} else t18 = $[24];
let t19;
if ($[25] !== loadingCounters || $[26] !== overflowMenuItems || $[27] !== registeredItems) {
t19 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t20) => {
const [key, allProps] = t20;
const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
...menuItemProps,
className: UnderlineNav_module_css_default.OverflowMenuItem,
children: [/*#__PURE__*/ jsx("span", {
className: UnderlineNav_module_css_default.OverflowMenuItemLabel,
children: menuItemChildren
}), loadingCounters ? /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx(LoadingCounter, {}) }) : counter !== void 0 && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx("span", {
"data-component": "counter",
children: /*#__PURE__*/ jsx(CounterLabel, { children: counter })
}) })]
}, key);
});
$[25] = loadingCounters;
$[26] = overflowMenuItems;
$[27] = registeredItems;
$[28] = t19;
} else t19 = $[28];
let t20;
if ($[29] !== t19) {
t20 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t19 }) });
$[29] = t19;
$[30] = t20;
} else t20 = $[30];
let t21;
if ($[31] !== menuOpen || $[32] !== t18 || $[33] !== t20) {
t21 = /*#__PURE__*/ jsxs("div", {
className: UnderlineNav_module_css_default.MoreButtonContainer,
children: [t14, /*#__PURE__*/ jsxs(ActionMenu, {
open: menuOpen,
onOpenChange: setMenuOpen,
children: [t18, t20]
})]
});
$[31] = menuOpen;
$[32] = t18;
$[33] = t20;
$[34] = t21;
} else t21 = $[34];
let t22;
if ($[35] !== ariaLabel || $[36] !== as || $[37] !== navRef || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t13 || $[42] !== t21 || $[43] !== variant) {
t22 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
as,
"aria-label": ariaLabel,
className: t10,
ref: navRef,
"data-variant": variant,
"data-overflow-mode": "wrap",
"data-hide-icons": t11,
"data-has-overflow": t12,
children: [t13, t21]
});
$[35] = ariaLabel;
$[36] = as;
$[37] = navRef;
$[38] = t10;
$[39] = t11;
$[40] = t12;
$[41] = t13;
$[42] = t21;
$[43] = variant;
$[44] = t22;
} else t22 = $[44];
let t23;
if ($[45] !== contextValue || $[46] !== t22 || $[47] !== t9) {
t23 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
value: contextValue,
children: [t9, t22]
});
$[45] = contextValue;
$[46] = t22;
$[47] = t9;
$[48] = t23;
} else t23 = $[48];
return t23;
});
UnderlineNav.displayName = "UnderlineNav";
function _temp(entry) {
return entry[1] !== null;
}
function _temp2(t0) {
const [, itemProps] = t0;
return isCurrent(itemProps);
}
function _temp3(child) {
return isCurrent(child.props);
}
//#endregion
export { UnderlineNav };