{"version":3,"file":"PageToolbar.mjs","sources":["../../../../src/components/PageLayout/PageToolbar.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { memo, Children, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types';\nimport { t } from '../../utils/i18n';\nimport { Icon } from '../Icon/Icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Link } from '../Link/Link';\nimport { ToolbarButtonRow } from '../ToolbarButton/ToolbarButtonRow';\n\nexport interface Props {\n  pageIcon?: IconName;\n  title?: string;\n  section?: string;\n  parent?: string;\n  onGoBack?: () => void;\n  titleHref?: string;\n  parentHref?: string;\n  leftItems?: ReactNode[];\n  children?: ReactNode;\n  className?: string;\n  isFullscreen?: boolean;\n  'aria-label'?: string;\n  buttonOverflowAlignment?: 'left' | 'right';\n  /**\n   * Forces left items to be visible on small screens.\n   * By default left items are hidden on small screens.\n   */\n  forceShowLeftItems?: boolean;\n}\n\n/** @alpha */\nexport const PageToolbar = memo(\n  ({\n    title,\n    section,\n    parent,\n    pageIcon,\n    onGoBack,\n    children,\n    titleHref,\n    parentHref,\n    leftItems,\n    isFullscreen,\n    className,\n    /** main nav-container aria-label **/\n    'aria-label': ariaLabel,\n    buttonOverflowAlignment = 'right',\n    forceShowLeftItems = false,\n  }: Props) => {\n    const styles = useStyles2(getStyles);\n\n    /**\n     * .page-toolbar css class is used for some legacy css view modes (TV/Kiosk) and\n     * media queries for mobile view when toolbar needs left padding to make room\n     * for mobile menu icon. This logic hopefully can be changed when we move to a full react\n     * app and change how the app side menu & mobile menu is rendered.\n     */\n    const mainStyle = cx(\n      'page-toolbar',\n      styles.toolbar,\n      {\n        ['page-toolbar--fullscreen']: isFullscreen,\n        [styles.noPageIcon]: !pageIcon,\n      },\n      className\n    );\n\n    const titleEl = (\n      <>\n        <span className={styles.truncateText}>{title}</span>\n        {section && (\n          <span className={styles.pre}>\n            {' / '}\n            {section}\n          </span>\n        )}\n      </>\n    );\n\n    const goBackLabel = t('grafana-ui.page-toolbar.go-back', 'Go back (Esc)');\n    const searchParentFolderLabel = t(\n      'grafana-ui.page-toolbar.search-parent-folder',\n      'Search dashboard in the {{parent}} folder',\n      { parent }\n    );\n    const searchDashboardNameLabel = t('grafana-ui.page-toolbar.search-dashboard-name', 'Search dashboard by name');\n    const searchLinksLabel = t('grafana-ui.page-toolbar.search-links', 'Search links');\n\n    return (\n      <nav className={mainStyle} aria-label={ariaLabel}>\n        <div className={styles.leftWrapper}>\n          {pageIcon && !onGoBack && (\n            <div className={styles.pageIcon}>\n              <Icon name={pageIcon} size=\"lg\" aria-hidden />\n            </div>\n          )}\n          {onGoBack && (\n            <div className={styles.pageIcon}>\n              <IconButton\n                name=\"arrow-left\"\n                tooltip={goBackLabel}\n                tooltipPlacement=\"bottom\"\n                size=\"xxl\"\n                data-testid={selectors.components.BackButton.backArrow}\n                onClick={onGoBack}\n              />\n            </div>\n          )}\n          <nav aria-label={searchLinksLabel} className={styles.navElement}>\n            {parent && parentHref && (\n              <>\n                <Link\n                  aria-label={searchParentFolderLabel}\n                  className={cx(styles.titleText, styles.parentLink, styles.titleLink, styles.truncateText)}\n                  href={parentHref}\n                >\n                  {parent} <span className={styles.parentIcon}></span>\n                </Link>\n                {titleHref && (\n                  <span className={cx(styles.titleText, styles.titleDivider)} aria-hidden>\n                    {'/'}\n                  </span>\n                )}\n              </>\n            )}\n\n            {(title || Boolean(leftItems?.length)) && (\n              <div className={styles.titleWrapper}>\n                {title && (\n                  <h1 className={styles.h1Styles}>\n                    {titleHref ? (\n                      <Link\n                        aria-label={searchDashboardNameLabel}\n                        className={cx(styles.titleText, styles.titleLink)}\n                        href={titleHref}\n                      >\n                        {titleEl}\n                      </Link>\n                    ) : (\n                      <div className={styles.titleText}>{titleEl}</div>\n                    )}\n                  </h1>\n                )}\n\n                {leftItems?.map((child, index) => (\n                  <div\n                    className={cx(styles.leftActionItem, { [styles.forceShowLeftActionItems]: forceShowLeftItems })}\n                    key={index}\n                  >\n                    {child}\n                  </div>\n                ))}\n              </div>\n            )}\n          </nav>\n        </div>\n        <ToolbarButtonRow alignment={buttonOverflowAlignment}>\n          {Children.toArray(children).filter(Boolean)}\n        </ToolbarButtonRow>\n      </nav>\n    );\n  }\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const { spacing, typography } = theme;\n\n  const focusStyle = getFocusStyles(theme);\n\n  return {\n    pre: css({\n      whiteSpace: 'pre',\n    }),\n    toolbar: css({\n      alignItems: 'center',\n      background: theme.colors.background.canvas,\n      display: 'flex',\n      gap: theme.spacing(2),\n      justifyContent: 'space-between',\n      padding: theme.spacing(1.5, 2),\n\n      [theme.breakpoints.down('md')]: {\n        paddingLeft: '53px',\n      },\n    }),\n    noPageIcon: css({\n      [theme.breakpoints.down('md')]: {\n        paddingLeft: theme.spacing(2),\n      },\n    }),\n    leftWrapper: css({\n      display: 'flex',\n      flexWrap: 'nowrap',\n      maxWidth: '70%',\n    }),\n    pageIcon: css({\n      display: 'none',\n      [theme.breakpoints.up('sm')]: {\n        display: 'flex',\n        paddingRight: theme.spacing(1),\n        alignItems: 'center',\n      },\n    }),\n    truncateText: css({\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    }),\n    titleWrapper: css({\n      display: 'flex',\n      margin: 0,\n      minWidth: 0,\n    }),\n    navElement: css({\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 0,\n    }),\n    h1Styles: css({\n      margin: spacing(0, 1, 0, 0),\n      lineHeight: 'inherit',\n      flexGrow: 1,\n      minWidth: 0,\n    }),\n    parentIcon: css({\n      marginLeft: theme.spacing(0.5),\n    }),\n    titleText: css({\n      display: 'flex',\n      fontSize: typography.size.lg,\n      margin: 0,\n      borderRadius: theme.shape.radius.default,\n    }),\n    titleLink: css({\n      '&:focus-visible': focusStyle,\n    }),\n    titleDivider: css({\n      padding: spacing(0, 0.5, 0, 0.5),\n      display: 'none',\n      [theme.breakpoints.up('md')]: {\n        display: 'unset',\n      },\n    }),\n    parentLink: css({\n      display: 'none',\n      [theme.breakpoints.up('md')]: {\n        display: 'unset',\n        flex: 1,\n      },\n    }),\n    leftActionItem: css({\n      display: 'none',\n      alignItems: 'center',\n      paddingRight: spacing(0.5),\n      [theme.breakpoints.up('md')]: {\n        display: 'flex',\n      },\n    }),\n    forceShowLeftActionItems: css({\n      display: 'flex',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}