@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
236 lines (235 loc) • 6.37 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import { useState, useCallback, useRef, forwardRef } from "react";
import { faAngleUp } from "@fortawesome/free-solid-svg-icons/faAngleUp";
import { faAngleDown } from "@fortawesome/free-solid-svg-icons/faAngleDown";
import classNames from "classnames";
import SlideDown from "../SlideDown/SlideDown.js";
import NavItem from "./Nav.Item.js";
import { useNavLocation } from "./NavLocationContext.internal.js";
import Dropdown from "../Dropdown/Dropdown.js";
import Icon from "../Icon/Icon.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const NavGroup = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(53);
let ariaLabel;
let children;
let className;
let icon;
let name;
let props;
let t1;
let t2;
let t3;
if ($[0] !== t0) {
({
active: t1,
name,
icon,
children,
className,
defaultExpanded: t2,
eager: t3,
"aria-label": ariaLabel,
...props
} = t0);
$[0] = t0;
$[1] = ariaLabel;
$[2] = children;
$[3] = className;
$[4] = icon;
$[5] = name;
$[6] = props;
$[7] = t1;
$[8] = t2;
$[9] = t3;
} else {
ariaLabel = $[1];
children = $[2];
className = $[3];
icon = $[4];
name = $[5];
props = $[6];
t1 = $[7];
t2 = $[8];
t3 = $[9];
}
const active = t1 === undefined ? false : t1;
const defaultExpanded = t2 === undefined ? false : t2;
const eager = t3 === undefined ? true : t3;
const {
where,
sideExpandedOrMobile
} = useNavLocation();
const [expanded, setExpanded] = useState(!!defaultExpanded);
const [dropdownVisible, setDropdownVisible] = useState(false);
const buttonRef = useRef(null);
let t4;
if ($[10] !== dropdownVisible || $[11] !== expanded || $[12] !== sideExpandedOrMobile) {
t4 = e => {
e.preventDefault();
if (!sideExpandedOrMobile) {
setDropdownVisible(!dropdownVisible);
} else {
setExpanded(!expanded);
}
};
$[10] = dropdownVisible;
$[11] = expanded;
$[12] = sideExpandedOrMobile;
$[13] = t4;
} else {
t4 = $[13];
}
const handleClick = t4;
let t5;
if ($[14] !== className) {
t5 = classNames("bf-nav-group", className);
$[14] = className;
$[15] = t5;
} else {
t5 = $[15];
}
let t6;
if ($[16] !== active || $[17] !== expanded) {
t6 = classNames("bf-nav-group-button", {
"bf-nav-group-button-expanded": expanded,
active
});
$[16] = active;
$[17] = expanded;
$[18] = t6;
} else {
t6 = $[18];
}
const t7 = sideExpandedOrMobile ? expanded : dropdownVisible;
let t8;
if ($[19] !== expanded || $[20] !== sideExpandedOrMobile) {
t8 = sideExpandedOrMobile && /*#__PURE__*/_jsx("span", {
className: "bf-nav-expand-icon",
children: /*#__PURE__*/_jsx(Icon, {
icon: expanded ? faAngleUp : faAngleDown
})
});
$[19] = expanded;
$[20] = sideExpandedOrMobile;
$[21] = t8;
} else {
t8 = $[21];
}
let t9;
if ($[22] !== icon || $[23] !== name || $[24] !== t8) {
t9 = /*#__PURE__*/_jsxs(NavItem, {
icon: icon,
children: [name, t8]
});
$[22] = icon;
$[23] = name;
$[24] = t8;
$[25] = t9;
} else {
t9 = $[25];
}
let t10;
if ($[26] !== ariaLabel || $[27] !== handleClick || $[28] !== t6 || $[29] !== t7 || $[30] !== t9) {
t10 = /*#__PURE__*/_jsx("button", {
type: "button",
className: t6,
"aria-expanded": t7,
"aria-label": ariaLabel,
onClick: handleClick,
ref: buttonRef,
children: t9
});
$[26] = ariaLabel;
$[27] = handleClick;
$[28] = t6;
$[29] = t7;
$[30] = t9;
$[31] = t10;
} else {
t10 = $[31];
}
let t11;
if ($[32] !== children || $[33] !== dropdownVisible || $[34] !== eager || $[35] !== icon || $[36] !== name || $[37] !== sideExpandedOrMobile || $[38] !== where) {
t11 = (where === "top" || where === "side" && !sideExpandedOrMobile) && /*#__PURE__*/_jsx(Dropdown, {
eager: eager,
placement: where === "top" ? "bottom-end" : "right-start",
strategy: "fixed",
reference: buttonRef,
visible: dropdownVisible,
onHide: () => setDropdownVisible(false),
className: "bf-nav-group-dropout",
noPadding: true,
content: /*#__PURE__*/_jsxs(_Fragment, {
children: [where === "side" && name && /*#__PURE__*/_jsxs("div", {
className: "bf-nav-group-dropout-title",
children: [/*#__PURE__*/_jsx("span", {
className: "bf-inline-stretch",
children: name
}), icon && /*#__PURE__*/_jsx(Icon, {
icon: icon
})]
}), /*#__PURE__*/_jsx("div", {
className: "bf-nav-group-dropout-content",
onClick: e_0 => {
if (e_0.target.closest?.(".bf-nav-item")) {
setDropdownVisible(false);
}
},
children: children
})]
})
});
$[32] = children;
$[33] = dropdownVisible;
$[34] = eager;
$[35] = icon;
$[36] = name;
$[37] = sideExpandedOrMobile;
$[38] = where;
$[39] = t11;
} else {
t11 = $[39];
}
let t12;
if ($[40] !== children || $[41] !== eager || $[42] !== expanded || $[43] !== sideExpandedOrMobile || $[44] !== where) {
t12 = where !== "top" && /*#__PURE__*/_jsx(SlideDown, {
eager: eager,
open: !!sideExpandedOrMobile && (where === "side" && !sideExpandedOrMobile ? false : expanded),
children: /*#__PURE__*/_jsx("div", {
className: "bf-nav-group-content",
children: children
})
});
$[40] = children;
$[41] = eager;
$[42] = expanded;
$[43] = sideExpandedOrMobile;
$[44] = where;
$[45] = t12;
} else {
t12 = $[45];
}
let t13;
if ($[46] !== props || $[47] !== ref || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t5) {
t13 = /*#__PURE__*/_jsxs("div", {
...props,
ref: ref,
className: t5,
children: [t10, t11, t12]
});
$[46] = props;
$[47] = ref;
$[48] = t10;
$[49] = t11;
$[50] = t12;
$[51] = t5;
$[52] = t13;
} else {
t13 = $[52];
}
return t13;
});
NavGroup.displayName = "Nav.Group";
export default NavGroup;