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

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { find, uniqueId } from 'lodash';
/**
 * WordPress dependencies
 */

import { useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { NavigationGroupContext } from './context';
import { GroupTitleUI } from '../styles/navigation-styles';
import { useNavigationContext } from '../context';
export default function NavigationGroup({
  children,
  className,
  title
}) {
  const [groupId] = useState(uniqueId('group-'));
  const {
    navigationTree: {
      items
    }
  } = useNavigationContext();
  const context = {
    group: groupId
  }; // Keep the children rendered to make sure invisible items are included in the navigation tree.

  if (!find(items, {
    group: groupId,
    _isVisible: true
  })) {
    return createElement(NavigationGroupContext.Provider, {
      value: context
    }, children);
  }

  const groupTitleId = `components-navigation__group-title-${groupId}`;
  const classes = classnames('components-navigation__group', className);
  return createElement(NavigationGroupContext.Provider, {
    value: context
  }, createElement("li", {
    className: classes
  }, title && createElement(GroupTitleUI, {
    as: "h3",
    className: "components-navigation__group-title",
    id: groupTitleId,
    variant: "caption"
  }, title), createElement("ul", {
    "aria-labelledby": groupTitleId,
    role: "group"
  }, children)));
}
//# sourceMappingURL=index.js.map