@wordpress/components/build/navigation/group/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavigationGroup = NavigationGroup;
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _context = require("./context");

var _navigationStyles = require("../styles/navigation-styles");

var _context2 = require("../context");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
let uniqueId = 0;

function NavigationGroup(_ref) {
  let {
    children,
    className,
    title
  } = _ref;
  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 (0, _element.createElement)(_context.NavigationGroupContext.Provider, {
      value: context
    }, children);
  }

  const groupTitleId = `components-navigation__group-title-${groupId}`;
  const classes = (0, _classnames.default)('components-navigation__group', className);
  return (0, _element.createElement)(_context.NavigationGroupContext.Provider, {
    value: context
  }, (0, _element.createElement)("li", {
    className: classes
  }, title && (0, _element.createElement)(_navigationStyles.GroupTitleUI, {
    className: "components-navigation__group-title",
    id: groupTitleId,
    level: 3
  }, title), (0, _element.createElement)("ul", {
    "aria-labelledby": groupTitleId,
    role: "group"
  }, children)));
}

var _default = NavigationGroup;
exports.default = _default;
//# sourceMappingURL=index.js.map