@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 { Tab } from '../../components/Tabs/Tab';\nimport { TabContent } from '../../components/Tabs/TabContent';\nimport { TabsBar } from '../../components/Tabs/TabsBar';\nimport { useStyles2 } from '../../themes/ThemeContext';\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":";;;;;;;;;;;;AA8BO,SAAS,gBAAgB,EAAE,IAAA,EAAM,YAAY,gBAAA,EAAkB,OAAA,EAAS,QAAO,EAAyB;AA9B/G,EAAA,IAAA,EAAA;AA+BE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,CAAS,KAAK,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,UAAU,UAAU,CAAA,GAAI,aAAa,IAAA,CAAK,CAAC,EAAE,KAAK,CAAA;AACpH,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,WAAA,GAAc,CAAC,IAAA,KAAkC;AACrD,IAAA,YAAA,CAAa,KAAK,KAAM,CAAA;AAAA,EAC1B,CAAA;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,eAAa,MAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,IAAA,EACxB,QAAA,EAAA;AAAA,MAAA,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,qBACT,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UAEC,OAAO,CAAA,CAAE,KAAA;AAAA,UACT,MAAA,EAAQ,EAAE,KAAA,KAAU,SAAA;AAAA,UACpB,WAAA,EAAa,MAAM,WAAA,CAAY,CAAC,CAAA;AAAA,UAChC,MAAM,CAAA,CAAE;AAAA,SAAA;AAAA,QAJH,CAAA,CAAE;AAAA,OAMV,CAAA;AAAA,sBACD,GAAA,CAAC,OAAI,IAAA,EAAM,CAAA,EAAG,SAAQ,MAAA,EAAO,cAAA,EAAe,YAAW,YAAA,EAAc,CAAA,EACnE,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAK,MAAK,OAAA,EAAS,OAAA,EAAS,MAAK,OAAA,EAAQ,OAAA,EAAS,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAoB,OAAA,EAAS,CAAA,EAC7F;AAAA,KAAA,EACF,CAAA;AAAA,wBACC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,OAAO,UAAA,EAAa,QAAA,EAAA,CAAA,EAAA,GAAA,IAAA,CAAK,IAAA,CAAK,CAAC,MAAM,CAAA,CAAE,KAAA,KAAU,SAAS,CAAA,KAAtC,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAyC,SAAQ,CAAA,EAC9F;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,WAAW,GAAA,CAAI;AAAA,IACb,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,IAAA,EAAM,OAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EACD,YAAY,GAAA,CAAI;AAAA,IACd,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,OAAA;AAAA,IACzC,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,MAAM,GAAA,CAAI;AAAA,IACR,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC7B,WAAA,EAAa,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,IAAA;AAAA,IACjC,EAAA,EAAI;AAAA,MACF,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC7B,GACD;AACH,CAAA,CAAA;;;;"}