@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\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":";;;;;;AAoCO,MAAM,IAAO,GAAA,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxE,EAAM,MAAA,EAAE,UAAY,EAAA,QAAA,EAAU,GAAK,EAAA,MAAA,EAAQ,WAAW,OAAS,EAAA,cAAA,EAAgB,GAAG,IAAA,EAAS,GAAA,KAAA;AAC3F,EAAM,MAAA,MAAA,GAAS,WAAW,aAAe,EAAA,GAAA,EAAK,QAAQ,SAAW,EAAA,OAAA,EAAS,gBAAgB,UAAU,CAAA;AAEpG,EACE,uBAAA,GAAA,CAAC,SAAI,GAAW,EAAA,GAAG,MAAM,SAAW,EAAA,MAAA,CAAO,MACxC,QACH,EAAA,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;AAEnB,MAAM,aAAA,GAAgB,CACpB,KACA,EAAA,GAAA,EACA,QACA,SACA,EAAA,OAAA,EACA,gBACA,UACG,KAAA;AACH,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,EAAE,SAAS,MAAO,EAAA;AAAA,MAClB,kBAAmB,CAAA,KAAA,EAAO,GAAK,EAAA,CAAC,GAAS,MAAA;AAAA,QACvC,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,OACtB,CAAA,CAAA;AAAA,MACF,kBAAmB,CAAA,KAAA,EAAO,MAAQ,EAAA,CAAC,GAAS,MAAA;AAAA,QAC1C,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,OACzB,CAAA,CAAA;AAAA,MACF,kBAAmB,CAAA,KAAA,EAAO,SAAW,EAAA,CAAC,GAAS,MAAA;AAAA,QAC7C,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,OAC5B,CAAA,CAAA;AAAA,MACF,cACE,IAAA,kBAAA,CAAmB,KAAO,EAAA,cAAA,EAAgB,CAAC,GAAS,MAAA;AAAA,QAClD,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAC,CAAA,OAAA;AAAA,OACnE,CAAA,CAAA;AAAA,MACJ,OACE,IAAA,kBAAA,CAAmB,KAAO,EAAA,OAAA,EAAS,CAAC,GAAS,MAAA;AAAA,QAC3C,mBAAA,EAAqB,UAAU,GAAG,CAAA,MAAA;AAAA,OAClC,CAAA,CAAA;AAAA,MACJ,kBAAmB,CAAA,KAAA,EAAO,UAAY,EAAA,CAAC,GAAS,MAAA;AAAA,QAC9C,UAAY,EAAA;AAAA,OACZ,CAAA;AAAA,KACH;AAAA,GACH;AACF,CAAA;;;;"}