@elastic/eui
Version:
Elastic UI Component Library
53 lines (52 loc) • 2.42 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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.
*/
import React from 'react';
import classNames from 'classnames';
import { useEuiMemoizedStyles } from '../../services';
import { EuiButtonIcon } from '../button';
import { useEuiI18n } from '../i18n';
import { euiContextMenuPanelTitleStyles } from './context_menu_panel_title.styles';
import { jsx as ___EmotionJSX } from "@emotion/react";
export var 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 = classNames('euiContextMenuPanelTitle', className);
var styles = useEuiMemoizedStyles(euiContextMenuPanelTitleStyles);
var closeButtonId = "".concat(id, "-closeButton");
var buttonAriaLabel = useEuiI18n('euiContextMenuPanelTitle.ariaLabel', 'Close current panel:');
return ___EmotionJSX("div", _extends({
className: classes,
css: styles.euiContextMenuPanelTitle,
"data-test-subj": "contextMenuPanelTitle"
}, rest), onClose && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(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))), ___EmotionJSX(Component, {
className: "euiContextMenuPanelTitle__text",
css: styles.text,
id: id
}, title));
};