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

Grafana Components Library

{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { type ReactNode } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { IconButton } from '../IconButton/IconButton';\nimport { getPortalContainer } from '../Portal/Portal';\n\nimport { SidebarButton } from './SidebarButton';\nimport { SidebarPaneHeader } from './SidebarPaneHeader';\nimport { SidebarResizer } from './SidebarResizer';\nimport {\n  SIDE_BAR_WIDTH_ICON_ONLY,\n  SIDE_BAR_WIDTH_WITH_TEXT,\n  SidebarContext,\n  type SidebarContextValue,\n  useSidebarContext,\n} from './useSidebar';\nimport { useCustomClickAway } from './useSidebarClickAway';\n\nexport interface Props {\n  children?: ReactNode;\n  contextValue: SidebarContextValue;\n}\n\nfunction SidebarComp({ children, contextValue }: Props) {\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n  const { isDocked, position, tabsMode, hasOpenPane, edgeMargin, bottomMargin, onToggleIsHidden } = contextValue;\n\n  const className = cx({\n    [styles.container]: true,\n    [styles.undockedPaneOpen]: hasOpenPane && !isDocked,\n    [styles.containerLeft]: position === 'left',\n    [styles.containerTabsMode]: tabsMode,\n    [styles.containerHidden]: !!contextValue.isHidden,\n  });\n\n  const style = { [position]: theme.spacing(edgeMargin), bottom: theme.spacing(bottomMargin) };\n\n  const ref = useCustomClickAway((evt) => {\n    const portalContainer = getPortalContainer();\n    // ignore clicks inside portal container\n    if (evt.target instanceof Node && portalContainer && portalContainer.contains(evt.target)) {\n      return;\n    }\n    if (!isDocked && hasOpenPane) {\n      contextValue.onClosePane?.();\n    }\n  });\n\n  if (contextValue.isHidden) {\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <IconButton\n          className={cx(styles.showButton, position === 'left' ? styles.showButtonLeft : styles.showButtonRight)}\n          variant=\"secondary\"\n          name={'arrow-to-right'}\n          tooltip={t('grafana-ui.sidebar.show', 'Show')}\n          tooltipPlacement={position === 'left' ? 'right' : 'left'}\n          onClick={onToggleIsHidden}\n          data-testid={selectors.components.Sidebar.showHideToggle}\n        />\n      </SidebarContext.Provider>\n    );\n  }\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={className}\n        style={style}\n        id=\"sidebar-container\"\n        data-testid={selectors.components.Sidebar.container}\n        aria-hidden={contextValue.isHidden}\n      >\n        {!tabsMode && <SidebarResizer />}\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\ninterface SiderbarToolbarProps {\n  children?: ReactNode;\n}\n\nfunction SiderbarToolbar({ children }: SiderbarToolbarProps) {\n  const styles = useStyles2(getStyles);\n  const sidebarContext = useSidebarContext();\n\n  if (!sidebarContext) {\n    throw new Error('Sidebar.Toolbar must be used within a Sidebar component');\n  }\n\n  return (\n    <div className={cx(styles.toolbar, sidebarContext.compact && styles.toolbarIconsOnly)}>\n      {children}\n      <div className={styles.flexGrow} />\n    </div>\n  );\n}\n\nfunction SidebarDivider() {\n  const styles = useStyles2(getStyles);\n\n  return <div className={styles.divider} />;\n}\n\ninterface SidebarOpenPaneProps {\n  children?: ReactNode;\n}\n\nfunction SidebarOpenPane({ children }: SidebarOpenPaneProps) {\n  const styles = useStyles2(getStyles);\n  const sidebarContext = useSidebarContext();\n\n  if (!sidebarContext) {\n    throw new Error('Sidebar.OpenPane must be used within a Sidebar component');\n  }\n\n  const className = cx(\n    styles.openPane,\n    sidebarContext.position === 'right' ? styles.openPaneRight : styles.openPaneLeft\n  );\n\n  return (\n    <div className={className} style={{ width: sidebarContext.paneWidth }}>\n      {children}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      display: 'flex',\n      position: 'absolute',\n      flexDirection: 'row',\n      flex: '1 1 0',\n      border: `1px solid ${theme.colors.border.weak}`,\n      background: theme.colors.background.primary,\n      borderRadius: theme.shape.radius.lg,\n      zIndex: theme.zIndex.navbarFixed,\n      bottom: 0,\n      top: 0,\n      right: 0,\n      width: 'calc-size(auto, size)',\n\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create('width', {\n          duration: theme.transitions.duration.standard,\n        }),\n      },\n    }),\n    containerHidden: css({\n      width: 0,\n      border: 0,\n      overflow: 'hidden',\n    }),\n    containerTabsMode: css({\n      position: 'relative',\n    }),\n    containerLeft: css({\n      right: 'unset',\n      flexDirection: 'row-reverse',\n      left: 0,\n      borderRadius: theme.shape.radius.default,\n    }),\n    undockedPaneOpen: css({\n      boxShadow: theme.shadows.z3,\n    }),\n    toolbar: css({\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingBottom: theme.spacing(1),\n      flexGrow: 0,\n      gap: theme.spacing(2),\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      width: theme.spacing(SIDE_BAR_WIDTH_WITH_TEXT),\n    }),\n    toolbarIconsOnly: css({\n      width: theme.spacing(SIDE_BAR_WIDTH_ICON_ONLY),\n    }),\n    divider: css({\n      height: '1px',\n      background: theme.colors.border.weak,\n      width: '70%',\n    }),\n    flexGrow: css({\n      flexGrow: 1,\n    }),\n    openPane: css({\n      width: '280px',\n      flexGrow: 1,\n      paddingBottom: theme.spacing(2),\n      overflowY: 'auto',\n    }),\n    openPaneRight: css({\n      borderRight: `1px solid ${theme.colors.border.weak}`,\n    }),\n    openPaneLeft: css({\n      borderLeft: `1px solid ${theme.colors.border.weak}`,\n    }),\n    showButton: css({\n      position: 'fixed',\n      bottom: theme.spacing(2),\n      zIndex: theme.zIndex.navbarFixed,\n      padding: theme.spacing(1),\n      backgroundColor: theme.colors.background.secondary,\n      border: `1px solid ${theme.colors.border.strong}`,\n    }),\n    showButtonRight: css({\n      right: theme.spacing(0.5),\n      transform: 'scaleX(-1)',\n    }),\n    showButtonLeft: css({\n      left: theme.spacing(0.5),\n    }),\n  };\n};\n\nexport const Sidebar = Object.assign(SidebarComp, {\n  Toolbar: SiderbarToolbar,\n  Button: SidebarButton,\n  OpenPane: SidebarOpenPane,\n  Divider: SidebarDivider,\n  PaneHeader: SidebarPaneHeader,\n});\n\nexport { useSidebar, useSidebarContext, type SidebarContextValue, type SidebarPosition } from './useSidebar';\n"],"names":["useStyles2","useTheme2","cx","useCustomClickAway","getPortalContainer","jsx","SidebarContext","IconButton","t","selectors","jsxs","SidebarResizer","useSidebarContext","css","SIDE_BAR_WIDTH_WITH_TEXT","SIDE_BAR_WIDTH_ICON_ONLY","SidebarButton","SidebarPaneHeader"],"mappings":"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"}