{"version":3,"file":"CollapsableSection.mjs","sources":["../../../../src/components/Collapse/CollapsableSection.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { ReactNode, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\n\nexport interface Props {\n  label: ReactNode;\n  isOpen: boolean;\n  /** Callback for the toggle functionality */\n  onToggle?: (isOpen: boolean) => void;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  loading?: boolean;\n  labelId?: string;\n  headerDataTestId?: string;\n  contentDataTestId?: string;\n  unmountContentWhenClosed?: boolean;\n}\n\nexport const CollapsableSection = ({\n  label,\n  isOpen,\n  onToggle,\n  className,\n  contentClassName,\n  children,\n  labelId,\n  loading = false,\n  headerDataTestId,\n  contentDataTestId,\n  unmountContentWhenClosed = true,\n}: Props) => {\n  const [open, toggleOpen] = useState<boolean>(isOpen);\n  const styles = useStyles2(collapsableSectionStyles);\n\n  const onClick = (e: React.MouseEvent) => {\n    if (e.target instanceof HTMLElement && e.target.tagName === 'A') {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    onToggle?.(!open);\n    toggleOpen(!open);\n  };\n  const { current: id } = useRef(uniqueId());\n\n  const buttonLabelId = labelId ?? `collapse-label-${id}`;\n\n  const content = (\n    <div\n      id={`collapse-content-${id}`}\n      className={cx(styles.content, contentClassName, {\n        [styles.contentHidden]: !open && !unmountContentWhenClosed,\n      })}\n      data-testid={contentDataTestId}\n    >\n      {children}\n    </div>\n  );\n\n  return (\n    <>\n      {/* disabling the a11y rules here as the button handles keyboard interactions */}\n      {/* this is just to provide a better experience for mouse users */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div onClick={onClick} className={cx(styles.header, className)}>\n        <button\n          type=\"button\"\n          id={`collapse-button-${id}`}\n          className={styles.button}\n          onClick={onClick}\n          aria-expanded={open && !loading}\n          aria-controls={`collapse-content-${id}`}\n          aria-labelledby={buttonLabelId}\n        >\n          {loading ? (\n            <Spinner className={styles.spinner} />\n          ) : (\n            <Icon name={open ? 'angle-up' : 'angle-down'} className={styles.icon} />\n          )}\n        </button>\n        <div className={styles.label} id={`collapse-label-${id}`} data-testid={headerDataTestId}>\n          {label}\n        </div>\n      </div>\n      {unmountContentWhenClosed ? open && content : content}\n    </>\n  );\n};\n\nconst collapsableSectionStyles = (theme: GrafanaTheme2) => ({\n  header: css({\n    display: 'flex',\n    cursor: 'pointer',\n    boxSizing: 'border-box',\n    flexDirection: 'row-reverse',\n    position: 'relative',\n    justifyContent: 'space-between',\n    fontSize: theme.typography.size.lg,\n    padding: `${theme.spacing(0.5)} 0`,\n    '&:focus-within': getFocusStyles(theme),\n  }),\n  button: css({\n    all: 'unset',\n    '&:focus-visible': {\n      outline: 'none',\n      outlineOffset: 'unset',\n      transition: 'none',\n      boxShadow: 'none',\n    },\n  }),\n  icon: css({\n    color: theme.colors.text.secondary,\n  }),\n  content: css({\n    padding: `${theme.spacing(2)} 0`,\n  }),\n  contentHidden: css({\n    display: 'none',\n  }),\n  spinner: css({\n    display: 'flex',\n    alignItems: 'center',\n    width: theme.spacing(2),\n  }),\n  label: css({\n    display: 'flex',\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.colors.text.maxContrast,\n  }),\n});\n"],"names":[],"mappings":"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"}