@elastic/eui/lib/components/context_menu/context_menu_panel_title.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EuiContextMenuPanelTitle = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _services = require("../../services");
var _button = require("../button");
var _i18n = require("../i18n");
var _context_menu_panel_title = require("./context_menu_panel_title.styles");
var _react2 = require("@emotion/react");
var _excluded = ["component", "id", "title", "buttonRef", "className", "onClose", "buttonProps"];
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
var EuiContextMenuPanelTitle = exports.EuiContextMenuPanelTitle = function EuiContextMenuPanelTitle(props) {
  var _props$component = props.component,
    Component = _props$component === void 0 ? 'h2' : _props$component,
    id = props.id,
    title = props.title,
    buttonRef = props.buttonRef,
    className = props.className,
    onClose = props.onClose,
    buttonProps = props.buttonProps,
    rest = _objectWithoutProperties(props, _excluded);
  var classes = (0, _classnames.default)('euiContextMenuPanelTitle', className);
  var styles = (0, _services.useEuiMemoizedStyles)(_context_menu_panel_title.euiContextMenuPanelTitleStyles);
  var closeButtonId = "".concat(id, "-closeButton");
  var buttonAriaLabel = (0, _i18n.useEuiI18n)('euiContextMenuPanelTitle.ariaLabel', 'Close current panel:');
  return (0, _react2.jsx)("div", _extends({
    className: classes,
    css: styles.euiContextMenuPanelTitle,
    "data-test-subj": "contextMenuPanelTitle"
  }, rest), onClose && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
    buttonRef: buttonRef,
    color: "text",
    iconType: "chevronSingleLeft",
    onClick: onClose,
    "data-test-subj": "contextMenuPanelTitleButton",
    id: closeButtonId,
    "aria-label": buttonAriaLabel
    // Uses aria-labelledby to combine aria-label with the panel title for screen readers.
    ,
    "aria-labelledby": "".concat(closeButtonId, " ").concat(id)
  }, buttonProps))), (0, _react2.jsx)(Component, {
    className: "euiContextMenuPanelTitle__text",
    css: styles.text,
    id: id
  }, title));
};
EuiContextMenuPanelTitle.propTypes = {
  className: _propTypes.default.string,
  "aria-label": _propTypes.default.string,
  "data-test-subj": _propTypes.default.string,
  css: _propTypes.default.any,
  component: _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5", "h6"]),
  id: _propTypes.default.string,
  title: _propTypes.default.node,
  buttonRef: _propTypes.default.any,
  buttonProps: _propTypes.default.shape({
    "aria-label": _propTypes.default.string,
    "aria-labelledby": _propTypes.default.string,
    /**
       * Overall size of button.
       * Matches the sizes of other EuiButtons
       */
    size: _propTypes.default.any,
    /**
       * Size of the icon only.
       * This will not affect the overall size of the button
       */
    iconSize: _propTypes.default.any,
    /**
       * Applies the boolean state as the `aria-pressed` property to create a toggle button.
       * *Only use when the readable text does not change between states.*
       */
    isSelected: _propTypes.default.bool,
    /**
       * Sets the display style for matching other EuiButton types.
       * `base` is equivalent to a typical EuiButton
       * `fill` is equivalent to a filled EuiButton
       * `empty` (default) is equivalent to an EuiButtonEmpty
       */
    display: _propTypes.default.any,
    /**
       * Disables the button and changes the icon to a loading spinner
       */
    isLoading: _propTypes.default.bool,
    className: _propTypes.default.string,
    "data-test-subj": _propTypes.default.string,
    css: _propTypes.default.any,
    /**
       * Controls the disabled behavior via the native `disabled` attribute.
       */
    isDisabled: _propTypes.default.bool,
    /**
       * NOTE: Beta feature, may be changed or removed in the future
       *
       * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
       * This results in a semantically disabled button without the default browser handling of the disabled state.
       *
       * Use e.g. when a disabled button should have a tooltip.
       */
    hasAriaDisabled: _propTypes.default.bool
  }),
  onClose: _propTypes.default.func
};