@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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"}