{"version":3,"file":"index.mjs","sources":["../../../../../src/components/InteractiveTable/Expander/index.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CellProps, HeaderProps } from 'react-table';\n\nimport { t } from '../../../utils/i18n';\nimport { IconButton } from '../../IconButton/IconButton';\n\nconst expanderContainerStyles = css({\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n});\n\nexport function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, void>) {\n  return (\n    <div className={expanderContainerStyles}>\n      <IconButton\n        tooltip={t('grafana-ui.interactive-table.expand-row-tooltip', 'Toggle row expanded')}\n        aria-controls={__rowID}\n        // @ts-expect-error react-table doesn't ship with useExpanded types and we can't use declaration merging without affecting the table viz\n        name={row.isExpanded ? 'angle-down' : 'angle-right'}\n        // @ts-expect-error same as the line above\n        aria-expanded={row.isExpanded}\n        // @ts-expect-error same as the line above\n        {...row.getToggleRowExpandedProps()}\n        size=\"lg\"\n      />\n    </div>\n  );\n}\n\nexport function ExpanderHeader<K extends object>({ isAllRowsExpanded, toggleAllRowsExpanded }: HeaderProps<K>) {\n  return (\n    <div className={expanderContainerStyles}>\n      <IconButton\n        aria-label={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}\n        name={!isAllRowsExpanded ? 'table-expand-all' : 'table-collapse-all'}\n        onClick={() => toggleAllRowsExpanded()}\n        size={'lg'}\n        tooltip={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}\n        variant={'secondary'}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMgC,GAAI,CAAA;AAAA,EAClC,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,MAAQ,EAAA;AACV,CAAC"}