@grafana/ui/dist/esm/components/Card/CardContainer.mjs.map

Grafana Components Library

{"version":3,"file":"CardContainer.mjs","sources":["../../../../src/components/Card/CardContainer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\n\n/**\n * @public\n */\nexport interface CardInnerProps {\n  href?: string;\n  children?: React.ReactNode;\n}\n\n/** @deprecated This component will be removed in a future release */\nconst CardInner = ({ children, href }: CardInnerProps) => {\n  const { inner } = useStyles2(getCardInnerStyles);\n  return href ? (\n    <a className={inner} href={href}>\n      {children}\n    </a>\n  ) : (\n    <>{children}</>\n  );\n};\n\nconst getCardInnerStyles = (theme: GrafanaTheme2) => ({\n  inner: css({\n    display: 'flex',\n    width: '100%',\n    padding: theme.spacing(2),\n  }),\n});\n\n/**\n * @public\n */\nexport interface CardContainerProps extends HTMLAttributes<HTMLOrSVGElement>, CardInnerProps {\n  /** Disable pointer events for the Card, e.g. click events */\n  disableEvents?: boolean;\n  /** No style change on hover */\n  disableHover?: boolean;\n  /** Makes the card selectable, set to \"true\" to apply selected styles */\n  isSelected?: boolean;\n  /** Custom container styles */\n  className?: string;\n  /** Remove the bottom margin */\n  noMargin?: boolean;\n}\n\n/** @deprecated Using `CardContainer` directly is discouraged and should be replaced with `Card` */\nexport const CardContainer = ({\n  children,\n  disableEvents,\n  disableHover,\n  isSelected,\n  className,\n  href,\n  noMargin,\n  ...props\n}: CardContainerProps) => {\n  const { oldContainer } = useStyles2(\n    getCardContainerStyles,\n    disableEvents,\n    disableHover,\n    isSelected,\n    undefined,\n    noMargin\n  );\n\n  return (\n    <div {...props} className={cx(oldContainer, className)}>\n      <CardInner href={href}>{children}</CardInner>\n    </div>\n  );\n};\n\nexport const getCardContainerStyles = (\n  theme: GrafanaTheme2,\n  disabled = false,\n  disableHover = false,\n  isSelected?: boolean,\n  isCompact?: boolean,\n  noMargin = false\n) => {\n  const isSelectable = isSelected !== undefined;\n\n  return {\n    container: css({\n      display: 'grid',\n      position: 'relative',\n      gridTemplateColumns: 'auto 1fr auto',\n      gridTemplateRows: '1fr auto auto auto',\n      gridAutoColumns: '1fr',\n      gridAutoFlow: 'row',\n      gridTemplateAreas: `\n        \"Figure Heading Tags\"\n        \"Figure Meta Tags\"\n        \"Figure Description Tags\"\n        \"Figure Actions Secondary\"`,\n      width: '100%',\n      padding: theme.spacing(isCompact ? 1 : 2),\n      background: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n      marginBottom: theme.spacing(noMargin ? 0 : 1),\n      pointerEvents: disabled ? 'none' : 'auto',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {\n          duration: theme.transitions.duration.short,\n        }),\n      },\n\n      ...(!disableHover && {\n        '&:hover': {\n          background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),\n          cursor: 'pointer',\n          zIndex: 1,\n        },\n        '&:focus': getFocusStyles(theme),\n      }),\n\n      ...(isSelectable && {\n        cursor: 'pointer',\n      }),\n\n      ...(isSelected && {\n        outline: `solid 2px ${theme.colors.primary.border}`,\n      }),\n    }),\n    oldContainer: css({\n      display: 'flex',\n      width: '100%',\n      background: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n      position: 'relative',\n      pointerEvents: disabled ? 'none' : 'auto',\n      marginBottom: theme.spacing(noMargin ? 0 : 1),\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {\n          duration: theme.transitions.duration.short,\n        }),\n      },\n\n      ...(!disableHover && {\n        '&:hover': {\n          background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),\n          cursor: 'pointer',\n          zIndex: 1,\n        },\n        '&:focus': getFocusStyles(theme),\n      }),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}