@grafana/ui/dist/esm/components/PageLayout/PageToolbar.mjs.map

Grafana Components Library

{"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';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types/icon';\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/**\n * @deprecated Use Page instead\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-deprecated-pagetoolbar--docs\n */\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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"}