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

Grafana Components Library

{"version":3,"file":"Collapse.mjs","sources":["../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useId, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  collapse: css({\n    label: 'collapse',\n    marginBottom: theme.spacing(1),\n    backgroundColor: theme.colors.background.primary,\n    border: `1px solid ${theme.colors.border.weak}`,\n    position: 'relative',\n    borderRadius: theme.shape.radius.default,\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    flex: '1 1 0',\n  }),\n  collapseBody: css({\n    label: 'collapse__body',\n    padding: theme.spacing(theme.components.panel.padding),\n    paddingTop: 0,\n    flex: 1,\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  bodyContentWrapper: css({\n    label: 'bodyContentWrapper',\n    flex: 1,\n  }),\n  loader: css({\n    label: 'collapse__loader',\n    height: '2px',\n    position: 'relative',\n    overflow: 'hidden',\n    background: 'none',\n    margin: theme.spacing(0.5),\n  }),\n  loaderActive: css({\n    label: 'collapse__loader_active',\n    '&:after': {\n      content: \"' '\",\n      display: 'block',\n      width: '25%',\n      top: 0,\n      height: '250%',\n      position: 'absolute',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        animation: 'loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms',\n        animationIterationCount: 100,\n      },\n      [theme.transitions.handleMotion('reduce')]: {\n        animationDuration: '10s',\n        animationIterationCount: 20,\n      },\n      left: '-25%',\n      background: theme.colors.primary.main,\n    },\n    '@keyframes loader': {\n      from: {\n        left: '-25%',\n        opacity: 0.1,\n      },\n      to: {\n        left: '100%',\n        opacity: 1,\n      },\n    },\n  }),\n  header: css({\n    cursor: 'pointer',\n    label: 'collapse__header',\n    padding: theme.spacing(1),\n    display: 'flex',\n    gap: theme.spacing(1),\n  }),\n  button: css({\n    marginRight: 0,\n  }),\n  headerLabel: css({\n    label: 'collapse__header-label',\n    fontWeight: theme.typography.fontWeightMedium,\n    fontSize: theme.typography.size.md,\n    display: 'flex',\n    flex: 1,\n  }),\n});\n\nexport interface Props {\n  /** Expand or collapse te content */\n  isOpen?: boolean;\n  /** Element or text for the Collapse header */\n  label: React.ReactNode;\n  /** Indicates loading state of the content */\n  loading?: boolean;\n  /** Callback for the toggle functionality */\n  onToggle?: (isOpen: boolean) => void;\n  /** Additional class name for the root element */\n  className?: string;\n  /** @deprecated this prop is no longer used and will be removed in Grafana 13 */\n  collapsible?: boolean;\n}\n\nexport const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.PropsWithChildren<Props>) => {\n  const [open, setOpen] = useState(isOpen);\n  return (\n    <Collapse\n      isOpen={open}\n      {...otherProps}\n      onToggle={() => {\n        setOpen(!open);\n        if (onToggle) {\n          onToggle(!open);\n        }\n      }}\n    />\n  );\n};\n\n/**\n * A content area, which can be horizontally collapsed and expanded. Can be used to hide extra information on the page.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-collapse--docs\n */\nexport const Collapse = ({ isOpen, label, loading, onToggle, className, children }: React.PropsWithChildren<Props>) => {\n  const style = useStyles2(getStyles);\n  const labelId = useId();\n  const contentId = useId();\n\n  const onClickToggle = () => {\n    if (onToggle) {\n      onToggle(!isOpen);\n    }\n  };\n  const panelClass = cx([style.collapse, className]);\n  const loaderClass = loading ? cx([style.loader, style.loaderActive]) : style.loader;\n\n  return (\n    <div className={panelClass}>\n      {/* the inner button handles keyboard a11y. this is a convenience for mouse users */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div className={style.header} onClick={onClickToggle}>\n        <IconButton\n          aria-describedby={labelId}\n          aria-expanded={isOpen}\n          aria-controls={contentId}\n          className={style.button}\n          aria-labelledby={labelId}\n          name={isOpen ? 'angle-down' : 'angle-right'}\n        />\n        <div id={labelId} className={style.headerLabel}>\n          {label}\n        </div>\n      </div>\n      {isOpen && (\n        <div className={style.collapseBody} id={contentId}>\n          <div className={loaderClass} />\n          <div className={style.bodyContentWrapper}>{children}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCollapse.displayName = 'Collapse';\n"],"names":[],"mappings":"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"}