@wordpress/components
Version:
UI components for WordPress.
74 lines (68 loc) • 2.11 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigationGroup = NavigationGroup;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _context = require("./context");
var _navigationStyles = require("../styles/navigation-styles");
var _context2 = require("../context");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
let uniqueId = 0;
/**
* @deprecated Use `Navigator` instead.
*/
function NavigationGroup({
children,
className,
title
}) {
const [groupId] = (0, _element.useState)(`group-${++uniqueId}`);
const {
navigationTree: {
items
}
} = (0, _context2.useNavigationContext)();
const context = {
group: groupId
};
// Keep the children rendered to make sure invisible items are included in the navigation tree.
if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationGroupContext.Provider, {
value: context,
children: children
});
}
const groupTitleId = `components-navigation__group-title-${groupId}`;
const classes = (0, _clsx.default)('components-navigation__group', className);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationGroupContext.Provider, {
value: context,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
className: classes,
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.GroupTitleUI, {
className: "components-navigation__group-title",
id: groupTitleId,
level: 3,
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
"aria-labelledby": groupTitleId,
role: "group",
children: children
})]
})
});
}
var _default = exports.default = NavigationGroup;
//# sourceMappingURL=index.js.map