@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
111 lines (110 loc) • 4.78 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-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 Inline from "../Inline/Inline.js";
import InlineStretch from "../Inline/Inline.Stretch.js";
/**
* Group of clickable items for Nav
*/ const NavGroup = /*#__PURE__*/ forwardRef(({ active = false, name, icon, children, className, defaultExpanded = false, eager = true, "aria-label": ariaLabel, ...props }, ref)=>{
const { where, sideExpandedOrMobile } = useNavLocation();
const [expanded, setExpanded] = useState(!!defaultExpanded);
const [dropdownVisible, setDropdownVisible] = useState(false);
const buttonRef = useRef(null);
const handleClick = useCallback((e)=>{
e.preventDefault();
if (!sideExpandedOrMobile) {
setDropdownVisible(!dropdownVisible);
} else {
setExpanded(!expanded);
}
}, [
setExpanded,
expanded,
sideExpandedOrMobile,
dropdownVisible
]);
return /*#__PURE__*/ _jsxs("div", {
...props,
ref: ref,
className: classNames("bf-nav-group", className),
children: [
/*#__PURE__*/ _jsx("button", {
type: "button",
className: classNames("bf-nav-group-button", {
"bf-nav-group-button-expanded": expanded,
active
}),
"aria-expanded": sideExpandedOrMobile ? expanded : dropdownVisible,
"aria-label": ariaLabel,
onClick: handleClick,
ref: buttonRef,
children: /*#__PURE__*/ _jsxs(NavItem, {
icon: icon,
children: [
name,
sideExpandedOrMobile && /*#__PURE__*/ _jsx("span", {
className: "bf-nav-expand-icon",
children: /*#__PURE__*/ _jsx(Icon, {
icon: expanded ? faAngleUp : faAngleDown
})
})
]
})
}),
(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(Inline, {
className: "bf-nav-group-dropout-title",
align: "center",
gap: 8,
children: [
/*#__PURE__*/ _jsx(InlineStretch, {
children: name
}),
icon && /*#__PURE__*/ _jsx(Icon, {
icon: icon
})
]
}),
/*#__PURE__*/ _jsx("div", {
className: "bf-nav-group-dropout-content",
onClick: (e)=>{
if (e.target.closest?.(".bf-nav-item")) {
setDropdownVisible(false);
}
},
children: children
})
]
})
}),
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
})
})
]
});
});
NavGroup.displayName = "Nav.Group";
export default NavGroup;