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

UI components for WordPress.

"use strict";

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

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

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

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

var _constants = require("../constants");

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

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

var _useNavigationTreeMenu = require("./use-navigation-tree-menu");

var _backButton = _interopRequireDefault(require("../back-button"));

var _menuTitle = _interopRequireDefault(require("./menu-title"));

var _searchNoResultsFound = _interopRequireDefault(require("./search-no-results-found"));

var _navigableContainer = require("../../navigable-container");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function NavigationMenu(props) {
  const {
    backButtonLabel,
    children,
    className,
    hasSearch,
    menu = _constants.ROOT_MENU,
    onBackButtonClick,
    onSearch: setControlledSearch,
    parentMenu,
    search: controlledSearch,
    isSearchDebouncing,
    title,
    titleAction
  } = props;
  const [uncontrolledSearch, setUncontrolledSearch] = (0, _element.useState)('');
  (0, _useNavigationTreeMenu.useNavigationTreeMenu)(props);
  const {
    activeMenu
  } = (0, _context2.useNavigationContext)();
  const context = {
    menu,
    search: uncontrolledSearch
  }; // Keep the children rendered to make sure invisible items are included in the navigation tree

  if (activeMenu !== menu) {
    return (0, _element.createElement)(_context.NavigationMenuContext.Provider, {
      value: context
    }, children);
  }

  const isControlledSearch = !!setControlledSearch;
  const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
  const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
  const menuTitleId = `components-navigation__menu-title-${menu}`;
  const classes = (0, _classnames.default)('components-navigation__menu', className);
  return (0, _element.createElement)(_context.NavigationMenuContext.Provider, {
    value: context
  }, (0, _element.createElement)(_navigationStyles.MenuUI, {
    className: classes
  }, (parentMenu || onBackButtonClick) && (0, _element.createElement)(_backButton.default, {
    backButtonLabel: backButtonLabel,
    parentMenu: parentMenu,
    onClick: onBackButtonClick
  }), (0, _element.createElement)(_menuTitle.default, {
    hasSearch: hasSearch,
    onSearch: onSearch,
    search: search,
    title: title,
    titleAction: titleAction
  }), (0, _element.createElement)(_navigableContainer.NavigableMenu, null, (0, _element.createElement)("ul", {
    "aria-labelledby": menuTitleId
  }, children, search && !isSearchDebouncing && (0, _element.createElement)(_searchNoResultsFound.default, {
    search: search
  })))));
}
//# sourceMappingURL=index.js.map