@grafana/ui/dist/cjs/components/Forms/InlineField.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 InlineLabel = require('./InlineLabel.cjs');
var RadioButtonGroup = require('./RadioButtonGroup/RadioButtonGroup.cjs');

"use strict";
const InlineField = ({
  children,
  label,
  tooltip,
  labelWidth = "auto",
  invalid,
  loading,
  disabled,
  required,
  className,
  htmlFor,
  grow,
  shrink,
  error,
  transparent,
  interactive,
  validationMessageHorizontalOverflow,
  useFieldset: useFieldsetProp,
  ...htmlProps
}) => {
  var _a;
  const theme = ThemeContext.useTheme2();
  const styles = getStyles(theme, grow, shrink);
  const fieldId = React.useId();
  const labelId = React.useId();
  const errorId = React.useId();
  const inputId = (_a = htmlFor != null ? htmlFor : reactUtils.getChildId(children)) != null ? _a : fieldId;
  const useFieldset = useFieldsetProp != null ? useFieldsetProp : children.type === RadioButtonGroup.RadioButtonGroup;
  const labelElement = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
    InlineLabel.InlineLabel,
    {
      interactive,
      width: labelWidth,
      tooltip,
      htmlFor: inputId,
      transparent,
      id: labelId,
      as: useFieldset ? "span" : "label",
      children: `${label}${required ? " *" : ""}`
    }
  ) : label;
  const Wrapper = useFieldset ? "fieldset" : "div";
  return /* @__PURE__ */ jsxRuntime.jsx(
    FieldContext.FieldContext.Provider,
    {
      value: {
        id: inputId,
        invalid,
        disabled,
        loading,
        "aria-labelledby": useFieldset ? labelId : void 0,
        "aria-describedby": invalid && error ? errorId : void 0
      },
      children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { className: css.cx(styles.container, className), ...htmlProps, children: [
        labelElement,
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.childContainer, children: [
          React.cloneElement(children, {
            invalid,
            disabled,
            loading,
            "aria-labelledby": useFieldset ? labelId : void 0,
            "aria-describedby": invalid && error ? errorId : void 0
          }),
          invalid && error && /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: css.cx(styles.fieldValidationWrapper, {
                [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
              }),
              children: /* @__PURE__ */ jsxRuntime.jsx(FieldValidationMessage.FieldValidationMessage, { id: errorId, children: error })
            }
          )
        ] })
      ] })
    }
  );
};
InlineField.displayName = "InlineField";
const getStyles = (theme, grow, shrink) => {
  return {
    container: css.css({
      display: "flex",
      flexDirection: "row",
      alignItems: "flex-start",
      textAlign: "left",
      position: "relative",
      flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,
      margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`
    }),
    childContainer: css.css({
      flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`
    }),
    fieldValidationWrapper: css.css({
      marginTop: theme.spacing(0.5)
    }),
    validationMessageHorizontalOverflow: css.css({
      width: 0,
      overflowX: "visible",
      "& > *": {
        whiteSpace: "nowrap"
      }
    })
  };
};

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