@grafana/ui/dist/cjs/components/Forms/InlineField.cjs.map

Grafana Components Library

{"version":3,"file":"InlineField.cjs","sources":["../../../../src/components/Forms/InlineField.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { cloneElement, type ReactNode, useId } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getChildId } from '../../utils/reactUtils';\nimport { type PopoverContent } from '../Tooltip/types';\n\nimport { type FieldProps } from './Field';\nimport { FieldContext } from './FieldContext';\nimport { FieldValidationMessage } from './FieldValidationMessage';\nimport { InlineLabel } from './InlineLabel';\nimport { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';\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\n/**\n * A basic component for rendering form elements, like `Input`, `Checkbox`, `Combobox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefield--docs\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  useFieldset: useFieldsetProp,\n  ...htmlProps\n}: Props) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, grow, shrink);\n  const fieldId = useId();\n  const labelId = useId();\n  const errorId = useId();\n  const inputId = htmlFor ?? getChildId(children) ?? fieldId;\n  const useFieldset = useFieldsetProp ?? children.type === RadioButtonGroup;\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        id={labelId}\n        as={useFieldset ? 'span' : 'label'}\n      >\n        {`${label}${required ? ' *' : ''}`}\n      </InlineLabel>\n    ) : (\n      label\n    );\n\n  const Wrapper = useFieldset ? 'fieldset' : 'div';\n\n  return (\n    <FieldContext.Provider\n      value={{\n        id: inputId,\n        invalid,\n        disabled,\n        loading,\n        'aria-labelledby': useFieldset ? labelId : undefined,\n        'aria-describedby': invalid && error ? errorId : undefined,\n      }}\n    >\n      <Wrapper className={cx(styles.container, className)} {...htmlProps}>\n        {labelElement}\n        <div className={styles.childContainer}>\n          {/* @deprecated — passing props via children is discouraged and will be removed at some point, use FieldContext instead */}\n          {cloneElement(children, {\n            invalid,\n            disabled,\n            loading,\n            'aria-labelledby': useFieldset ? labelId : undefined,\n            'aria-describedby': invalid && error ? errorId : undefined,\n          })}\n          {invalid && error && (\n            <div\n              className={cx(styles.fieldValidationWrapper, {\n                [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow,\n              })}\n            >\n              <FieldValidationMessage id={errorId}>{error}</FieldValidationMessage>\n            </div>\n          )}\n        </div>\n      </Wrapper>\n    </FieldContext.Provider>\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":["useTheme2","useId","getChildId","RadioButtonGroup","jsx","InlineLabel","FieldContext","jsxs","cx","cloneElement","FieldValidationMessage","css"],"mappings":"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"}