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

Grafana Components Library

{"version":3,"file":"InlineField.mjs","sources":["../../../../src/components/Forms/InlineField.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { cloneElement, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getChildId } from '../../utils/reactUtils';\nimport { PopoverContent } from '../Tooltip/types';\n\nimport { FieldProps } from './Field';\nimport { FieldValidationMessage } from './FieldValidationMessage';\nimport { InlineLabel } from './InlineLabel';\n\nexport interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'description' | 'error'> {\n  /** Content for the label's tooltip */\n  tooltip?: PopoverContent;\n  /** Custom width for the label as a multiple of 8px */\n  labelWidth?: number | 'auto';\n  /** Make the field's child to fill the width of the row. Equivalent to setting `flex-grow:1` on the field */\n  grow?: boolean;\n  /** Make the field's child shrink with width of the row. Equivalent to setting `flex-shrink:1` on the field */\n  shrink?: boolean;\n  /** Make field's background transparent */\n  transparent?: boolean;\n  /** Error message to display */\n  error?: ReactNode;\n  htmlFor?: string;\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\nexport const InlineField = ({\n  children,\n  label,\n  tooltip,\n  labelWidth = 'auto',\n  invalid,\n  loading,\n  disabled,\n  required,\n  className,\n  htmlFor,\n  grow,\n  shrink,\n  error,\n  transparent,\n  interactive,\n  validationMessageHorizontalOverflow,\n  ...htmlProps\n}: Props) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, grow, shrink);\n  const inputId = htmlFor ?? getChildId(children);\n\n  const labelElement =\n    typeof label === 'string' ? (\n      <InlineLabel\n        interactive={interactive}\n        width={labelWidth}\n        tooltip={tooltip}\n        htmlFor={inputId}\n        transparent={transparent}\n      >\n        {`${label}${required ? ' *' : ''}`}\n      </InlineLabel>\n    ) : (\n      label\n    );\n\n  return (\n    <div className={cx(styles.container, className)} {...htmlProps}>\n      {labelElement}\n      <div className={styles.childContainer}>\n        {cloneElement(children, { invalid, disabled, loading })}\n        {invalid && error && (\n          <div\n            className={cx(styles.fieldValidationWrapper, {\n              [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow,\n            })}\n          >\n            <FieldValidationMessage>{error}</FieldValidationMessage>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nInlineField.displayName = 'InlineField';\n\nconst getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {\n  return {\n    container: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      textAlign: 'left',\n      position: 'relative',\n      flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,\n      margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,\n    }),\n    childContainer: css({\n      flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,\n    }),\n    fieldValidationWrapper: css({\n      marginTop: theme.spacing(0.5),\n    }),\n    validationMessageHorizontalOverflow: css({\n      width: 0,\n      overflowX: 'visible',\n\n      '& > *': {\n        whiteSpace: 'nowrap',\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}