@grafana/ui/dist/esm/components/Layout/Grid/Grid.mjs.map

Grafana Components Library

{"version":3,"file":"Grid.mjs","sources":["../../../../../src/components/Layout/Grid/Grid.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { forwardRef, HTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { AlignItems } from '../types';\nimport { getResponsiveStyle, ResponsiveProp } from '../utils/responsiveness';\n\ninterface GridPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {\n  children: NonNullable<React.ReactNode>;\n  /** Specifies the gutters between columns and rows. It is overwritten when a column or row gap has a value. */\n  gap?: ResponsiveProp<ThemeSpacingTokens>;\n  rowGap?: ResponsiveProp<ThemeSpacingTokens>;\n  columnGap?: ResponsiveProp<ThemeSpacingTokens>;\n  alignItems?: ResponsiveProp<AlignItems>;\n}\n\ninterface PropsWithColumns extends GridPropsBase {\n  /** Number of columns */\n  columns?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n  minColumnWidth?: never;\n}\n\ninterface PropsWithMinColumnWidth extends GridPropsBase {\n  columns?: never;\n  /** For a responsive layout, fit as many columns while maintaining this minimum column width.\n   *  The real width will be calculated based on the theme spacing tokens: `theme.spacing(minColumnWidth)`\n   */\n  minColumnWidth?: ResponsiveProp<1 | 2 | 3 | 5 | 8 | 13 | 21 | 34 | 44 | 55 | 72 | 89 | 144>;\n}\n\n/** 'columns' and 'minColumnWidth' are mutually exclusive */\ntype GridProps = PropsWithColumns | PropsWithMinColumnWidth;\n\n/**\n * The Grid component is a layout component that allows you to create a grid of columns and rows to organize content and elements. It is a wrapper around the [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) specification.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-grid--docs\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { alignItems, children, gap, rowGap, columnGap, columns, minColumnWidth, ...rest } = props;\n  const styles = useStyles2(getGridStyles, gap, rowGap, columnGap, columns, minColumnWidth, alignItems);\n\n  return (\n    <div ref={ref} {...rest} className={styles.grid}>\n      {children}\n    </div>\n  );\n});\n\nGrid.displayName = 'Grid';\n\nconst getGridStyles = (\n  theme: GrafanaTheme2,\n  gap: GridProps['gap'],\n  rowGap: GridProps['rowGap'],\n  columnGap: GridProps['columnGap'],\n  columns: GridProps['columns'],\n  minColumnWidth: GridProps['minColumnWidth'],\n  alignItems: GridProps['alignItems']\n) => {\n  return {\n    grid: css([\n      { display: 'grid' },\n      getResponsiveStyle(theme, gap, (val) => ({\n        gap: theme.spacing(val),\n      })),\n      getResponsiveStyle(theme, rowGap, (val) => ({\n        rowGap: theme.spacing(val),\n      })),\n      getResponsiveStyle(theme, columnGap, (val) => ({\n        columnGap: theme.spacing(val),\n      })),\n      minColumnWidth &&\n        getResponsiveStyle(theme, minColumnWidth, (val) => ({\n          gridTemplateColumns: `repeat(auto-fill, minmax(${theme.spacing(val)}, 1fr))`,\n        })),\n      columns &&\n        getResponsiveStyle(theme, columns, (val) => ({\n          gridTemplateColumns: `repeat(${val}, 1fr)`,\n        })),\n      getResponsiveStyle(theme, alignItems, (val) => ({\n        alignItems: val,\n      })),\n    ]),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAyCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,GAAA,EAAK,MAAA,EAAQ,WAAW,OAAA,EAAS,cAAA,EAAgB,GAAG,IAAA,EAAK,GAAI,KAAA;AAC3F,EAAA,MAAM,MAAA,GAAS,WAAW,aAAA,EAAe,GAAA,EAAK,QAAQ,SAAA,EAAW,OAAA,EAAS,gBAAgB,UAAU,CAAA;AAEpG,EAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAW,GAAG,MAAM,SAAA,EAAW,MAAA,CAAO,MACxC,QAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;AAEnB,MAAM,aAAA,GAAgB,CACpB,KAAA,EACA,GAAA,EACA,QACA,SAAA,EACA,OAAA,EACA,gBACA,UAAA,KACG;AACH,EAAA,OAAO;AAAA,IACL,MAAM,GAAA,CAAI;AAAA,MACR,EAAE,SAAS,MAAA,EAAO;AAAA,MAClB,kBAAA,CAAmB,KAAA,EAAO,GAAA,EAAK,CAAC,GAAA,MAAS;AAAA,QACvC,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,OACxB,CAAE,CAAA;AAAA,MACF,kBAAA,CAAmB,KAAA,EAAO,MAAA,EAAQ,CAAC,GAAA,MAAS;AAAA,QAC1C,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,OAC3B,CAAE,CAAA;AAAA,MACF,kBAAA,CAAmB,KAAA,EAAO,SAAA,EAAW,CAAC,GAAA,MAAS;AAAA,QAC7C,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,OAC9B,CAAE,CAAA;AAAA,MACF,cAAA,IACE,kBAAA,CAAmB,KAAA,EAAO,cAAA,EAAgB,CAAC,GAAA,MAAS;AAAA,QAClD,mBAAA,EAAqB,CAAA,yBAAA,EAA4B,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA,OAAA;AAAA,OACrE,CAAE,CAAA;AAAA,MACJ,OAAA,IACE,kBAAA,CAAmB,KAAA,EAAO,OAAA,EAAS,CAAC,GAAA,MAAS;AAAA,QAC3C,mBAAA,EAAqB,UAAU,GAAG,CAAA,MAAA;AAAA,OACpC,CAAE,CAAA;AAAA,MACJ,kBAAA,CAAmB,KAAA,EAAO,UAAA,EAAY,CAAC,GAAA,MAAS;AAAA,QAC9C,UAAA,EAAY;AAAA,OACd,CAAE;AAAA,KACH;AAAA,GACH;AACF,CAAA;;;;"}