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

Grafana Components Library

import { jsx, jsxs } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { useId, cloneElement } from 'react';
import { useTheme2 } from '../../themes/ThemeContext.mjs';
import { getChildId } from '../../utils/reactUtils.mjs';
import { FieldContext } from './FieldContext.mjs';
import { FieldValidationMessage } from './FieldValidationMessage.mjs';
import { InlineLabel } from './InlineLabel.mjs';
import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup.mjs';

"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 = useTheme2();
  const styles = getStyles(theme, grow, shrink);
  const fieldId = useId();
  const labelId = useId();
  const errorId = useId();
  const inputId = (_a = htmlFor != null ? htmlFor : getChildId(children)) != null ? _a : fieldId;
  const useFieldset = useFieldsetProp != null ? useFieldsetProp : children.type === RadioButtonGroup;
  const labelElement = typeof label === "string" ? /* @__PURE__ */ jsx(
    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__ */ jsx(
    FieldContext.Provider,
    {
      value: {
        id: inputId,
        invalid,
        disabled,
        loading,
        "aria-labelledby": useFieldset ? labelId : void 0,
        "aria-describedby": invalid && error ? errorId : void 0
      },
      children: /* @__PURE__ */ jsxs(Wrapper, { className: cx(styles.container, className), ...htmlProps, children: [
        labelElement,
        /* @__PURE__ */ jsxs("div", { className: styles.childContainer, children: [
          cloneElement(children, {
            invalid,
            disabled,
            loading,
            "aria-labelledby": useFieldset ? labelId : void 0,
            "aria-describedby": invalid && error ? errorId : void 0
          }),
          invalid && error && /* @__PURE__ */ jsx(
            "div",
            {
              className: cx(styles.fieldValidationWrapper, {
                [styles.validationMessageHorizontalOverflow]: !!validationMessageHorizontalOverflow
              }),
              children: /* @__PURE__ */ jsx(FieldValidationMessage, { id: errorId, children: error })
            }
          )
        ] })
      ] })
    }
  );
};
InlineField.displayName = "InlineField";
const getStyles = (theme, grow, shrink) => {
  return {
    container: 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({
      flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`
    }),
    fieldValidationWrapper: css({
      marginTop: theme.spacing(0.5)
    }),
    validationMessageHorizontalOverflow: css({
      width: 0,
      overflowX: "visible",
      "& > *": {
        whiteSpace: "nowrap"
      }
    })
  };
};

export { InlineField };
//# sourceMappingURL=InlineField.mjs.map