@wordpress/components/build/navigation/menu/menu-title.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = NavigationMenuTitle;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _animate = require("../../animate");
var _button = _interopRequireDefault(require("../../button"));
var _menuTitleSearch = _interopRequireDefault(require("./menu-title-search"));
var _navigationStyles = require("../styles/navigation-styles");
var _context = require("./context");
var _constants = require("../constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function NavigationMenuTitle({
  hasSearch,
  onSearch,
  search,
  title,
  titleAction
}) {
  const [isSearching, setIsSearching] = (0, _element.useState)(false);
  const {
    menu
  } = (0, _context.useNavigationMenuContext)();
  const searchButtonRef = (0, _element.useRef)(null);
  if (!title) {
    return null;
  }
  const onCloseSearch = () => {
    setIsSearching(false);

    // Wait for the slide-in animation to complete before focusing the search button.
    // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
    setTimeout(() => {
      searchButtonRef.current?.focus();
    }, _constants.SEARCH_FOCUS_DELAY);
  };
  const menuTitleId = `components-navigation__menu-title-${menu}`;
  /* translators: search button label for menu search box. %s: menu title */
  const searchButtonLabel = (0, _i18n.sprintf)((0, _i18n.__)('Search in %s'), title);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.MenuTitleUI, {
    className: "components-navigation__menu-title",
    children: [!isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.GroupTitleUI, {
      as: "h2",
      className: "components-navigation__menu-title-heading",
      level: 3,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        id: menuTitleId,
        children: title
      }), (hasSearch || titleAction) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.MenuTitleActionsUI, {
        children: [titleAction, hasSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
          size: "small",
          variant: "tertiary",
          label: searchButtonLabel,
          onClick: () => setIsSearching(true),
          ref: searchButtonRef,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
            icon: _icons.search
          })
        })]
      })]
    }), isSearching && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _animate.getAnimateClassName)({
        type: 'slide-in',
        origin: 'left'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuTitleSearch.default, {
        onCloseSearch: onCloseSearch,
        onSearch: onSearch,
        search: search,
        title: title
      })
    })]
  });
}
//# sourceMappingURL=menu-title.js.map