@wordpress/components
Version:
UI components for WordPress.
54 lines (53 loc) • 1.57 kB
JavaScript
// packages/components/src/navigation/group/index.tsx
import clsx from "clsx";
import { useState } from "@wordpress/element";
import { NavigationGroupContext } from "./context";
import { GroupTitleUI } from "../styles/navigation-styles";
import { useNavigationContext } from "../context";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var uniqueId = 0;
function NavigationGroup({
children,
className,
title
}) {
const [groupId] = useState(`group-${++uniqueId}`);
const {
navigationTree: {
items
}
} = useNavigationContext();
const context = {
group: groupId
};
if (!Object.values(items).some((item) => item.group === groupId && item._isVisible)) {
return /* @__PURE__ */ _jsx(NavigationGroupContext.Provider, {
value: context,
children
});
}
const groupTitleId = `components-navigation__group-title-${groupId}`;
const classes = clsx("components-navigation__group", className);
return /* @__PURE__ */ _jsx(NavigationGroupContext.Provider, {
value: context,
children: /* @__PURE__ */ _jsxs("li", {
className: classes,
children: [title && /* @__PURE__ */ _jsx(GroupTitleUI, {
className: "components-navigation__group-title",
id: groupTitleId,
level: 3,
children: title
}), /* @__PURE__ */ _jsx("ul", {
"aria-labelledby": groupTitleId,
role: "group",
children
})]
})
});
}
var group_default = NavigationGroup;
export {
NavigationGroup,
group_default as default
};
//# sourceMappingURL=index.js.map