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