@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 { styleMixins, useStyles2 } from '../../themes';\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}\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  ...props\n}: CardContainerProps) => {\n  const { oldContainer } = useStyles2(getCardContainerStyles, disableEvents, disableHover, isSelected);\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) => {\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: '8px',\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': styleMixins.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(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': styleMixins.getFocusStyles(theme),\n      }),\n    }),\n  };\n};\n"],"names":["styleMixins.getFocusStyles"],"mappings":"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"}