@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
322 lines (321 loc) • 8.61 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import { forwardRef, useCallback, useEffect, useState } from "react";
import { FocusTrap } from "focus-trap-react";
import classNames from "classnames";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
import NavTop from "./Nav.Top.js";
import NavSide from "./Nav.Side.js";
import NavMobile from "./Nav.Mobile.js";
import NavItem from "./Nav.Item.js";
import NavLogo from "./Nav.Logo.js";
import NavProvider from "./NavContext.internal.js";
import Button from "../Button/Button.js";
import useLocale from "../../hooks/useLocale.js";
import useBreakpoint from "../../hooks/useBreakpoint.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Nav = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(65);
let {
children,
top,
topProps,
side,
sideProps,
mobile,
mobileProps,
logo,
hideBranding,
noMain: t1,
...props
} = t0;
const noMain = t1 === undefined ? false : t1;
const locale = useLocale();
const toXL = useBreakpoint(null, "xl");
const [mobileOpen, setMobileStateOpen] = useState(false);
const [isAnimating, setIsAnimating] = useState(false);
let t2;
if ($[0] !== mobileOpen) {
t2 = open => {
if (mobileOpen === open) {
return;
}
setIsAnimating(true);
setMobileStateOpen(open);
};
$[0] = mobileOpen;
$[1] = t2;
} else {
t2 = $[1];
}
const setMobileOpen = t2;
let t3;
let t4;
if ($[2] !== setMobileOpen) {
t3 = () => {
if (typeof document === "undefined") {
return;
}
const closeMobileNavOnEsc = function closeMobileNavOnEsc(e) {
if (e.key === "Escape") {
setMobileOpen(false);
}
};
document.addEventListener("keydown", closeMobileNavOnEsc);
return () => document.removeEventListener("keydown", closeMobileNavOnEsc);
};
t4 = [setMobileOpen];
$[2] = setMobileOpen;
$[3] = t3;
$[4] = t4;
} else {
t3 = $[3];
t4 = $[4];
}
useEffect(t3, t4);
let t5;
let t6;
if ($[5] !== mobileOpen) {
t5 = () => {
if (typeof window === "undefined") {
return;
}
if (mobileOpen) {
document.documentElement.classList.add("bf-nav-mobile-is-open");
return _temp;
} else {
document.documentElement.classList.remove("bf-nav-mobile-is-open");
}
};
t6 = [mobileOpen];
$[5] = mobileOpen;
$[6] = t5;
$[7] = t6;
} else {
t5 = $[6];
t6 = $[7];
}
useEffect(t5, t6);
const mainId = props.id || "bf-nav-main";
const MainElement = noMain ? "div" : "main";
let t7;
if ($[8] !== logo) {
t7 = typeof logo === "string" ? /*#__PURE__*/_jsx(NavLogo, {
children: logo
}) : logo;
$[8] = logo;
$[9] = t7;
} else {
t7 = $[9];
}
logo = t7;
const T0 = NavProvider;
const t8 = sideProps?.collapsed ?? false;
const t9 = sideProps?.onCollapsedChange;
const t10 = "#" + mainId;
let t11;
if ($[10] !== locale.skipToMain || $[11] !== t10) {
t11 = /*#__PURE__*/_jsx("a", {
href: t10,
className: "bf-hide-until-focus bf-button bf-button-small",
children: locale.skipToMain
});
$[10] = locale.skipToMain;
$[11] = t10;
$[12] = t11;
} else {
t11 = $[12];
}
let t12;
if ($[13] !== logo || $[14] !== side || $[15] !== sideProps || $[16] !== top) {
t12 = side && /*#__PURE__*/_jsx(NavSide, {
logo: top ? /*#__PURE__*/_jsx(_Fragment, {}) : logo,
...sideProps,
className: classNames("from-xl", sideProps?.className),
children: side
});
$[13] = logo;
$[14] = side;
$[15] = sideProps;
$[16] = top;
$[17] = t12;
} else {
t12 = $[17];
}
let t13;
if ($[18] !== locale.mainNav || $[19] !== mobile || $[20] !== mobileOpen || $[21] !== setMobileOpen || $[22] !== side) {
t13 = (mobile || side) && /*#__PURE__*/_jsx("button", {
type: "button",
className: "to-xl bf-nav-mobile-toggle",
"aria-label": locale.mainNav,
"aria-expanded": mobileOpen,
onClick: e_0 => {
setMobileOpen(!mobileOpen);
e_0.stopPropagation();
},
children: /*#__PURE__*/_jsx(NavItem, {
icon: mobileOpen ? faXmark : faBars
})
});
$[18] = locale.mainNav;
$[19] = mobile;
$[20] = mobileOpen;
$[21] = setMobileOpen;
$[22] = side;
$[23] = t13;
} else {
t13 = $[23];
}
const t14 = logo;
const t15 = topProps;
let t16;
if ($[24] !== mobileOpen || $[25] !== setMobileOpen || $[26] !== topProps) {
t16 = e_1 => {
if (mobileOpen) {
setMobileOpen(false);
}
topProps?.onClick?.(e_1);
};
$[24] = mobileOpen;
$[25] = setMobileOpen;
$[26] = topProps;
$[27] = t16;
} else {
t16 = $[27];
}
const t17 = topProps?.className;
const t18 = !top;
let t19;
if ($[28] !== t17 || $[29] !== t18) {
t19 = classNames(t17, {
"to-xl": t18
});
$[28] = t17;
$[29] = t18;
$[30] = t19;
} else {
t19 = $[30];
}
let t20;
if ($[31] !== logo || $[32] !== t13 || $[33] !== t16 || $[34] !== t19 || $[35] !== top || $[36] !== topProps) {
t20 = /*#__PURE__*/_jsx(NavTop, {
preLogo: t13,
logo: t14,
...t15,
onClick: t16,
className: t19,
children: top
});
$[31] = logo;
$[32] = t13;
$[33] = t16;
$[34] = t19;
$[35] = top;
$[36] = topProps;
$[37] = t20;
} else {
t20 = $[37];
}
let t21;
if ($[38] !== isAnimating || $[39] !== locale.closeMenu || $[40] !== mobile || $[41] !== mobileOpen || $[42] !== mobileProps || $[43] !== setMobileOpen || $[44] !== side || $[45] !== toXL) {
t21 = (mobile || side) && /*#__PURE__*/_jsx(FocusTrap, {
focusTrapOptions: {
clickOutsideDeactivates: true,
initialFocus: false
},
active: mobileOpen && toXL,
children: /*#__PURE__*/_jsxs(NavMobile, {
...mobileProps,
onClick: e_2 => {
if (e_2.target.closest("a")) {
setMobileOpen(false);
}
mobileProps?.onClick?.(e_2);
},
onOverlayClick: e_3 => {
setMobileOpen(false);
e_3.stopPropagation();
},
className: classNames(mobileProps?.className, "to-xl", "bf-scrollbar-small", {
"bf-nav-mobile-open": mobileOpen,
"bf-nav-mobile-close": !mobileOpen,
"bf-nav-mobile-gone": !mobileOpen && !isAnimating
}),
onAnimationEnd: () => {
setIsAnimating(false);
},
"aria-hidden": !mobileOpen,
children: [mobile ?? side, /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(Button, {
small: true,
className: "bf-hide-until-focus",
onClick: () => setMobileOpen(false),
children: locale.closeMenu
})
})]
})
});
$[38] = isAnimating;
$[39] = locale.closeMenu;
$[40] = mobile;
$[41] = mobileOpen;
$[42] = mobileProps;
$[43] = setMobileOpen;
$[44] = side;
$[45] = toXL;
$[46] = t21;
} else {
t21 = $[46];
}
const t22 = props;
const t23 = classNames(props.className, "bf-nav-main");
let t24;
if ($[47] !== MainElement || $[48] !== children || $[49] !== mainId || $[50] !== props || $[51] !== ref || $[52] !== t23) {
t24 = /*#__PURE__*/_jsx(MainElement, {
ref: ref,
...t22,
className: t23,
id: mainId,
children: children
});
$[47] = MainElement;
$[48] = children;
$[49] = mainId;
$[50] = props;
$[51] = ref;
$[52] = t23;
$[53] = t24;
} else {
t24 = $[53];
}
let t25;
if ($[54] !== T0 || $[55] !== mobileOpen || $[56] !== setMobileOpen || $[57] !== t11 || $[58] !== t12 || $[59] !== t20 || $[60] !== t21 || $[61] !== t24 || $[62] !== t8 || $[63] !== t9) {
t25 = /*#__PURE__*/_jsxs(T0, {
sideCollapsed: t8,
setSideCollapsed: t9,
mobileOpen: mobileOpen,
setMobileOpen: setMobileOpen,
children: [t11, t12, t20, t21, t24]
});
$[54] = T0;
$[55] = mobileOpen;
$[56] = setMobileOpen;
$[57] = t11;
$[58] = t12;
$[59] = t20;
$[60] = t21;
$[61] = t24;
$[62] = t8;
$[63] = t9;
$[64] = t25;
} else {
t25 = $[64];
}
return t25;
});
Nav.displayName = "Nav";
export default Nav;
function _temp() {
document.documentElement.classList.remove("bf-nav-mobile-is-open");
}