@grafana/ui/dist/cjs/components/Forms/Field.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var reactUtils = require('../../utils/reactUtils.cjs');
var FieldContext = require('./FieldContext.cjs');
var FieldValidationMessage = require('./FieldValidationMessage.cjs');
var Label = require('./Label.cjs');
var RadioButtonGroup = require('./RadioButtonGroup/RadioButtonGroup.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const Field = React__namespace.forwardRef(
  ({
    label: labelProp,
    description,
    horizontal,
    invalid,
    loading,
    disabled,
    required,
    error,
    children,
    className,
    validationMessageHorizontalOverflow,
    htmlFor,
    noMargin,
    useFieldset: useFieldsetProp,
    ...otherProps
  }, ref) => {
    var _a;
    const styles = ThemeContext.useStyles2(getFieldStyles, noMargin);
    const labelStyles = ThemeContext.useStyles2(Label.getLabelStyles);
    const useFieldset = useFieldsetProp != null ? useFieldsetProp : children.type === RadioButtonGroup.RadioButtonGroup;
    const label = typeof labelProp === "string" ? `${labelProp}${required ? " *" : ""}` : labelProp;
    const fieldId = React.useId();
    const errorId = React.useId();
    const inputId = (_a = htmlFor != null ? htmlFor : reactUtils.getChildId(children)) != null ? _a : fieldId;
    let labelElement = label;
    if (useFieldset) {
      if (typeof label === "string") {
        labelElement = /* @__PURE__ */ jsxRuntime.jsxs("legend", { className: labelStyles.label, children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelStyles.labelContent, children: label }),
          description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyles.description, children: description })
        ] });
      } else {
        labelElement = /* @__PURE__ */ jsxRuntime.jsx("legend", { className: labelStyles.label, children: label });
      }
    } else if (typeof label === "string") {
      labelElement = /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: inputId, description, children: label });
    }
    const childProps = deleteUndefinedProps({ invalid, disabled, loading });
    if (invalid && error) {
      childProps["aria-describedby"] = errorId;
    }
    const Wrapper = useFieldset ? "fieldset" : "div";
    return /* @__PURE__ */ jsxRuntime.jsx(
      FieldContext.FieldContext.Provider,
      {
        value: {
          id: inputId,
          invalid,
          disabled,
          loading,
          "aria-describedby": invalid && error ? errorId : void 0
        },
        children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { className: css.cx(styles.field, horizontal && styles.fieldHorizontal, className), ...otherProps, children: [
          labelElement,
          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
            /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: React__namespace.cloneElement(children, children.type !== React__namespace.Fragment ? childProps : void 0) }),
            invalid && error && !horizontal && /* @__PURE__ */ jsxRuntime.jsx(
              "div",
              {
                className: css.cx(styles.fieldValidationWrapper, {
                  [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
                }),
                children: /* @__PURE__ */ jsxRuntime.jsx(FieldValidationMessage.FieldValidationMessage, { id: errorId, children: error })
              }
            )
          ] }),
          invalid && error && horizontal && /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: css.cx(styles.fieldValidationWrapper, styles.fieldValidationWrapperHorizontal, {
                [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
              }),
              children: /* @__PURE__ */ jsxRuntime.jsx(FieldValidationMessage.FieldValidationMessage, { id: errorId, 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.css({
    display: "flex",
    flexDirection: "column",
    marginBottom: theme.spacing(noMargin ? 0 : 2)
  }),
  fieldHorizontal: css.css({
    flexDirection: "row",
    justifyContent: "space-between",
    flexWrap: "wrap"
  }),
  fieldValidationWrapper: css.css({
    marginTop: theme.spacing(0.5)
  }),
  fieldValidationWrapperHorizontal: css.css({
    flex: "1 1 100%"
  }),
  validationMessageHorizontalOverflow: css.css({
    width: 0,
    overflowX: "visible",
    "& > *": {
      whiteSpace: "nowrap"
    }
  })
});

exports.Field = Field;
//# sourceMappingURL=Field.cjs.map