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

Grafana Components Library

import { jsx, jsxs } from 'react/jsx-runtime';
import { css, cx } from '@emotion/css';
import * as React from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getChildId } from '../../utils/reactUtils.mjs';
import { FieldValidationMessage } from './FieldValidationMessage.mjs';
import { Label } from './Label.mjs';

"use strict";
const Field = React.forwardRef(
  ({
    label,
    description,
    horizontal,
    invalid,
    loading,
    disabled,
    required,
    error,
    children,
    className,
    validationMessageHorizontalOverflow,
    htmlFor,
    noMargin,
    ...otherProps
  }, ref) => {
    const styles = useStyles2(getFieldStyles, noMargin);
    const inputId = htmlFor != null ? htmlFor : getChildId(children);
    const labelElement = typeof label === "string" ? /* @__PURE__ */ jsx(Label, { htmlFor: inputId, description, children: `${label}${required ? " *" : ""}` }) : label;
    const childProps = deleteUndefinedProps({ invalid, disabled, loading });
    return /* @__PURE__ */ jsxs("div", { className: cx(styles.field, horizontal && styles.fieldHorizontal, className), ...otherProps, children: [
      labelElement,
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("div", { ref, children: React.cloneElement(children, childProps) }),
        invalid && error && !horizontal && /* @__PURE__ */ jsx(
          "div",
          {
            className: cx(styles.fieldValidationWrapper, {
              [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
            }),
            children: /* @__PURE__ */ jsx(FieldValidationMessage, { children: error })
          }
        )
      ] }),
      invalid && error && horizontal && /* @__PURE__ */ jsx(
        "div",
        {
          className: cx(styles.fieldValidationWrapper, styles.fieldValidationWrapperHorizontal, {
            [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
          }),
          children: /* @__PURE__ */ jsx(FieldValidationMessage, { children: error })
        }
      )
    ] });
  }
);
Field.displayName = "Field";
function deleteUndefinedProps(obj) {
  for (const key in obj) {
    if (obj[key] === void 0) {
      delete obj[key];
    }
  }
  return obj;
}
const getFieldStyles = (theme, noMargin) => ({
  field: css({
    display: "flex",
    flexDirection: "column",
    marginBottom: theme.spacing(noMargin ? 0 : 2)
  }),
  fieldHorizontal: css({
    flexDirection: "row",
    justifyContent: "space-between",
    flexWrap: "wrap"
  }),
  fieldValidationWrapper: css({
    marginTop: theme.spacing(0.5)
  }),
  fieldValidationWrapperHorizontal: css({
    flex: "1 1 100%"
  }),
  validationMessageHorizontalOverflow: css({
    width: 0,
    overflowX: "visible",
    "& > *": {
      whiteSpace: "nowrap"
    }
  })
});

export { Field, getFieldStyles };
//# sourceMappingURL=Field.mjs.map