@grafana/ui/dist/esm/components/Sidebar/SidebarPaneHeader.mjs

Grafana Components Library

import { jsxs, jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { IconButton } from '../IconButton/IconButton.mjs';
import { Text } from '../Text/Text.mjs';
import { useSidebarContext } from './useSidebar.mjs';

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

export { SidebarPaneHeader };
//# sourceMappingURL=SidebarPaneHeader.mjs.map