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

UI components for WordPress.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

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

import { NavigationGroupContext } from './context';
import { GroupTitleUI } from '../styles/navigation-styles';
import { useNavigationContext } from '../context';
let uniqueId = 0;
export function NavigationGroup(_ref) {
  let {
    children,
    className,
    title
  } = _ref;
  const [groupId] = useState(`group-${++uniqueId}`);
  const {
    navigationTree: {
      items
    }
  } = 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 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, {
    className: "components-navigation__group-title",
    id: groupTitleId,
    level: 3
  }, title), createElement("ul", {
    "aria-labelledby": groupTitleId,
    role: "group"
  }, children)));
}
export default NavigationGroup;
//# sourceMappingURL=index.js.map