@grafana/ui/dist/esm/components/FormField/FormField.mjs.map

Grafana Components Library

{"version":3,"file":"FormField.mjs","sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport * as React from 'react';\n\nimport { InlineFormLabel } from '../FormLabel/FormLabel';\nimport { Field } from '../Forms/Field';\nimport { InlineField } from '../Forms/InlineField';\nimport { type PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  tooltip?: PopoverContent;\n  labelWidth?: number;\n  // If null no width will be specified not even default one\n  inputWidth?: number | null;\n  inputEl?: React.ReactNode;\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\n/**\n * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass\n * custom inputEl if required in which case inputWidth and inputProps are ignored.\n *\n * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.\n * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-formfield--docs\n */\nexport const FormField = ({\n  label,\n  tooltip,\n  labelWidth = 6,\n  inputWidth = 12,\n  inputEl,\n  className,\n  interactive,\n  ...inputProps\n}: Props) => {\n  const styles = getStyles();\n  const id = useId();\n  return (\n    <div className={cx(styles.formField, className)}>\n      <InlineFormLabel htmlFor={id} width={labelWidth} tooltip={tooltip} interactive={interactive}>\n        {label}\n      </InlineFormLabel>\n      {inputEl || (\n        <input\n          id={id}\n          type=\"text\"\n          className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}\n          {...inputProps}\n          disabled={inputProps.disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nFormField.displayName = 'FormField';\n\nconst getStyles = () => {\n  return {\n    formField: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      textAlign: 'left',\n      position: 'relative',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,UAAA,GAAa,EAAA;AAAA,EACb,OAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA,EAC5C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,mBAAgB,OAAA,EAAS,EAAA,EAAI,OAAO,UAAA,EAAY,OAAA,EAAkB,aAChE,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,OAAA,oBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA,EAAK,MAAA;AAAA,QACL,WAAW,CAAA,cAAA,EAAiB,UAAA,GAAa,CAAA,MAAA,EAAS,UAAU,KAAK,EAAE,CAAA,CAAA;AAAA,QAClE,GAAG,UAAA;AAAA,QACJ,UAAU,UAAA,CAAW;AAAA;AAAA;AACvB,GAAA,EAEJ,CAAA;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,MAAM,YAAY,MAAM;AACtB,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,KAAA;AAAA,MACf,UAAA,EAAY,YAAA;AAAA,MACZ,SAAA,EAAW,MAAA;AAAA,MACX,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AACF,CAAA;;;;"}