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

Grafana Components Library

{"version":3,"file":"Stack.mjs","sources":["../../../../../src/components/Layout/Stack/Stack.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { AlignItems, Direction, FlexProps, JustifyContent, Wrap } from '../types';\nimport { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness';\nimport { getSizeStyles, SizeProps } from '../utils/styles';\n\ninterface StackProps extends FlexProps, SizeProps, Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {\n  gap?: ResponsiveProp<ThemeSpacingTokens>;\n  rowGap?: ResponsiveProp<ThemeSpacingTokens>;\n  columnGap?: ResponsiveProp<ThemeSpacingTokens>;\n  alignItems?: ResponsiveProp<AlignItems>;\n  justifyContent?: ResponsiveProp<JustifyContent>;\n  direction?: ResponsiveProp<Direction>;\n  wrap?: ResponsiveProp<Wrap>;\n  children?: React.ReactNode;\n}\n\n/**\n * The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-stack--docs\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {\n  const {\n    gap = 1,\n    rowGap,\n    columnGap,\n    alignItems,\n    justifyContent,\n    direction,\n    wrap,\n    children,\n    grow,\n    shrink,\n    basis,\n    flex,\n    width,\n    minWidth,\n    maxWidth,\n    height,\n    minHeight,\n    maxHeight,\n    ...rest\n  } = props;\n  const styles = useStyles2(\n    getStyles,\n    gap,\n    rowGap,\n    columnGap,\n    alignItems,\n    justifyContent,\n    direction,\n    wrap,\n    grow,\n    shrink,\n    basis,\n    flex\n  );\n  const sizeStyles = useStyles2(getSizeStyles, width, minWidth, maxWidth, height, minHeight, maxHeight);\n  return (\n    <div ref={ref} className={cx(styles.flex, sizeStyles)} {...rest}>\n      {children}\n    </div>\n  );\n});\n\nStack.displayName = 'Stack';\n\nconst getStyles = (\n  theme: GrafanaTheme2,\n  gap: StackProps['gap'],\n  rowGap: StackProps['rowGap'],\n  columnGap: StackProps['columnGap'],\n  alignItems: StackProps['alignItems'],\n  justifyContent: StackProps['justifyContent'],\n  direction: StackProps['direction'],\n  wrap: StackProps['wrap'],\n  grow: StackProps['grow'],\n  shrink: StackProps['shrink'],\n  basis: StackProps['basis'],\n  flex: StackProps['flex']\n) => {\n  return {\n    flex: css([\n      {\n        display: 'flex',\n      },\n      getResponsiveStyle(theme, direction, (val) => ({\n        flexDirection: val,\n      })),\n      getResponsiveStyle(theme, wrap, (val) => ({\n        flexWrap: typeof val === 'boolean' ? (val ? 'wrap' : 'nowrap') : val,\n      })),\n      getResponsiveStyle(theme, alignItems, (val) => ({\n        alignItems: val,\n      })),\n      getResponsiveStyle(theme, justifyContent, (val) => ({\n        justifyContent: val,\n      })),\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      getResponsiveStyle(theme, grow, (val) => ({\n        flexGrow: val,\n      })),\n      getResponsiveStyle(theme, shrink, (val) => ({\n        flexShrink: val,\n      })),\n      getResponsiveStyle(theme, basis, (val) => ({\n        flexBasis: val,\n      })),\n      getResponsiveStyle(theme, flex, (val) => ({\n        flex: val,\n      })),\n    ]),\n  };\n};\n"],"names":[],"mappings":"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"}