@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.default = NavigationGroup;

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

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

var _lodash = require("lodash");

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function NavigationGroup({
  children,
  className,
  title
}) {
  const [groupId] = (0, _element.useState)((0, _lodash.uniqueId)('group-'));
  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 (!(0, _lodash.find)(items, {
    group: groupId,
    _isVisible: true
  })) {
    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, {
    as: "h3",
    className: "components-navigation__group-title",
    id: groupTitleId,
    variant: "caption"
  }, title), (0, _element.createElement)("ul", {
    "aria-labelledby": groupTitleId,
    role: "group"
  }, children)));
}
//# sourceMappingURL=index.js.map