@grafana/ui/dist/cjs/components/Sidebar/SidebarPaneHeader.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var IconButton = require('../IconButton/IconButton.cjs');
var Text = require('../Text/Text.cjs');
var useSidebar = require('./useSidebar.cjs');

"use strict";
function SidebarPaneHeader({ children, title }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const sidebarContext = useSidebar.useSidebarContext();
  if (!sidebarContext) {
    throw new Error("SidebarPaneHeader must be used within a Sidebar");
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
      sidebarContext.onGoBack && /* @__PURE__ */ jsxRuntime.jsx(
        IconButton.IconButton,
        {
          variant: "secondary",
          size: "lg",
          name: "arrow-left",
          onClick: sidebarContext.onGoBack,
          disabled: !sidebarContext.canGoBack,
          "aria-label": i18n.t("grafana-ui.sidebar.go-back", "Go back"),
          tooltip: i18n.t("grafana-ui.sidebar.go-back", "Go back"),
          "data-testid": e2eSelectors.selectors.components.Sidebar.goBack
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { weight: "medium", variant: "h6", truncate: true, "data-testid": e2eSelectors.selectors.components.Sidebar.headerTitle, children: title }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.flexGrow }),
      sidebarContext.onToggleDock && /* @__PURE__ */ jsxRuntime.jsx(
        IconButton.IconButton,
        {
          name: "web-section-alt",
          onClick: sidebarContext.onToggleDock,
          className: sidebarContext.isDocked ? void 0 : styles.dockedButtonUndocked,
          tooltip: sidebarContext.isDocked ? i18n.t("grafana-ui.sidebar.undock", "Undock") : i18n.t("grafana-ui.sidebar.dock", "Dock"),
          "data-testid": e2eSelectors.selectors.components.Sidebar.dockToggle
        }
      ),
      sidebarContext.onClosePane && /* @__PURE__ */ jsxRuntime.jsx(
        IconButton.IconButton,
        {
          variant: "secondary",
          size: "lg",
          name: "times",
          onClick: sidebarContext.onClosePane,
          "aria-label": i18n.t("grafana-ui.sidebar.close", "Close"),
          tooltip: i18n.t("grafana-ui.sidebar.close", "Close"),
          "data-testid": e2eSelectors.selectors.components.Sidebar.closePane
        }
      )
    ] }),
    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.actions, children })
  ] });
}
const getStyles = (theme) => {
  return {
    wrapper: css.css({
      display: "flex",
      flexDirection: "column",
      borderBottom: `1px solid ${theme.colors.border.weak}`
    }),
    header: css.css({
      display: "flex",
      alignItems: "center",
      padding: theme.spacing(1.5, 1, 1.5, 1.5),
      gap: theme.spacing(1)
    }),
    flexGrow: css.css({
      flexGrow: 1
    }),
    actions: css.css({
      display: "flex",
      alignItems: "center",
      gap: theme.spacing(1),
      padding: theme.spacing(0, 1, 1.5, 1),
      "&:empty": {
        display: "none"
      }
    }),
    dockedButtonUndocked: css.css({
      opacity: 0.6
    })
  };
};

exports.SidebarPaneHeader = SidebarPaneHeader;
//# sourceMappingURL=SidebarPaneHeader.cjs.map