@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.NavigationMenu = NavigationMenu;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
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");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @deprecated Use `Navigator` instead.
 */
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationMenuContext.Provider, {
      value: context,
      children: children
    });
  }
  const isControlledSearch = !!setControlledSearch;
  const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
  const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
  const menuTitleId = `components-navigation__menu-title-${menu}`;
  const classes = (0, _clsx.default)('components-navigation__menu', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationMenuContext.Provider, {
    value: context,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.MenuUI, {
      className: classes,
      children: [(parentMenu || onBackButtonClick) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_backButton.default, {
        backButtonLabel: backButtonLabel,
        parentMenu: parentMenu,
        onClick: onBackButtonClick
      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuTitle.default, {
        hasSearch: hasSearch,
        onSearch: onSearch,
        search: search,
        title: title,
        titleAction: titleAction
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableContainer.NavigableMenu, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
          "aria-labelledby": menuTitleId,
          children: [children, search && !isSearchDebouncing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchNoResultsFound.default, {
            search: search
          })]
        })
      })]
    })
  });
}
var _default = exports.default = NavigationMenu;
//# sourceMappingURL=index.js.map