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

Grafana Components Library

{"version":3,"file":"Field.mjs","sources":["../../../../src/components/Forms/Field.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getChildId } from '../../utils/reactUtils';\n\nimport { FieldValidationMessage } from './FieldValidationMessage';\nimport { Label } from './Label';\n\nexport interface FieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** Form input element, i.e Input or Switch */\n  children: React.ReactElement;\n  /** Label for the field */\n  label?: React.ReactNode;\n  /** Description of the field */\n  description?: React.ReactNode;\n  /** Indicates if field is in invalid state */\n  invalid?: boolean;\n  /** Indicates if field is in loading state */\n  loading?: boolean;\n  /** Indicates if field is disabled */\n  disabled?: boolean;\n  /** Indicates if field is required */\n  required?: boolean;\n  /** Error message to display */\n  error?: React.ReactNode;\n  /** Indicates horizontal layout of the field */\n  horizontal?: boolean;\n  /** make validation message overflow horizontally. Prevents pushing out adjacent inline components */\n  validationMessageHorizontalOverflow?: boolean;\n\n  className?: string;\n  /**\n   *  A unique id that associates the label of the Field component with the control with the unique id.\n   *  If the `htmlFor` property is missing the `htmlFor` will be inferred from the `id` or `inputId` property of the first child.\n   *  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for\n   */\n  htmlFor?: string;\n  /** Remove the bottom margin */\n  noMargin?: boolean;\n}\n\n/**\n * Field is the basic component for rendering form elements together with labels and description.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-field--docs\n */\nexport const Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  (\n    {\n      label,\n      description,\n      horizontal,\n      invalid,\n      loading,\n      disabled,\n      required,\n      error,\n      children,\n      className,\n      validationMessageHorizontalOverflow,\n      htmlFor,\n      noMargin,\n      ...otherProps\n    }: FieldProps,\n    ref\n  ) => {\n    const styles = useStyles2(getFieldStyles, noMargin);\n    const inputId = htmlFor ?? getChildId(children);\n\n    const labelElement =\n      typeof label === 'string' ? (\n        <Label htmlFor={inputId} description={description}>\n          {`${label}${required ? ' *' : ''}`}\n        </Label>\n      ) : (\n        label\n      );\n\n    const childProps = deleteUndefinedProps({ invalid, disabled, loading });\n    return (\n      <div className={cx(styles.field, horizontal && styles.fieldHorizontal, className)} {...otherProps}>\n        {labelElement}\n        <div>\n          <div ref={ref}>{React.cloneElement(children, childProps)}</div>\n          {invalid && error && !horizontal && (\n            <div\n              className={cx(styles.fieldValidationWrapper, {\n                [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow,\n              })}\n            >\n              <FieldValidationMessage>{error}</FieldValidationMessage>\n            </div>\n          )}\n        </div>\n\n        {invalid && error && horizontal && (\n          <div\n            className={cx(styles.fieldValidationWrapper, styles.fieldValidationWrapperHorizontal, {\n              [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow,\n            })}\n          >\n            <FieldValidationMessage>{error}</FieldValidationMessage>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nField.displayName = 'Field';\n\nfunction deleteUndefinedProps<T extends Object>(obj: T): Partial<T> {\n  for (const key in obj) {\n    if (obj[key] === undefined) {\n      delete obj[key];\n    }\n  }\n\n  return obj;\n}\n\nexport const getFieldStyles = (theme: GrafanaTheme2, noMargin?: boolean) => ({\n  field: css({\n    display: 'flex',\n    flexDirection: 'column',\n    marginBottom: theme.spacing(noMargin ? 0 : 2),\n  }),\n  fieldHorizontal: css({\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n  }),\n  fieldValidationWrapper: css({\n    marginTop: theme.spacing(0.5),\n  }),\n  fieldValidationWrapperHorizontal: css({\n    flex: '1 1 100%',\n  }),\n  validationMessageHorizontalOverflow: css({\n    width: 0,\n    overflowX: 'visible',\n\n    '& > *': {\n      whiteSpace: 'nowrap',\n    },\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;AAkDO,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EACzB,CACE;AAAA,IACE,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,mCAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,cAAA,EAAgB,QAAQ,CAAA;AAClD,IAAA,MAAM,OAAA,GAAU,OAAA,IAAA,IAAA,GAAA,OAAA,GAAW,UAAA,CAAW,QAAQ,CAAA;AAE9C,IAAA,MAAM,eACJ,OAAO,KAAA,KAAU,QAAA,mBACf,GAAA,CAAC,SAAM,OAAA,EAAS,OAAA,EAAS,WAAA,EACtB,QAAA,EAAA,CAAA,EAAG,KAAK,CAAA,EAAG,QAAA,GAAW,IAAA,GAAO,EAAE,IAClC,CAAA,GAEA,KAAA;AAGJ,IAAA,MAAM,aAAa,oBAAA,CAAqB,EAAE,OAAA,EAAS,QAAA,EAAU,SAAS,CAAA;AACtE,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,KAAA,EAAO,UAAA,IAAc,MAAA,CAAO,eAAA,EAAiB,SAAS,CAAA,EAAI,GAAG,UAAA,EACpF,QAAA,EAAA;AAAA,MAAA,YAAA;AAAA,2BACA,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,GAAA,EAAW,QAAA,EAAA,KAAA,CAAM,YAAA,CAAa,QAAA,EAAU,UAAU,CAAA,EAAE,CAAA;AAAA,QACxD,OAAA,IAAW,KAAA,IAAS,CAAC,UAAA,oBACpB,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,sBAAA,EAAwB;AAAA,cAC3C,CAAC,MAAA,CAAO,mCAAmC,GAAG,CAAC,CAAC;AAAA,aACjD,CAAA;AAAA,YAED,QAAA,kBAAA,GAAA,CAAC,0BAAwB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AACjC,OAAA,EAEJ,CAAA;AAAA,MAEC,OAAA,IAAW,SAAS,UAAA,oBACnB,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,sBAAA,EAAwB,OAAO,gCAAA,EAAkC;AAAA,YACpF,CAAC,MAAA,CAAO,mCAAmC,GAAG,CAAC,CAAC;AAAA,WACjD,CAAA;AAAA,UAED,QAAA,kBAAA,GAAA,CAAC,0BAAwB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AACjC,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAEpB,SAAS,qBAAuC,GAAA,EAAoB;AAClE,EAAA,KAAA,MAAW,OAAO,GAAA,EAAK;AACrB,IAAA,IAAI,GAAA,CAAI,GAAG,CAAA,KAAM,KAAA,CAAA,EAAW;AAC1B,MAAA,OAAO,IAAI,GAAG,CAAA;AAAA,IAChB;AAAA,EACF;AAEA,EAAA,OAAO,GAAA;AACT;AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAsB,QAAA,MAAwB;AAAA,EAC3E,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,QAAA,GAAW,IAAI,CAAC;AAAA,GAC7C,CAAA;AAAA,EACD,iBAAiB,GAAA,CAAI;AAAA,IACnB,aAAA,EAAe,KAAA;AAAA,IACf,cAAA,EAAgB,eAAA;AAAA,IAChB,QAAA,EAAU;AAAA,GACX,CAAA;AAAA,EACD,wBAAwB,GAAA,CAAI;AAAA,IAC1B,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,GAC7B,CAAA;AAAA,EACD,kCAAkC,GAAA,CAAI;AAAA,IACpC,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,qCAAqC,GAAA,CAAI;AAAA,IACvC,KAAA,EAAO,CAAA;AAAA,IACP,SAAA,EAAW,SAAA;AAAA,IAEX,OAAA,EAAS;AAAA,MACP,UAAA,EAAY;AAAA;AACd,GACD;AACH,CAAA;;;;"}