@grafana/ui/dist/esm/components/Forms/InlineFieldRow.mjs.map

Grafana Components Library

{"version":3,"file":"InlineFieldRow.mjs","sources":["../../../../src/components/Forms/InlineFieldRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLProps, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface Props extends Omit<HTMLProps<HTMLDivElement>, 'css'> {\n  children: ReactNode | ReactNode[];\n}\n\n/**\n * Used to align multiple InlineField components in one row. The row will wrap if the width of the children exceeds its own. Equivalent to the div with gf-form-inline class name. Multiple InlineFieldRows vertically stack on each other.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefieldrow--docs\n */\nexport const InlineFieldRow = ({ children, className, ...htmlProps }: Props) => {\n  const styles = useStyles2(getStyles);\n  return (\n    <div className={cx(styles.container, className)} {...htmlProps}>\n      {children}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      label: 'InlineFieldRow',\n      display: 'flex',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      alignContent: 'flex-start',\n      rowGap: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,iBAAiB,CAAC,EAAE,UAAU,SAAA,EAAW,GAAG,WAAU,KAAa;AAC9E,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,WAAW,SAAS,CAAA,EAAI,GAAG,SAAA,EAClD,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,KAAA,EAAO,gBAAA;AAAA,MACP,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,QAAA,EAAU,MAAA;AAAA,MACV,YAAA,EAAc,YAAA;AAAA,MACd,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,KAC1B;AAAA,GACH;AACF,CAAA;;;;"}