@grafana/ui/dist/esm/components/TabbedContainer/TabbedContainer.mjs.map

Grafana Components Library

{"version":3,"file":"TabbedContainer.mjs","sources":["../../../../src/components/TabbedContainer/TabbedContainer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue, GrafanaTheme2 } from '@grafana/data';\n\nimport { IconButton } from '../../components/IconButton/IconButton';\nimport { TabsBar, Tab, TabContent } from '../../components/Tabs';\nimport { useStyles2 } from '../../themes';\nimport { IconName } from '../../types/icon';\nimport { Box } from '../Layout/Box/Box';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\n\nexport interface TabConfig {\n  label: string;\n  value: string;\n  content: React.ReactNode;\n  icon: IconName;\n}\n\nexport interface TabbedContainerProps {\n  tabs: TabConfig[];\n  defaultTab?: string;\n  closeIconTooltip?: string;\n  onClose: () => void;\n  testId?: string;\n}\n\nexport function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, testId }: TabbedContainerProps) {\n  const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);\n  const styles = useStyles2(getStyles);\n\n  const onSelectTab = (item: SelectableValue<string>) => {\n    setActiveTab(item.value!);\n  };\n\n  return (\n    <div className={styles.container} data-testid={testId}>\n      <TabsBar className={styles.tabs}>\n        {tabs.map((t) => (\n          <Tab\n            key={t.value}\n            label={t.label}\n            active={t.value === activeTab}\n            onChangeTab={() => onSelectTab(t)}\n            icon={t.icon}\n          />\n        ))}\n        <Box grow={1} display=\"flex\" justifyContent=\"flex-end\" paddingRight={1}>\n          <IconButton size=\"lg\" onClick={onClose} name=\"times\" tooltip={closeIconTooltip ?? 'Close'} />\n        </Box>\n      </TabsBar>\n      <ScrollContainer>\n        <TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>\n      </ScrollContainer>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    height: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    flex: '1 1 0',\n    minHeight: 0,\n  }),\n  tabContent: css({\n    padding: theme.spacing(2),\n    backgroundColor: theme.colors.background.primary,\n    flex: 1,\n  }),\n  tabs: css({\n    paddingTop: theme.spacing(0.5),\n    borderColor: theme.colors.border.weak,\n    ul: {\n      marginLeft: theme.spacing(2),\n    },\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BO,SAAS,gBAAgB,EAAE,IAAA,EAAM,YAAY,gBAAkB,EAAA,OAAA,EAAS,QAAgC,EAAA;AA5B/G,EAAA,IAAA,EAAA;AA6BE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA,CAAS,KAAK,IAAK,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,UAAU,CAAA,GAAI,aAAa,IAAK,CAAA,CAAC,EAAE,KAAK,CAAA;AACpH,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,CAAC,IAAkC,KAAA;AACrD,IAAA,YAAA,CAAa,KAAK,KAAM,CAAA;AAAA,GAC1B;AAEA,EAAA,4BACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,SAAA,EAAW,eAAa,MAC7C,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,MAAA,CAAO,IACxB,EAAA,QAAA,EAAA;AAAA,MAAK,IAAA,CAAA,GAAA,CAAI,CAAC,CACT,qBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEC,OAAO,CAAE,CAAA,KAAA;AAAA,UACT,MAAA,EAAQ,EAAE,KAAU,KAAA,SAAA;AAAA,UACpB,WAAA,EAAa,MAAM,WAAA,CAAY,CAAC,CAAA;AAAA,UAChC,MAAM,CAAE,CAAA;AAAA,SAAA;AAAA,QAJH,CAAE,CAAA;AAAA,OAMV,CAAA;AAAA,sBACD,GAAA,CAAC,OAAI,IAAM,EAAA,CAAA,EAAG,SAAQ,MAAO,EAAA,cAAA,EAAe,YAAW,YAAc,EAAA,CAAA,EACnE,8BAAC,UAAW,EAAA,EAAA,IAAA,EAAK,MAAK,OAAS,EAAA,OAAA,EAAS,MAAK,OAAQ,EAAA,OAAA,EAAS,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,OAAA,EAAS,CAC7F,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBACC,eACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAO,UAAa,EAAA,QAAA,EAAA,CAAA,EAAA,GAAA,IAAA,CAAK,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,SAAS,CAAtC,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAyC,SAAQ,CAC9F,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,WAAW,GAAI,CAAA;AAAA,IACb,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,IAAM,EAAA,OAAA;AAAA,IACN,SAAW,EAAA;AAAA,GACZ,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,IACzC,IAAM,EAAA;AAAA,GACP,CAAA;AAAA,EACD,MAAM,GAAI,CAAA;AAAA,IACR,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC7B,WAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA;AAAA,IACjC,EAAI,EAAA;AAAA,MACF,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC7B,GACD;AACH,CAAA,CAAA;;;;"}